/* 00-base.css · Luvela site v3, versão C (split from version B's style.css; B's order kept inside the module) */

/* ======================================================================================================== */
/* A escala do palco (DIRECAO.md 3.1)                                                                       */
/* Design reference: 1440 × 900 with 1rem = 16 px. From 768 px up every size of the composition is in rem    */
/* and the root follows the window: min(100vw / 90, 1.86svh) is exactly 16 px at 1440 × 900 (100vw / 90 is  */
/* the brief's 1.111vw without the rounding), 13 px at 1263 × 577 and on the tablet, ~20 px at 1920 × 1080,  */
/* ~24 px at 2560 × 1300. Under 768 px nothing is set: 1rem = 16 px (phone layouts in px, as in version B).  */
/* One design pixel is var(--px) in CSS and LV.u() / window.__u() in JavaScript.                             */
/* Readable floors: running text max(<rem>, 14px), small labels max(<rem>, 12px) (tools/rem.mjs adds them).  */
/* New CSS: write rem (px / 16), or px and run `node tools/rem.mjs src/css/<file>.css`.                      */
/* ======================================================================================================== */
@media (min-width: 768px) { html { font-size: clamp(13px, min(100vw / 90, 1.86svh), 25.6px); /* px */ } }
:root { --px: calc(1rem / 16); --texto-min: 14px; /* px */ --rotulo-min: 12px; /* px */ }

/* ======================================================================================================== */
/* Os tamanhos de tela (tiers). Browsers have no custom media yet: copy these exact queries. The same names  */
/* are on <html data-tier="..."> (a list, e.g. "tablet short") and in LV.TIER_MQ / LV.tier() for scripts.    */
/*   phone   (max-width: 767.98px)                                        390 × 844, 360 × 640              */
/*   small   (max-width: 379.98px), (max-width: 767.98px) and (max-height: 699.98px)     360 × 640 (a phone) */
/*   tablet  (min-width: 768px) and (max-width: 1023.98px)                768 × 1024                        */
/*   short   (min-width: 900px) and (max-height: 700px)                   1263 × 577 (may also be tablet)   */
/*   desk    (min-width: 1024px) and (min-height: 700.02px)               1280 × 720 and up                 */
/* Hooks: .only-<tier> / .hide-<tier> (display: none !important outside / inside the tier).                 */
/* In the short tier every pinned scene needs its own short layout and every section title must be fully    */
/* visible below the header (tools/lint.cjs checks it at 1263 × 577).                                       */
/* ======================================================================================================== */
@media (max-width: 767.98px) { .hide-phone { display: none !important; } }
@media (min-width: 768px) { .only-phone { display: none !important; } }
@media (max-width: 379.98px), (max-width: 767.98px) and (max-height: 699.98px) { .hide-small { display: none !important; } }
@media (min-width: 768px), (min-width: 380px) and (min-height: 700px) { .only-small { display: none !important; } }
@media (min-width: 768px) and (max-width: 1023.98px) { .hide-tablet { display: none !important; } }
@media (max-width: 767.98px), (min-width: 1024px) { .only-tablet { display: none !important; } }
@media (min-width: 900px) and (max-height: 700px) { .hide-short { display: none !important; } }
@media (max-width: 899.98px), (min-height: 700.02px) { .only-short { display: none !important; } }
@media (min-width: 1024px) and (min-height: 700.02px) { .hide-desk { display: none !important; } }
@media (max-width: 1023.98px), (max-height: 700px) { .only-desk { display: none !important; } }
/*
 * Luvela · protótipo do site v3 ("uma viagem só").
 * Tokens tirados de web/src/site/site.css e brand.ts: as mesmas cores, fontes, raios, sombras e as três curvas.
 * Regra de sempre: o estado pronto é o padrão. O que anda é escrito pelo app.js só em transform e opacity
 * (e no clip-path do painel da Confiança). Com menos movimento (.is-still) nada viaja e nada fica preso.
 */
@font-face { font-family: 'Newsreader'; font-weight: 400; font-display: swap; src: url('assets/fonts/newsreader-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans Variable'; font-weight: 200 800; font-display: swap; src: url('assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
:root {
  --noite: #0b1530; --anil-noite: #14215a; --anil: #1b2b6e; --escuro-superficie: #131d40;
  --luar: #f6edd8; --escuro-apagado: #aeb3c7; --escuro-linha-forte: #7380ae; --escuro-link: #9db8ff;
  --chama: #f5a23a; --urucum: #d9481c;
  --papel: #f2f1ec; --canvas: #e8e7e1; --canvas-fundo: #deddd6; --branco: #fff; --fundo-app: #f5f8fc;
  --texto: #26282e; --apagado: #5e5d56; --linha-forte: #7a7970; --linha: #cfcec6; --tracejado: #c9c8c0;
  --azul-texto: #1d4ed8; --verde-texto: #047857; --grafite: #2a2d36;

  --sombra-1: 0 1px 1px rgba(11,21,48,.08), 0 0.375rem 0.875rem -0.375rem rgba(11,21,48,.16);
  --sombra-2: 0 0.125rem 0.1875rem rgba(11,21,48,.08), 0 1.125rem 2.25rem -0.875rem rgba(11,21,48,.28);
  --sombra-3: 0 1.875rem 3.75rem -1rem rgba(11,21,48,.42), 0 0.625rem 1.375rem -0.625rem rgba(11,21,48,.30);
  --sombra-noite: 0 0.125rem 0.25rem rgba(2,6,20,.5), 0 1.25rem 2.5rem -0.875rem rgba(2,6,20,.7);
  --borda-papel-2: 0 1px 0 #d9d7cf, 0 0.125rem 0 #cfcec6;
  --borda-noite: 0 1px 0 #1b2b6e, 0 0.125rem 0 #050a18;
  --fio-claro: inset 0 0 0 1px rgba(11,21,48,.06);
  --fio-noite: inset 0 0 0 1px rgba(246,237,216,.08);

  --ease-ui: cubic-bezier(.22,1,.36,1);
  --ease-morph: cubic-bezier(.65,0,.35,1);
  --ease-pop: cubic-bezier(.2,1.35,.35,1);
  --ease-exit: cubic-bezier(.4,0,1,1);

  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  --gutter: 1rem; --secao-y: 5.5rem; --nav-h: 4rem;
}
@media (min-width: 768px) { :root { --gutter: 2rem; --secao-y: 7rem; --nav-h: 4.5rem; } }
@media (min-width: 1280px) { :root { --gutter: 2.5rem; --secao-y: 8.5rem; } }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--papel); color: var(--texto); font-family: var(--font-sans); scroll-padding-top: 5.5rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); font-size: max(1rem, 14px); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
@media (min-width: 1280px) { body { font-size: max(1.0625rem, 14px); } }
img, svg, canvas { display: block; }
picture { display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 0.125rem solid var(--azul-texto); outline-offset: 0.1875rem; border-radius: 0.375rem; }
[data-surface='noite'] :focus-visible, .foot :focus-visible { outline-color: var(--escuro-link); }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 1rem; top: -3.75rem; z-index: 100; padding: 0.625rem 1rem; border-radius: 62.4375rem; background: var(--noite); color: var(--branco); font-weight: 600; text-decoration: none; }
.skip:focus { top: 0.75rem; }
.is-vitrine .only-app, html:not(.is-vitrine) .only-vitrine { display: none !important; }
.wrap { width: 100%; max-width: calc(75rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.secao { position: relative; padding-block: var(--secao-y); }
/* ---------- texto ---------- */
.t-h1, .t-h2, .t-statement, .t-price { margin: 0; font-family: var(--font-serif); font-weight: 400; }
.t-h1 { font-size: max(clamp(2rem, 9.4vw, 2.25rem), 14px); line-height: 1.06; letter-spacing: -.02em; }
.t-h2 { font-size: max(clamp(1.75rem, 7.6vw, 2rem), 14px); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; }
.t-statement { font-size: max(1.875rem, 14px); line-height: 1.16; letter-spacing: -.015em; }
.t-price { font-size: max(3rem, 14px); line-height: 1; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.t-sub { font-size: max(1.0625rem, 14px); line-height: 1.5; text-wrap: balance; }
.t-label { font-family: var(--font-mono); font-size: max(0.75rem, 12px); line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; }
.t-mono { font-family: var(--font-mono); font-size: max(0.75rem, 12px); line-height: 1.4; }
@media (min-width: 768px) {
  .t-h1 { font-size: max(3.5rem, 14px); line-height: 1.04; }
  .t-h2 { font-size: max(2.5rem, 14px); line-height: 1.08; }
  .t-statement { font-size: max(2.75rem, 14px); line-height: 1.12; }
  .t-price { font-size: max(3.5rem, 14px); }
  .t-sub { font-size: max(1.125rem, 14px); }
}
@media (min-width: 1280px) {
  .t-h1 { font-size: max(4.5rem, 14px); }
  .t-h2 { font-size: max(3.25rem, 14px); line-height: 1.06; }
  .t-statement { font-size: max(3.75rem, 14px); line-height: 1.1; }
  .t-sub { font-size: max(1.1875rem, 14px); }
}
@media (min-width: 1024px) and (max-height: 799px) { .t-h1 { font-size: max(3.5rem, 14px); } }
.tt > span { display: block; }
.t-h1.tt > span { display: inline; }
.t-h1.tt > .tt-1::after { content: '\A'; white-space: pre; }
.tt--claro .tt-1 { color: var(--noite); }
.tt--claro .tt-2 { color: var(--apagado); }
.tt--noite .tt-1 { color: var(--luar); }
.tt--noite .tt-2 { color: var(--escuro-apagado); }
.head { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.head--center { align-items: center; text-align: center; }
.head .t-label { color: var(--apagado); }
.head__sub { max-width: 35rem; color: var(--apagado); }
/* ---------- botões, pílulas, links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.25rem; border: 0; border-radius: 62.4375rem; font-family: var(--font-sans); font-size: max(0.9375rem, 14px); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color 150ms var(--ease-ui), transform 150ms var(--ease-ui), box-shadow 150ms var(--ease-ui); }
.btn:active { transform: scale(.98); }
.btn--lg { min-height: 3.25rem; padding: 0 1.625rem; font-size: max(1rem, 14px); }
.btn--sm { min-height: 2.5rem; padding: 0 1rem; font-size: max(0.875rem, 14px); }
.btn--block { display: flex; width: 100%; }
.btn--noite { background: var(--noite); color: var(--branco); }
.btn--luar { background: var(--luar); color: var(--noite); }
.btn--contorno { background: var(--branco); color: var(--noite); box-shadow: inset 0 0 0 1.5px var(--noite); }
@media (hover: hover) {
  .btn--noite:hover { background: var(--anil-noite); }
  .btn--luar:hover { background: #fff8e6; }
  .btn--contorno:hover { background: var(--papel); }
}
.pill { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1.125rem; border: 0; border-radius: 62.4375rem; font-size: max(0.9375rem, 14px); font-weight: 600; line-height: 1; white-space: nowrap; }
.pill--sm { min-height: 2.25rem; padding: 0 0.875rem; font-size: max(0.875rem, 14px); }
.pill--branco { background: var(--branco); color: var(--noite); box-shadow: var(--fio-claro), var(--borda-papel-2), var(--sombra-1); }
.pill--papel { background: var(--papel); color: var(--noite); box-shadow: inset 0 0 0 1px rgba(11,21,48,.12); }
.pill--on { background: var(--noite); color: var(--branco); }
button.pill { cursor: pointer; transition: background-color 150ms var(--ease-ui), transform 150ms var(--ease-ui); }
button.pill:hover { background: var(--canvas); }
.link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.5rem; color: var(--noite); font-weight: 600; font-size: max(0.9375rem, 14px); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3125rem; background: none; border: 0; cursor: pointer; }
.link--noite { color: var(--luar); }
.link--azul { color: var(--azul-texto); text-decoration: none; padding: 0 0.25rem; min-height: 2.25rem; font-size: max(0.8125rem, 12px); }
.status-pill { display: inline-flex; align-items: center; min-height: 3.25rem; padding: 0 1.5rem; border-radius: 62.4375rem; background: var(--escuro-superficie); color: var(--luar); font-weight: 600; box-shadow: var(--fio-noite); }
.status-pill--claro { background: var(--canvas); color: var(--noite); box-shadow: none; }
.mini-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.125rem; padding: 0 0.75rem; border: 0; border-radius: 62.4375rem; font-size: max(0.8125rem, 12px); font-weight: 600; line-height: 1; white-space: nowrap; }
button.mini-btn { min-height: 2.5rem; cursor: pointer; }
.mini-btn--noite { background: var(--noite); color: var(--branco); }
.mini-btn--papel { background: var(--papel); color: var(--noite); box-shadow: inset 0 0 0 1px rgba(11,21,48,.1); }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; }
/* ícones genéricos, em traço (sem marcas de terceiros) */
.ic { display: inline-block; width: 1rem; height: 1rem; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ic-msg { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E"); }
.ic-cal { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.ic-qr { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cpath d='M14 14h3v3h-3zM20 20h1M17 20h.01M20 14v3'/%3E%3C/svg%3E"); }
.ic-doc { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h6'/%3E%3C/svg%3E"); }
.ic-rec { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l3-2 3 2 2-2 2 2 3-2 3 2V2l-3 2-3-2-2 2-2-2-3 2z'/%3E%3Cpath d='M8 9h8M8 13h6'/%3E%3C/svg%3E"); }
.ic-bell { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9M10.3 21a1.9 1.9 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.ic-eye { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.ic-mic { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M19 10v1a7 7 0 0 1-14 0v-1M12 19v3'/%3E%3C/svg%3E"); }
.ic-web { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20'/%3E%3C/svg%3E"); }
.ic-pin { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.ic-cam { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E"); }
.ic-brain { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z'/%3E%3Cpath d='M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z'/%3E%3C/svg%3E"); }
/* ---------- objetos físicos (o kit de hoje, resumido) ---------- */
.obj, .card { border-radius: 1rem; background: var(--branco); box-shadow: var(--fio-claro), var(--borda-papel-2), var(--sombra-2); }
.card { border-radius: 1.25rem; }
.bubble { display: block; width: fit-content; max-width: 84%; padding: 0.5625rem 0.75rem; border-radius: 1rem; font-size: max(0.875rem, 14px); line-height: 1.38; overflow-wrap: anywhere; }
.bubble--sm { font-size: max(0.8125rem, 12px); padding: 0.5rem 0.6875rem; }
.bubble--in { background: var(--branco); color: var(--noite); border-bottom-left-radius: 0.375rem; box-shadow: var(--fio-claro), 0 1px 0.125rem rgba(11,21,48,.08); }
.bubble--out { margin-left: auto; background: var(--anil-noite); color: var(--luar); border-bottom-right-radius: 0.375rem; }
.bubble--lv { background: var(--branco); color: var(--noite); border-bottom-left-radius: 0.375rem; box-shadow: var(--fio-claro), 0 1px 0.125rem rgba(11,21,48,.08); }
.receipt { display: inline-flex; align-items: flex-start; gap: 0.5rem; padding: 0.625rem 0.75rem; border-radius: 0.875rem; background: var(--branco); color: var(--noite); font-size: max(0.8125rem, 12px); line-height: 1.35; box-shadow: var(--fio-claro), var(--sombra-1); }
.receipt__ic { width: 0.9375rem; height: 0.9375rem; margin-top: 1px; flex: none; fill: none; stroke: var(--verde-texto); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.receipt__undo { margin-left: 0.375rem; font-weight: 600; color: var(--azul-texto); white-space: nowrap; }
.approval__mark { position: absolute; top: 0.75rem; right: 0.75rem; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 0.4375rem; background: var(--papel); }
.approval__mark svg { width: 0.8125rem; fill: var(--noite); }
.approval__q { display: block; padding-right: 1.75rem; font-size: max(0.875rem, 14px); font-weight: 600; line-height: 1.3; color: var(--noite); }
.approval__d { display: block; margin-top: 0.1875rem; font-size: max(0.8125rem, 12px); line-height: 1.4; color: var(--apagado); }
.agenda { display: block; padding: 0.75rem 0.875rem; background: #fbfaf6; }
.agenda__day { display: block; padding-bottom: 0.375rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--linha); font-family: var(--font-serif); font-size: max(1.25rem, 14px); color: var(--noite); }
.agenda__day b { font-weight: 400; color: var(--apagado); font-size: max(0.875rem, 14px); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; margin-right: 0.25rem; }
.agenda__row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: max(0.8125rem, 12px); color: var(--noite); }
.agenda__row i { font-style: normal; width: 2.5rem; font-family: var(--font-mono); font-size: max(0.75rem, 12px); color: var(--apagado); }
.agenda__row em { margin-left: auto; font-style: normal; font-size: max(0.75rem, 12px); color: var(--verde-texto); font-weight: 600; }
.agenda__row.is-free { color: var(--apagado); }
.qr { display: inline-block; flex: none; }
.qr svg { width: 100%; height: 100%; }
/* parado: transição nenhuma (com 0,01 ms o estilo escrito por script passava por uma transição e a leitura logo em
   seguida devolvia o valor antigo) */
.is-still *, .is-still *::before, .is-still *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
html.is-motion { scroll-behavior: smooth; }
@media (forced-colors: active) { .obj, .card, .pill, .plan, .pcard, .faq details, .tile { border: 1px solid CanvasText; } }
/* ---------- ajustes da primeira rodada de capturas ---------- */
[hidden] { display: none !important; }
/* ######################################################################################## */
/* VERSÃO B (13/11/2026, segunda rodada do fundador)                                        */
/* Cada seção tem uma ideia própria dentro de um sistema só: o sistema (herói), a superfície */
/* (Em ação), a órbita, a constelação (tarefas), a lua que enche (Cérebro), o lado da noite  */
/* (Confiança), a régua em órbita (Planos), as perguntas quietas, o amanhecer (Começar) e o  */
/* espaço com a assinatura (rodapé).                                                         */
/* ######################################################################################## */
:root { --chao: #040b1d; }
/* ícones novos, em traço (genéricos) */
.ic-store { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 9l2-5h14l2 5M3 9h18M3 9v1a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0V9M5 13v7h14v-7'/%3E%3C/svg%3E"); }
.ic-send { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E"); }
/* os controles pequenos (pausar, anterior, próxima): 32 px à vista, 44 px de toque */
.tiny { position: relative; display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: var(--branco); color: var(--noite); box-shadow: var(--fio-claro), var(--sombra-1); cursor: pointer; flex: none; transition: background-color 150ms var(--ease-ui); }
.tiny::before { content: ''; position: absolute; inset: -0.375rem; }
.tiny:hover { background: var(--papel); }
.tiny span { position: relative; display: block; width: 0.625rem; height: 0.625rem; }
.tiny--pause span::before, .tiny--pause span::after { content: ''; position: absolute; top: 0; width: 0.1875rem; height: 0.625rem; border-radius: 1px; background: currentColor; }
.tiny--pause span::before { left: 1px; }
.tiny--pause span::after { right: 1px; }
.tiny--pause[aria-pressed='true'] span::before { left: 0.125rem; width: 0; height: 0; border-radius: 0; background: none; border-left: 0.5rem solid currentColor; border-top: 0.3125rem solid transparent; border-bottom: 0.3125rem solid transparent; }
.tiny--pause[aria-pressed='true'] span::after { display: none; }
.tiny--prev span::before, .tiny--next span::before { content: ''; position: absolute; left: 0.125rem; top: 1.5px; width: 0.375rem; height: 0.375rem; border-left: 0.125rem solid currentColor; border-bottom: 0.125rem solid currentColor; transform: translateX(1px) rotate(45deg); }
.tiny--next span::before { transform: translateX(-1px) rotate(-135deg); }

/* 05-cabecalho.css · Luvela site v3, versão C · o cabeçalho: "a barra de órbita" (DIRECAO.md 3.2)                   */
/* ============================================================================================================== */
/* Um cabeçalho só (.nav__bar), em três modos que o 05-cabecalho.js escreve em .nav[data-modo]:                    */
/*   topo    no começo da página: sem fundo, o logo, os links e os botões desenhados direto no céu, em luar;       */
/*   aberta  depois da primeira rolagem: UMA cápsula de vidro com tudo dentro;                                     */
/*   curta   rolando para baixo: a cápsula encolhe para o símbolo, o nome da seção e o botão (a largura é escrita  */
/*           pelo JS em px, para a transição); rolar para cima, passar o ponteiro ou focar abre de novo.           */
/* .nav[data-tema="noite|papel"]: o vidro segue a seção que está embaixo dele (300 ms).                            */
/* .nav.is-fora: a cápsula sai de cena para não cobrir um título de seção ou um controle marcado com data-livre.   */
/* Abaixo de 900 px de largura os links vão para a folha (.nav__folha), aberta pelo botão de menu.                 */
/* A base da cápsula fica sempre dentro de --nav-h (4rem no celular, 4.5rem de 768 px para cima).                  */
/* ============================================================================================================== */
.nav {
  --nav-tinta: var(--luar); --nav-suave: #c9ccd9; --nav-vidro: rgba(14,24,56,.64); --nav-fio: rgba(246,237,216,.14); --nav-brilho: rgba(246,237,216,.07);
  --nav-sombra: 0 0.875rem 2rem -1rem rgba(2,6,20,.8); --nav-realce: rgba(246,237,216,.1); --nav-trilho: rgba(246,237,216,.55);
  --nav-botao: var(--luar); --nav-botao-tinta: var(--noite); --nav-botao-sobre: #fff8e6; --nav-foco: var(--escuro-link);
  --nav-alt: 3rem; --nav-item: 2.5rem;
  position: fixed; inset: 0 0 auto 0; z-index: 40; padding: 0.625rem 0.75rem 0; pointer-events: none;
}
.nav[data-tema='papel'] {
  --nav-tinta: var(--noite); --nav-suave: #4c4f5e; --nav-vidro: rgba(245,244,240,.76); --nav-fio: rgba(11,21,48,.09); --nav-brilho: rgba(255,255,255,.7);
  --nav-sombra: 0 0.875rem 2rem -1rem rgba(11,21,48,.34); --nav-realce: rgba(11,21,48,.06); --nav-trilho: rgba(11,21,48,.45);
  --nav-botao: var(--noite); --nav-botao-tinta: #fff; --nav-botao-sobre: var(--anil-noite); --nav-foco: var(--azul-texto);
}
.nav__in { position: relative; width: min(100%, 76.25rem); margin-inline: auto; }
.nav__bar { position: relative; display: flex; align-items: center; width: 100%; height: var(--nav-alt); padding: 0 0.25rem 0 0.625rem; border-radius: 62.4375rem; color: var(--nav-tinta); pointer-events: auto; isolation: isolate;
  transition: width 420ms var(--ease-morph), transform 320ms var(--ease-ui), opacity 240ms var(--ease-ui), color 300ms var(--ease-ui); }
/* o vidro: uma camada só, que aparece depois da primeira rolagem e troca de tom com a seção */
.nav__bar::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-color: var(--nav-vidro); -webkit-backdrop-filter: blur(1rem) saturate(1.6); backdrop-filter: blur(1rem) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--nav-fio), inset 0 1px 0 var(--nav-brilho), var(--nav-sombra); opacity: 1; transition: opacity 300ms var(--ease-ui), background-color 300ms var(--ease-ui), box-shadow 300ms var(--ease-ui); }
.nav[data-modo='topo'] .nav__bar::before { opacity: 0; }
.nav.is-fora .nav__bar { transform: translate3d(0, calc(-100% - 1.25rem), 0); opacity: 0; pointer-events: none; }
/* o JS mede a largura do modo curto: um instante sem transição, com a cápsula do tamanho do que tem dentro */
.nav.is-medindo, .nav.is-medindo *, .nav.is-medindo *::before, .nav.is-medindo *::after { transition: none !important; }
.nav.is-medindo .nav__bar { width: max-content !important; }
.nav.is-medindo .nav__orbita { display: none !important; }
.nav :focus-visible { outline-color: var(--nav-foco); }

/* ---------------------------------------------------------------- o logo: um planeta pequeno e o nome */
.nav__logo { display: flex; align-items: center; flex: none; height: var(--nav-item); min-width: 2.75rem; padding-right: 0.5rem; border-radius: 62.4375rem; text-decoration: none; color: inherit; }
.dock { position: relative; width: 1.75rem; height: 1.75rem; flex: none; }
.dock__ring { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-opacity: calc(.42 + .45 * (1 - var(--marca, 1))); transition: stroke-opacity 260ms linear; stroke-width: 1.2; stroke-dasharray: .1 3.05; stroke-linecap: round; overflow: visible; }
/* --marca (05-cabecalho.js): 1 com o planeta em casa, 0 enquanto ele viaja pela página (97-viagem.js) */
.dock__sym { position: absolute; left: 0.1875rem; top: 0.1875rem; width: 1.375rem; height: 1.375rem; overflow: visible; fill: currentColor; opacity: var(--marca, 1); transform: scale(calc(.6 + .4 * var(--marca, 1))); transition: opacity 180ms linear, transform 260ms var(--ease-ui); }
.dock__corpo { opacity: .14; }
/* (direção de arte) com o planeta fora, a órbita pontilhada do logo fica mais marcada: lia-se como um buraco vazio no
   começo da cápsula; agora lê-se como a órbita de onde o planeta saiu */
.dock__ring { stroke-width: calc(1.2px + 0.4px * (1 - var(--marca, 1))); stroke-opacity: calc(.42 + .46 * (1 - var(--marca, 1))); }
.nav__nome { display: block; overflow: hidden; max-width: 5rem; margin-left: 0.5625rem; transition: max-width 360ms var(--ease-morph), margin 360ms var(--ease-morph), opacity 220ms var(--ease-ui); }
.nav__word { height: 1.0625rem; width: auto; fill: currentColor; }

/* ---------------------------------------------------------------- o nome da seção (modo curto) */
.nav__onde { display: block; flex: none; overflow: hidden; max-width: 0; opacity: 0; white-space: nowrap; font-size: max(0.9375rem, 14px); font-weight: 600; line-height: 1; transition: max-width 360ms var(--ease-morph), opacity 220ms var(--ease-ui); }
.nav__onde-in { display: inline-flex; align-items: center; gap: 0.5rem; height: var(--nav-item); padding: 0 0.875rem 0 0.125rem; }
.nav__brasa, .nav__astro { display: block; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff1c9 0 16%, #f8b450 46%, #e07a1c 100%); box-shadow: 0 0 0.5rem 0.03125rem rgba(245,162,58,.6); }
.nav[data-tema='papel'] .nav__brasa, .nav[data-tema='papel'] .nav__astro { box-shadow: 0 0 0.4375rem 0 rgba(226,122,28,.5), 0 0 0 1px rgba(160,84,16,.25); }

/* ---------------------------------------------------------------- os links, na linha de órbita */
.nav__orbita { display: none; flex: 1 1 0; min-width: 0; justify-content: center; height: 100%; transition: opacity 240ms var(--ease-ui); }
.nav__pista { position: relative; display: flex; align-items: center; height: 100%; }
.nav__links { display: flex; gap: 0.125rem; }
.nav__links a { display: inline-flex; align-items: center; height: var(--nav-item); padding: 0 0.875rem; border-radius: 62.4375rem; font-size: max(0.9375rem, 14px); font-weight: 600; line-height: 1; white-space: nowrap; color: var(--nav-suave); text-decoration: none; transition: color 200ms var(--ease-ui), background-color 150ms var(--ease-ui); }
.nav__links a[aria-current] { color: var(--nav-tinta); }
@media (hover: hover) { .nav__links a:hover { color: var(--nav-tinta); background: var(--nav-realce); } }
.nav__trilho { position: absolute; left: -1.75rem; right: -1.75rem; bottom: calc((var(--nav-alt) - var(--nav-item)) / 2 - 0.0625rem); width: calc(100% + 3.5rem); height: 0.4375rem; overflow: visible; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.nav__trilho path { fill: none; stroke: var(--nav-trilho); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: .1 5; transition: stroke 300ms var(--ease-ui); }
.nav__astro { position: absolute; left: -0.25rem; top: -0.25rem; opacity: 0; transform: translate3d(var(--ax, 0px), var(--ay, 0px), 0) scale(.4); transition: transform 520ms var(--ease-morph), opacity 240ms var(--ease-ui); pointer-events: none; }
.nav__astro.is-on { opacity: 1; transform: translate3d(var(--ax, 0px), var(--ay, 0px), 0) scale(1); }

/* ---------------------------------------------------------------- a conta */
.nav__conta { display: flex; align-items: center; flex: none; gap: 0.125rem; margin-left: auto; }
.nav__entrar { display: none; align-items: center; overflow: hidden; height: var(--nav-item); max-width: 6rem; padding: 0 0.75rem; border-radius: 62.4375rem; font-size: max(0.9375rem, 14px); font-weight: 600; line-height: 1; white-space: nowrap; color: var(--nav-tinta); text-decoration: none; transition: max-width 360ms var(--ease-morph), padding 360ms var(--ease-morph), opacity 220ms var(--ease-ui), background-color 150ms var(--ease-ui); }
@media (hover: hover) { .nav__entrar:hover { background: var(--nav-realce); } }
.nav__cta { display: inline-flex; align-items: center; justify-content: center; height: var(--nav-item); padding: 0 1.0625rem; border-radius: 62.4375rem; background-color: var(--nav-botao); color: var(--nav-botao-tinta); font-size: max(0.875rem, 14px); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; transition: background-color 300ms var(--ease-ui), color 300ms var(--ease-ui), transform 150ms var(--ease-ui); }
.nav__cta:active { transform: scale(.98); }
@media (hover: hover) { .nav__cta:hover { background-color: var(--nav-botao-sobre); } }
.w-long { display: none; }

/* ---------------------------------------------------------------- o botão de menu e a folha (abaixo de 900 px) */
.nav__menu { position: relative; display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; margin-left: 0.125rem; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nav__conta + .nav__menu { margin-left: 0.125rem; }
.is-vitrine .nav__menu { margin-left: auto; }
.nav__menu span, .nav__menu span::before { display: block; width: 1.125rem; height: 0.125rem; border-radius: 0.125rem; background: currentColor; transition: transform 280ms var(--ease-ui); }
.nav__menu span { transform: translateY(-0.1875rem); }
.nav__menu span::before { content: ''; transform: translateY(0.375rem); }
.nav__menu[aria-expanded='true'] span { transform: rotate(45deg); }
.nav__menu[aria-expanded='true'] span::before { transform: rotate(-90deg); }
.nav__folha { position: absolute; left: 0; right: 0; top: calc(100% + 0.5rem); padding: 0.5rem; border-radius: 1.5rem; color: var(--nav-tinta); background-color: var(--nav-vidro); -webkit-backdrop-filter: blur(1.25rem) saturate(1.6); backdrop-filter: blur(1.25rem) saturate(1.6); box-shadow: inset 0 0 0 1px var(--nav-fio), inset 0 1px 0 var(--nav-brilho), var(--nav-sombra); pointer-events: auto; transform-origin: 100% 0; opacity: 0; transform: translateY(-0.5rem) scale(.98); transition: opacity 200ms var(--ease-ui), transform 280ms var(--ease-ui), background-color 300ms var(--ease-ui); }
.nav[data-tema='papel'] .nav__folha { --nav-vidro: rgba(248,247,243,.94); }
.nav[data-tema='noite'] .nav__folha, .nav:not([data-tema='papel']) .nav__folha { --nav-vidro: rgba(14,24,56,.92); }
.nav__folha.is-aberta { opacity: 1; transform: none; }
/* a linha de órbita, em pé: os links da folha ficam nela e a brasa marca a seção à vista */
.nav__folha ul { position: relative; display: grid; }
.nav__folha ul::before { content: ''; position: absolute; left: 1.4375rem; top: 1.5rem; bottom: 1.5rem; width: 0; border-left: 1.5px dotted var(--nav-trilho); }
.nav__folha a { position: relative; display: flex; align-items: center; min-height: max(3.25rem, 48px); padding: 0 1rem 0 3rem; border-radius: 1rem; font-size: max(1.0625rem, 16px); font-weight: 600; color: inherit; text-decoration: none; }
.nav__folha a::before { content: ''; position: absolute; left: 1.1875rem; top: 50%; width: 0.5625rem; height: 0.5625rem; margin-top: -0.28125rem; border-radius: 50%; background: var(--nav-vidro); box-shadow: inset 0 0 0 1.5px var(--nav-trilho); }
.nav__folha a[aria-current]::before { background: radial-gradient(circle at 38% 34%, #fff1c9 0 16%, #f8b450 46%, #e07a1c 100%); box-shadow: 0 0 0.5rem 0.03125rem rgba(245,162,58,.6); }
.nav__folha a:active { background: var(--nav-realce); }
@media (hover: hover) { .nav__folha a:hover { background: var(--nav-realce); } }

/* ---------------------------------------------------------------- o modo curto */
.nav[data-modo='curta'] .nav__nome { max-width: 0; margin-left: 0; opacity: 0; }
.nav[data-modo='curta'] .nav__onde { max-width: 14rem; opacity: 1; }
.nav[data-modo='curta'] .nav__logo { padding-right: 0.375rem; }
.nav[data-modo='curta'] .nav__orbita { opacity: 0; overflow: hidden; pointer-events: none; }
.nav[data-modo='curta'] .nav__entrar { max-width: 0; padding-inline: 0; opacity: 0; }

/* ---------------------------------------------------------------- tamanhos */
@media (min-width: 480px) { .w-long { display: inline; } .w-short { display: none; } .nav__entrar { display: inline-flex; } .nav__folha-entrar { display: none; } }
@media (min-width: 768px) {
  .nav { --nav-alt: max(3.25rem, 46px); --nav-item: max(2.5rem, 36px); padding: 0.75rem 1rem 0; }
  .nav__bar { padding: 0 0.375rem 0 0.75rem; }
  .nav__word { height: 1.1875rem; }
  .nav__folha { left: auto; width: 20rem; }
}
@media (min-width: 900px) {
  .nav__orbita { display: flex; }
  .nav__menu, .nav__folha { display: none !important; }
  .is-vitrine .nav__bar { padding-right: 0.75rem; }
  /* na vitrine não há conta à direita: um vazio do tamanho do logo mantém os links no centro */
  .is-vitrine .nav__bar::after { content: ''; flex: none; width: 6.625rem; transition: width 360ms var(--ease-morph); }
  .is-vitrine .nav[data-modo='curta'] .nav__bar::after { width: 0; }
}
/* de 480 a 767 px de largura sobra espaço: o modo curto mostra o nome da seção sem tirar o "Entrar" */
@media (max-width: 899.98px) { .nav[data-modo='curta'] .nav__onde { max-width: 9.5rem; } .nav__onde-in { padding-right: 0.25rem; } }
@media (max-width: 479.98px) { .nav__cta { padding: 0 0.875rem; } }
@media (forced-colors: active) { .nav__bar, .nav__folha { border: 1px solid CanvasText; } .nav__cta { border: 1px solid ButtonText; } }

/* 10-heroi.css · Luvela site v3, versão C · o herói e a descida.
 *
 * A composição (DIRECAO.md 3.5): título, subtítulo e botão primeiro; o planeta nasce embaixo deles. O diâmetro do
 * disco (--pd) tem aqui um valor de partida; o 10-heroi.js mede o texto e escreve o valor certo em px, para a borda
 * de cima do planeta nunca passar por baixo do botão em nenhum tamanho de janela. Os objetos (.hc) são postos pelo
 * script em vagas fixas nas órbitas; quem não cabe sem encostar em nada não aparece.
 * Tamanhos em rem (a escala do palco); px só nos blocos de celular (max-width < 768), em fios e nos pisos de leitura.
 */
.journey { position: relative; height: 180svh; background: var(--noite); }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--noite); isolation: isolate;
  --pd: min(48svh, 86vw, 45rem);            /* o diâmetro do disco do planeta (o script afina) */
  --pw: calc(var(--pd) / .663);             /* a imagem inteira (o disco ocupa 66,3% dela) */
  --pcy: calc(96.5svh - var(--pd) / 2);     /* o centro do disco: a borda acesa fica a 3,5% do pé da janela */
}
@media (max-width: 767.98px) { .stage { --pd: min(50svh, 90vw, 420px); } }
@media (max-width: 767.98px) and (max-height: 700px) { .stage { --pd: min(42svh, 88vw); } }
@media (min-width: 900px) and (max-height: 700px) { .stage { --pd: 42svh; } }
.stage__sky { position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(70% 60% at 50% 78%, #0e1b3c 0%, rgba(11,21,48,0) 70%),
  linear-gradient(#070e25, #0b1530 55%, #0b1530); }
.stage__dust { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; transform-origin: 50% 80%; }
.stage__dust text { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: max(0.75rem, 12px); fill: var(--luar); fill-opacity: .1; }
.stage__orbits { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.stage__orbits--back { z-index: 2; }
.stage__orbits--front { z-index: 6; }
.stage__orbits path { fill: none; stroke: var(--luar); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 0 7.5; }
.stage__orbits--back path { stroke-opacity: .3; }
.stage__orbits--front path { stroke-opacity: .62; }
.is-motion .stage__orbits { animation: orb-in 1200ms var(--ease-ui) 200ms backwards; }
@keyframes orb-in { from { opacity: 0; } }

/* ---------- o planeta: a foto parada e, por cima, o clipe em que ele respira ---------- */
.stage__planet { position: absolute; z-index: 4; left: calc(50% - var(--pw) / 2); top: calc(var(--pcy) - var(--pw) * .494); width: var(--pw); height: var(--pw); will-change: transform; }
.stage__planet img { width: 100%; height: 100%; -webkit-mask: radial-gradient(closest-side, #000 72%, transparent 100%); mask: radial-gradient(closest-side, #000 72%, transparent 100%); }
/* O clipe (960 × 540) é encaixado na foto (700 × 700, disco com 66,3% e centro em 50% / 49,4%). Os números vêm de
   uma busca (tmp: alinhar.cjs) que sobrepôs a borda acesa das duas imagens: no clipe o disco tem 17,4% da largura
   de raio e o centro em 50,02% / 45,92%. A máscara deixa passar o disco inteiro e desfaz a luz em volta até 1,36
   raio: o céu do clipe é mais escuro que o da página e não pode fazer borda. A foto continua embaixo. */
.stage__breath { position: absolute; left: -45.28%; top: 0.2%; width: 190.5%; height: 107.15%; max-width: none; pointer-events: none; opacity: 0; transition: opacity 1200ms var(--ease-ui);
  -webkit-mask: radial-gradient(ellipse 23.66% 42.08% at 50.02% 45.92%, #000 75%, transparent 100%); mask: radial-gradient(ellipse 23.66% 42.08% at 50.02% 45.92%, #000 75%, transparent 100%); }
.stage__breath.is-on { opacity: 1; }
.is-still .stage__breath { display: none; }
.stage__frames { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; display: none; }

/* ---------- os objetos nas órbitas ---------- */
.stage__cards { position: absolute; inset: 0; pointer-events: none; }
.stage__cards--back { z-index: 3; }
.stage__cards--front { z-index: 7; }
/* --dx / --dy: o pequeno deslocamento com o ponteiro (escrito pelo script; alguns pixels) */
.hc { position: absolute; left: 0; top: 0; display: block; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))); transition: transform 900ms var(--ease-ui); }
/* antes de o script pôr cada objeto na sua vaga, nenhum aparece (sem isso piscavam todos no canto) */
.js .stage:not(.is-in) .hc { opacity: 0; }
.hc--msg { width: max(12.25rem, 172px); padding: 0.625rem; border-radius: 1.125rem; background: rgba(255,255,255,.98); box-shadow: var(--sombra-noite); }
.hc--msg .bubble { max-width: none; box-shadow: none; padding: 0.125rem 0.125rem 0; background: none; font-size: max(0.875rem, 14px); }
.hc__meta { display: block; margin: 0.25rem 0.125rem 0; font-family: var(--font-mono); font-size: max(0.75rem, 12px); color: var(--apagado); }
.hc--agenda { width: max(11rem, 156px); box-shadow: var(--sombra-noite); }
.hc--approval { width: max(14.5rem, 212px); padding: 0.875rem; box-shadow: var(--sombra-noite); }
/* os dois de trás (o Pix e a nota) são objetos reais e nítidos, só mais escuros e menores: estão atrás do planeta */
.hc--pix, .hc--nota { scale: .9; }
.hc--pix { display: flex; gap: 0.625rem; align-items: center; padding: 0.625rem 0.875rem 0.625rem 0.625rem; border-radius: 0.875rem; background: linear-gradient(140deg, #1b2b6e, #0b1530 70%); box-shadow: var(--borda-noite), var(--sombra-noite); filter: brightness(.82); }
.hc__pix { display: flex; flex-direction: column; gap: 0.125rem; color: var(--luar); white-space: nowrap; }
.hc__pix b { font-size: max(0.8125rem, 12px); font-weight: 600; color: var(--escuro-apagado); }
.hc__pix span { font-family: var(--font-serif); font-size: max(1.25rem, 14px); line-height: 1; }
.hc--nota { display: flex; flex-direction: column; gap: 0.125rem; width: max(9.375rem, 136px); padding: 0.75rem; border-radius: 0.375rem; background: #faf8f2; font-size: max(0.75rem, 12px); line-height: 1.35; color: var(--texto); box-shadow: var(--sombra-noite); filter: brightness(.58) saturate(.8); }
.hc--nota b { font-family: var(--font-mono); font-weight: 400; color: var(--noite); }
.hc__total { display: flex; justify-content: space-between; margin-top: 0.375rem; padding-top: 0.375rem; border-top: 1px dashed var(--linha); }
.hc__total b { font-family: var(--font-sans); font-weight: 700; }
/* (direção de arte) a nota de trás era um cartão creme escurecido a 58%: virava um retângulo cinza, sujo, o objeto
   mais feio da primeira tela. Agora é papel de luar na penumbra, com a mesma luz do Pix ao lado (82%). */
.hc--nota { background: var(--luar); filter: brightness(.82); }
/* quem aparece em cada tamanho (o script confere de novo): a janela baixa mostra quatro; o tablet em pé, sem a
   agenda; o celular, só a mensagem e o pedido de confirmação */
@media (min-width: 900px) and (max-height: 700px) { .hc--nota { display: none; } }
@media (max-width: 1023.98px) and (min-height: 700.02px), (max-width: 899.98px) { .hc--agenda { display: none; } }
@media (max-width: 767.98px) {
  .hc--pix, .hc--nota { display: none; }
  .hc--msg { width: 158px; padding: 8px; }
  .hc--msg .bubble { font-size: 13px; }
  /* largura fixa: com width:auto o lugar do cartão dependia da ordem do carregamento (defeito da versão B) */
  .hc--approval { width: 178px; padding: 10px; }
  .hc--approval .approval__q { font-size: 13px; }
  .hc--approval .approval__d { display: none; }
  .hc--approval .acts { grid-template-columns: auto auto; justify-content: start; gap: 6px; margin-top: 8px; }
  .hc--approval .mini-btn { min-height: 28px; padding: 0 9px; font-size: 12px; }
}

/* ---------- o texto ---------- */
.hero { position: absolute; inset: 0 0 auto 0; z-index: 8; padding: calc(var(--nav-h) + 2.6svh) var(--gutter) 0; text-align: center; pointer-events: none; }
.hero__copy { display: flex; flex-direction: column; align-items: center; gap: 2.2svh; max-width: 56.25rem; margin: 0 auto; will-change: transform, opacity; }
.hero__copy > * { pointer-events: auto; }
.hero__sub { max-width: 35rem; color: var(--escuro-apagado); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem; margin-top: .6svh; }
@media (min-width: 900px) and (max-height: 700px) {
  .hero { padding-top: calc(var(--nav-h) + 1.2svh); }
  .hero__copy { gap: 1.9svh; }
  .hero__sub { max-width: 38rem; }
}
.is-motion .hero__copy > * { animation: copy-in 700ms var(--ease-ui) backwards; }
.is-motion .hero__copy > :nth-child(2) { animation-delay: 60ms; }
.is-motion .hero__copy > :nth-child(3) { animation-delay: 120ms; }
@keyframes copy-in { from { opacity: 0; translate: 0 0.75rem; } }

/* ---------- o pé do palco: "role para descer" e a pausa do planeta ---------- */
.stage__hud { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.hero__cue { position: absolute; left: var(--gutter); bottom: max(1rem, 2.6svh); display: inline-flex; align-items: center; gap: 0.625rem; font-family: var(--font-mono); font-size: max(0.75rem, 12px); line-height: 1; letter-spacing: .04em; color: var(--escuro-apagado); white-space: nowrap; }
/* no celular o pé do palco é a borda acesa do planeta: a dica sobe para baixo do botão (o script escreve --cue-top);
   no celular pequeno não há lugar para ela */
@media (max-width: 767.98px) {
  .hero__cue { left: 50%; bottom: auto; top: var(--cue-top, 50%); translate: -50% 0; flex-direction: column-reverse; gap: 8px; }
  .hero__cue-line { height: 20px; }
}
@media (max-width: 379.98px), (max-width: 767.98px) and (max-height: 699.98px) { .hero__cue { display: none; } }
.hero__cue-line { position: relative; flex: none; width: 1px; height: 1.75rem; background: rgba(246,237,216,.24); overflow: hidden; }
.hero__cue-line::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 0.625rem; background: var(--luar); opacity: 0; }
/* três gotas (cerca de 5 s) e a dica fica parada: nada pisca para sempre */
.is-motion .hero__cue-line::after { animation: cue-drop 1700ms var(--ease-morph) 1400ms 3 both; }
@keyframes cue-drop { 0% { transform: translateY(-0.625rem); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(1.75rem); opacity: 0; } }
.is-motion .stage__hud { animation: copy-in 900ms var(--ease-ui) 900ms backwards; }
.hero__pause.tiny { position: absolute; right: var(--gutter); bottom: max(1rem, 2.6svh); pointer-events: auto; background: rgba(246,237,216,.07); color: var(--luar); box-shadow: inset 0 0 0 1px rgba(246,237,216,.18); opacity: .78; transition: opacity 200ms var(--ease-ui), background-color 200ms var(--ease-ui); }
.hero__pause.tiny:hover, .hero__pause.tiny:focus-visible { background: rgba(246,237,216,.16); opacity: 1; }
.hero__pause.tiny { min-width: 32px; min-height: 32px; } /* px */
.hero__pause.tiny::before { inset: -8px; } /* px: o alvo de toque tem 48 */

.stage__light { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: 0; }
/* Enquanto o herói está na tela ou descendo (o 10-heroi.js põe .is-live no palco até o fim da descida), o que se mexe
 * a cada quadro fica em camada própria: o navegador move e esmaece as camadas em vez de redesenhar o palco inteiro a
 * cada quadro (medido na descida: o trabalho da placa de vídeo cai para menos da metade). Com a descida terminada, as
 * camadas são soltas. */
.is-motion .stage.is-live .hc { will-change: transform, translate, opacity; }
.is-motion .stage.is-live .stage__dust, .is-motion .stage.is-live .stage__orbits { will-change: transform, opacity; }
.is-motion .stage.is-live .stage__hud, .is-motion .stage.is-live .stage__light { will-change: opacity; }
/* a foto do planeta entra uma vez */
.is-motion .stage__planet img { animation: planet-in 1100ms var(--ease-ui) backwards; }
@keyframes planet-in { from { opacity: 0; transform: translateY(2%) scale(.985); } }

/* ---------- versão parada (menos movimento): nada viaja, nada fica preso ---------- */
.is-still .journey { height: auto; }
.is-still .stage { position: relative; height: 100svh; }
.is-still .journey::after { content: ''; display: block; height: 22svh; background: linear-gradient(var(--noite), #1d2747 30%, #e9dcc2 78%, var(--papel)); }
.is-still .hc { transition: none; }

/* 20-acao.css · Luvela site v3, versão C · "A Luvela em ação".
 *
 * A seção sobe por cima do palco no fim da descida (margem de -100svh); o 20-acao.js escreve --ro (os celulares
 * aparecem), --rise (sobem) e --ho (o título assenta).
 * A tela de cada celular é uma coluna de verdade: barra de status, cabeçalho, conversa e caixa de escrever. A conversa
 * (.thread) ocupa o que sobra, é presa embaixo e corta o que passa por cima: nenhuma mensagem fica atrás da caixa, em
 * nenhum tamanho de janela (era o defeito da janela baixa na versão B).
 * Tamanhos em rem; px só nos blocos de celular (max-width < 768), em fios e nos pisos de leitura.
 */
/* As três medidas da entrada, registradas e sem herança: o 20-acao.js escreve cada uma no próprio elemento que a usa
 * (.acao__stage, os dois .phone e .acao__deck, .acao__side), a cada quadro da descida. Mudar uma delas refaz o estilo
 * só daquele elemento. Escritas em .acao e herdadas, como antes, refaziam o de tudo o que há dentro dos dois celulares
 * a cada quadro. Valor inicial 1: a cena pronta, que é o que vale sem script e no modo parado. */
@property --ro { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --rise { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --ho { syntax: '<number>'; inherits: false; initial-value: 1; }
.acao { position: relative; z-index: 12; overflow-x: clip; }
.is-motion .acao { margin-top: -100svh; }
.acao__in { position: relative; display: grid; gap: 1.75rem; padding-top: calc(var(--nav-h) + 1.75rem); padding-bottom: calc(var(--secao-y) * .5); }
.is-still .acao__in { padding-top: var(--secao-y); }

/* ---------- o lado: título, situações, controles ---------- */
.acao__side { display: flex; flex-direction: column; align-items: center; gap: 1.375rem; text-align: center; opacity: var(--ho); translate: 0 calc((1 - var(--ho)) * 1.625rem); }
.acao__head { margin: 0; }
.picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 45rem; margin: 0 auto; }
.picker .pill { position: relative; overflow: hidden; min-height: 2.75rem; padding: 0 1rem; font-family: inherit; font-size: max(0.875rem, 14px); transition: background-color 200ms var(--ease-ui), color 200ms var(--ease-ui), box-shadow 200ms var(--ease-ui); }
.picker .pill[aria-pressed='true'] { background: var(--noite); color: var(--branco); box-shadow: var(--sombra-1); }
/* o fio de luz no pé da situação que está tocando: quanto da cena já passou (--p, de 0 a 1) */
.picker .pill::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0.1875rem; background: var(--chama); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: 0; transition: transform 500ms var(--ease-ui), opacity 200ms linear; }
.picker .pill[aria-pressed='true']::after { opacity: 1; }
.is-still .picker .pill::after { display: none; }
.pk-short { display: none; }
.acao__ctl { display: flex; align-items: center; gap: 0.5rem; min-height: 2rem; }
.acao__cap { margin: 0 0 0 0.375rem; color: var(--apagado); text-align: left; transition: opacity 180ms linear; }
.acao__cap.is-out { opacity: 0; }
.is-still .acao__ctl .tiny { display: none; }
.is-still .acao__cap { margin-left: 0; }
.tiny--replay span { width: 0.875rem; height: 0.875rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- o palco e os dois celulares ---------- */
.acao__stage { position: relative; --pw: 16.375rem; --ph: 33.75rem; height: calc(var(--ph) + 4rem); opacity: var(--ro); }
.acao__orbits { position: absolute; left: -6%; top: 12%; height: 76%; width: 112%; overflow: visible; pointer-events: none; }
.acao__orbits ellipse { fill: none; stroke: var(--linha-forte); stroke-opacity: .55; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 0 7; vector-effect: non-scaling-stroke; }
.phone { position: relative; flex: none; width: 17.5rem; }
/* os celulares só aparecem já inteiros, bem abaixo da borda, e sobem de dentro da luz (sem fantasma) */
.acao__stage .phone { position: absolute; top: 0; width: var(--pw); margin: 0; translate: 0 calc((1 - var(--rise)) * 62svh); transition: rotate 420ms var(--ease-morph), scale 420ms var(--ease-morph), left 420ms var(--ease-morph), top 420ms var(--ease-morph); }
.is-still .acao__stage .phone { translate: none; }
/* Enquanto a seção sobe (o 20-acao.js põe .is-rising da metade ao fim da descida), os celulares e a coluna do título
 * ficam cada um na sua camada: o navegador só move a camada, em vez de redesenhar os dois celulares inteiros, com
 * as sombras, a cada quadro. Era o que mais pesava na placa de vídeo durante a descida. Sai ao assentar. */
.acao.is-rising .acao__stage .phone, .acao.is-rising .acao__deck { will-change: translate; }
.acao.is-rising .acao__side { will-change: translate, opacity; }
.acao__stage .phone--grafite { left: calc(50% - var(--pw) - 1.125rem); rotate: -3deg; }
.acao__stage .phone--titanio { left: calc(50% + 1.125rem); top: 2.5rem; rotate: 3deg; z-index: 2; }
.phone--grafite { --frame: var(--grafite); }
.phone--titanio { --frame: #b9b6ae; }
.phone__cap { margin-top: 1.125rem; text-align: center; font-family: var(--font-mono); font-size: max(0.75rem, 12px); color: var(--apagado); }
.acao__deck { display: none; }

/* a tela: uma coluna */
.phone__screen { position: relative; display: flex; flex-direction: column; height: var(--ph, 36.25rem); padding: 0 0.75rem 0.75rem; border-radius: 2.5rem; overflow: hidden; overflow: clip; box-shadow: 0 0 0 0.5625rem var(--frame), 0 0 0 0.625rem rgba(0,0,0,.25), var(--sombra-3); }
.phone__screen > * { flex: none; }
.phone__screen--msg { background-color: #eceae4; background-image: radial-gradient(rgba(11,21,48,.07) 1px, transparent 1.3px); background-size: 0.875rem 0.875rem; }
.phone__screen--app { background: var(--fundo-app); }
.phone__bar { display: flex; justify-content: center; height: 1.875rem; padding-top: 0.625rem; }
.phone__bar::before { content: ''; position: absolute; top: 0.5625rem; left: 50%; width: 4.75rem; height: 1.25rem; margin-left: -2.375rem; border-radius: 0.75rem; background: #0a0c12; }
.phone__time { position: absolute; left: 1.625rem; top: 0.625rem; font-size: max(0.75rem, 12px); font-weight: 600; color: var(--noite); }
.chat-head { display: flex; align-items: center; gap: 0.625rem; margin: 0 -0.75rem; padding: 0.625rem 0.875rem; background: var(--branco); border-bottom: 1px solid rgba(11,21,48,.08); }
.chat-head__av { display: grid; place-items: center; flex: none; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--branco); color: var(--noite); box-shadow: var(--fio-claro), var(--sombra-1); }
.chat-head__av .ic { width: 1rem; height: 1rem; }
.chat-head__id { min-width: 0; }
.chat-head b { display: block; font-size: max(0.875rem, 14px); line-height: 1.25; color: var(--noite); }
.chat-head small { display: flex; align-items: center; gap: 0.3125rem; font-size: max(0.75rem, 12px); color: var(--apagado); line-height: 1.3; }
.app-head { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.25rem 0.75rem; }
.app-head b { display: block; font-size: max(0.9375rem, 14px); line-height: 1.2; color: var(--noite); }
.app-head small { display: block; font-size: max(0.75rem, 12px); color: var(--apagado); line-height: 1.2; }
/* A Luvela nos celulares é o componente da presença (.lv, 99-presenca). Enquanto ele não desenha nada (módulo ausente
   ou com erro), o 20-acao.js põe .lv--reserva: um planeta pequeno, parado, para o lugar não ficar vazio. */
.acao .lv { flex: none; }
/* o componente não tem margem: no cabeçalho do chat do cliente a Luvela de 20 px pede um respiro antes do texto */
.acao .chat-head__id small .lv { margin-right: 0.375em; vertical-align: -0.2em; }
.acao .lv.lv--reserva { display: inline-block; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: radial-gradient(circle at 50% 64%, var(--chama) 0 7%, rgba(245,162,58,0) 17%), radial-gradient(circle at 50% 30%, #101c40 0 58%, #f6edd8 96%); box-shadow: 0 0 0.375rem rgba(245,162,58,.35); }
.acao .lv.lv--reserva[data-tamanho='20'] { width: 1.25rem; height: 1.25rem; min-width: 14px; min-height: 14px; } /* px */

/* a conversa: ocupa o que sobra, presa embaixo; o que não cabe sai por cima, atrás de um desbotado curto */
.thread { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; padding: 0; margin: 0 0 1.125rem; overflow: hidden;
  -webkit-mask: linear-gradient(transparent 0, #000 1.5rem); mask: linear-gradient(transparent 0, #000 1.5rem); }
.thread > * { flex: none; }
.thread .bubble { font-size: max(0.8125rem, 12px); }
.thread--app { gap: 0.625rem; }
.thread--app .bubble { max-width: 92%; }
.thread--app .receipt { align-self: flex-start; max-width: 96%; }
.sep { align-self: center; padding: 0.125rem 0.625rem; border-radius: 62.4375rem; background: rgba(11,21,48,.07); font-family: var(--font-mono); font-size: max(0.75rem, 12px); color: var(--apagado); }
/* "digitando": três pontos */
.typing { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.75rem 0.875rem; }
.typing i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--linha-forte); opacity: .5; }
.is-motion .typing i { animation: typing 900ms var(--ease-morph) infinite; }
.is-motion .typing i:nth-child(2) { animation-delay: 150ms; }
.is-motion .typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes typing { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-0.1875rem); } }
/* a cobrança, na conversa da cliente */
.pixc { display: flex; align-items: center; gap: 0.75rem; width: 92%; padding: 0.75rem; border-radius: 1rem; background: linear-gradient(145deg, #14215a 0%, #0b1530 55%, #0a122b 100%); color: var(--luar); box-shadow: inset 0 1px 0 rgba(246,237,216,.14), var(--fio-noite), var(--sombra-1); }
.pixc > span:last-child { min-width: 0; }
.pixc__payee { display: block; font-size: max(0.75rem, 12px); color: var(--escuro-apagado); }
.pixc__amount { display: block; margin: 1px 0 0.3125rem; font-family: var(--font-serif); font-size: max(1.375rem, 14px); line-height: 1.05; white-space: nowrap; }
.pixc__copy { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 1.375rem; padding: 0.125rem 0.5625rem; border-radius: 62.4375rem; background: var(--luar); color: var(--noite); font-size: max(0.75rem, 12px); font-weight: 600; line-height: 1.2; white-space: nowrap; transition: scale 200ms var(--ease-ui), background-color 200ms var(--ease-ui); }
.pixc__copy.is-press { scale: .94; }
.pixc__copy.is-done { background: #d9f0e4; color: var(--verde-texto); }
/* um arquivo mandado na conversa (a nota fiscal) */
.docb { display: flex; align-items: center; gap: 0.5rem; }
.docb .ic { width: 1.125rem; height: 1.125rem; }
.docb b { display: block; font-weight: 600; line-height: 1.25; }
.docb small { display: block; font-size: max(0.75rem, 12px); opacity: .75; line-height: 1.25; }
/* no seu celular: o pedido de confirmação, o recibo, a nota lida, o dia e o Pix recebido */
.ap { display: block; align-self: stretch; padding: 0.75rem; border-radius: 1rem; background: var(--branco); box-shadow: var(--fio-claro), var(--borda-papel-2), var(--sombra-2); }
.ap__q { display: block; font-size: max(0.875rem, 14px); font-weight: 600; line-height: 1.3; color: var(--noite); }
.ap__d { display: block; margin-top: 0.125rem; font-size: max(0.75rem, 12px); line-height: 1.4; color: var(--apagado); }
.ap .acts { margin-top: 0.625rem; }
.ap .mini-btn { position: relative; min-height: 2rem; padding: 0 0.5rem; transition: scale 160ms var(--ease-ui); }
.ap .mini-btn.is-press { scale: .93; }
/* o toque: um ponto de luz no botão */
.ap .mini-btn.is-press::after { content: ''; position: absolute; left: 50%; top: 50%; width: 1.75rem; height: 1.75rem; margin: -0.875rem 0 0 -0.875rem; border-radius: 50%; background: rgba(246,237,216,.55); }
.is-motion .ap .mini-btn.is-press::after { animation: tap 420ms var(--ease-ui) both; }
@keyframes tap { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.is-still .ap .mini-btn.is-press::after { display: none; }
.notac { display: flex; flex-direction: column; gap: 0.125rem; align-self: flex-start; width: 86%; padding: 0.625rem 0.75rem; border-radius: 0.375rem; background: #faf8f2; font-size: max(0.75rem, 12px); line-height: 1.35; color: var(--texto); box-shadow: var(--fio-claro), var(--sombra-1); }
.notac b { font-family: var(--font-mono); font-weight: 400; color: var(--noite); }
.notac__row { display: flex; justify-content: space-between; gap: 0.5rem; }
.notac__row + .notac__row { margin-top: 0; }
.notac__total { margin-top: 0.3125rem; padding-top: 0.3125rem; border-top: 1px dashed var(--linha); }
.notac__total b { font-family: var(--font-sans); font-weight: 700; }
.thread .agenda { align-self: flex-start; width: 92%; padding: 0.625rem 0.75rem; }
.thread .agenda__day { font-size: max(1.0625rem, 14px); }
.thread .agenda__day b { font-size: max(0.75rem, 12px); }
.thread .agenda__row { align-items: baseline; padding: 0.1875rem 0; }
.thread .agenda__row i { width: 1.875rem; flex: none; }
.paid { display: block; position: relative; padding: 0.875rem 1rem 0.8125rem; border-radius: 1.25rem; background: var(--branco); box-shadow: var(--fio-claro), var(--borda-papel-2), var(--sombra-2); }
.paid::before { content: ''; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 0.1875rem; border-radius: 0 0.1875rem 0.1875rem 0; background: var(--verde-texto); }
.paid__label { display: flex; align-items: center; gap: 0.375rem; font-size: max(0.8125rem, 12px); font-weight: 600; color: var(--verde-texto); }
.paid__label svg { width: 0.9375rem; height: 0.9375rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.paid__amount { display: block; margin-top: 0.3125rem; font-family: var(--font-serif); font-size: max(2.125rem, 14px); line-height: 1; color: var(--noite); letter-spacing: -.01em; white-space: nowrap; }
.paid__who { display: block; margin-top: 0.3125rem; font-size: max(0.8125rem, 12px); color: var(--apagado); }

/* a caixa de escrever: faz parte da coluna (nunca por cima da conversa) */
.msg-bar, .app-input { display: flex; align-items: center; gap: 0.5rem; height: 2.75rem; border-radius: 62.4375rem; background: var(--branco); box-shadow: var(--fio-claro), var(--sombra-1); font-size: max(0.8125rem, 12px); color: var(--apagado); white-space: nowrap; }
.msg-bar { padding: 0 0.75rem 0 0.875rem; }
.app-input { padding: 0 0.4375rem 0 1rem; }
.msg-bar span, .app-input span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.msg-bar .ic { width: 1.125rem; height: 1.125rem; }
.app-input__moon { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: conic-gradient(var(--linha-forte) 0 38%, var(--canvas) 0); }
.app-input__mic { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--noite); color: var(--branco); }
.app-input__mic .ic { width: 0.9375rem; height: 0.9375rem; }

/* ---------- computador: duas colunas ---------- */
@media (min-width: 1024px) {
  .acao__in { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; min-height: 100svh; gap: 2.5rem; }
  .acao__side { align-items: flex-start; text-align: left; }
  .picker { flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 18.75rem; margin: 0.375rem 0 0; }
  .picker .pill { width: 100%; min-height: 2.75rem; padding: 0 1.125rem; font-size: max(0.9375rem, 14px); justify-content: flex-start; }
  .acao__stage { --ph: min(35rem, calc(100svh - 12.25rem)); --pw: calc(var(--ph) * .48); height: calc(var(--ph) + 5.75rem); }
  .acao__stage .phone--grafite { left: calc(50% - var(--pw) - 0.375rem); }
  .acao__stage .phone--titanio { left: calc(50% + 1.875rem); top: 2.875rem; }
}
/* a janela baixa: tudo mais junto, para o título, as cinco situações e os controles caberem abaixo do cabeçalho */
@media (min-width: 1024px) and (max-height: 700px) {
  .acao__in { padding-top: calc(var(--nav-h) + 0.75rem); padding-bottom: 1.5rem; }
  .acao__side { gap: 1rem; }
  .picker { gap: 0.375rem; margin-top: 0; }
  .picker .pill { min-height: 2.5rem; }
  .acao__stage { --ph: min(35rem, calc(100svh - var(--nav-h) - 6.5rem)); height: calc(var(--ph) + 4.75rem); }
  .acao__stage .phone--titanio { top: 1.75rem; }
  .phone__cap { margin-top: 0.875rem; }
}
/* ---------- celular: o baralho (um aparelho na frente, o outro atrás) ---------- */
@media (max-width: 767.98px) {
  .acao__in { gap: 14px; padding-top: calc(var(--nav-h) + 12px); }
  .acao__side { gap: 14px; }
  .pk-long { display: none; }
  .pk-short { display: inline; }
  .picker { max-width: 360px; }
  .picker .pill { min-height: 44px; }
  /* a pausa e o "ver de novo" ficam na linha do seletor de aparelho, à direita (a legenda não cabe aqui) */
  .acao__side { position: relative; z-index: 5; }
  .acao__ctl { align-self: flex-end; height: 44px; margin: 0 6px -58px 0; gap: 14px; }
  .acao__cap { display: none; }
  .acao__stage { --pw: 252px; --ph: clamp(400px, calc(100svh - 372px), 520px); height: calc(var(--ph) + 80px); }
  .acao__orbits { top: 22%; height: 56%; }
  .acao__stage .phone__cap { display: none; }
  /* o seletor sobe junto com os aparelhos (sozinho no papel vazio, no meio da descida, parecia um defeito) */
  .acao__deck { position: absolute; left: 0; top: 0; z-index: 4; display: flex; justify-content: flex-start; gap: 8px; translate: 0 calc((1 - var(--rise)) * 62svh); }
  .is-still .acao__deck { translate: none; }
  .acao__deck .pill { min-height: 44px; padding: 0 18px; font-family: inherit; }
  .acao__deck .pill[aria-pressed='true'] { background: var(--noite); color: var(--branco); }
  .acao__stage[data-front='cliente'] .phone--grafite, .acao__stage[data-front='dono'] .phone--titanio { z-index: 3; rotate: -2deg; scale: 1; left: calc(50% - var(--pw) / 2 - 12px); top: 64px; }
  .acao__stage[data-front='cliente'] .phone--titanio, .acao__stage[data-front='dono'] .phone--grafite { z-index: 1; rotate: 3deg; scale: .94; left: calc(50% - var(--pw) / 2 + 26px); top: 48px; }
  .thread { margin-bottom: 17px; }
}
/* (direção de arte) o subtítulo do chat da cliente numa linha só: "Luvela · IA" (o texto longo quebrava na janela
   baixa e, no celular pequeno, deixava o "(IA)" sozinho na segunda linha) */
.chat-head small { white-space: nowrap; }

/* 30-orbita.css · Luvela site v3, versão C · Na órbita.
   Versão C: o título, o sistema e a legenda cabem numa tela em todos os tamanhos. Os anéis ficam mais deitados (como
   um sistema visto quase de lado), a caixa da órbita tem a altura exata dos anéis e a faixa por onde o planeta que viaja
   passa fica dentro da caixa, em cima (as pílulas ainda estão dentro do planeta quando ele passa). */
/* um disco do planeta, na página (a órbita; o pôr do rodapé usa outro recorte) */
.disc, .orb__planet { border-radius: 50%; overflow: hidden; }

.orbita .secao { padding-top: calc(var(--secao-y) * .55); padding-bottom: calc(var(--secao-y) * .3); }
.orbita__head { gap: 0.875rem; }
.orbita__cap { max-width: 34rem; margin: 1rem auto 0; color: var(--apagado); text-align: center; }

.orb { position: relative; height: 22.5rem; margin-top: 1.5rem; --od: 12.5rem; }
.orb > .band { position: absolute; left: 0; right: 0; top: 0; height: 2.5rem; pointer-events: none; }
.orb__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.orb__rings path { fill: none; stroke: var(--tracejado); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 0 7.5; }
.orb__rings--back { z-index: 0; }
.orb__rings--front { z-index: 3; }
.orb__rings--front path { stroke: var(--linha-forte); stroke-opacity: .55; }
.orb__planet { position: absolute; z-index: 2; left: calc(50% - var(--od) / 2); top: calc(50% - var(--od) / 2); width: var(--od); height: var(--od); box-shadow: 0 1.875rem 3.125rem -1.5rem rgba(11,21,48,.55); }
.orb__planet picture { position: absolute; inset: 0; }
.orb__planet img { position: absolute; width: 150.8%; height: 150.8%; max-width: none; left: -25.4%; top: -24.5%; }
.orb__pills { position: absolute; inset: 0; z-index: auto; }
.orb__pills li { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); will-change: transform, opacity; }
.pill--ic .ic { width: 1rem; height: 1rem; color: var(--noite); }
.orb__toggle { position: absolute; right: 2%; bottom: 0.25rem; z-index: 8; }

/* as pílulas do site real (ícone num azulejo) */
.pill--orb { min-height: 2.5rem; padding: 0 1rem 0 0.375rem; gap: 0.625rem; font-size: max(0.875rem, 14px); background: var(--branco); color: var(--noite); box-shadow: var(--fio-claro), var(--borda-papel-2), var(--sombra-1); white-space: nowrap; }
.pill__tile { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 0.5625rem; background: var(--papel); color: var(--noite); }
.pill__tile .ic { width: 0.9375rem; height: 0.9375rem; }

/* tela baixa: o título numa linha só (as duas frases, em dois tons) */
@media (min-width: 900px) and (max-height: 700px) {
  .orbita .tt > span { display: inline; }
  .orbita__head { gap: 0.625rem; }
  .orb { margin-top: 1rem; }
  .orbita__cap { margin-top: 0.5rem; }
}

/* celular: um anel só com oito pílulas (45° entre elas; as outras três ficam para leitores de tela); a caixa acompanha a
   altura da tela */
@media (max-width: 767.98px) {
  .orbita .secao { padding-bottom: 40px; }
  .orb { height: clamp(220px, calc(100svh - 470px), 300px); margin-top: 20px; --od: clamp(92px, calc(100svh - 690px), 124px); }
  .orb > .band { height: 28px; }
  .orbita__cap { margin-top: 14px; }
  .orb__pills li:not([data-fa]) { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pill--orb { min-height: 36px; padding: 0 12px 0 5px; font-size: 13px; gap: 7px; }
  .pill__tile { width: 26px; height: 26px; border-radius: 8px; }
  .orb__toggle { right: 0; }
}

/* 40-tudo.css · Luvela site v3, versão C (split from version B's style.css; B's order kept inside the module) */
/* ======================================================================================== */
/* Tudo o que ela faz: a constelação                                                        */
/* ======================================================================================== */
.tudo .secao { padding-top: calc(var(--secao-y) * .45); }
.cst { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 2rem 3.5rem; margin-top: 2.25rem; align-items: center; }
.cst__objs { position: relative; height: 27.5rem; border-radius: 2.5rem; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
  background: radial-gradient(closest-side, rgba(232,231,225,.9) 0, rgba(232,231,225,.5) 55%, rgba(232,231,225,0) 100%); }
.cst__objs:active { cursor: grabbing; }
.cst__obj { position: absolute; inset: 0; display: grid; place-items: center; visibility: hidden; }
.cst__obj.is-cur, .cst__obj.is-leaving { visibility: visible; }
.cst__obj > * { scale: 1.32; }
.cst__side { display: flex; flex-direction: column; gap: 1.25rem; }
.cst__texts { position: relative; min-height: 14.75rem; }
.cst__text { position: absolute; inset: 0 0 auto 0; visibility: hidden; }
.cst__text.is-cur, .cst__text.is-leaving { visibility: visible; }
.cst__n { color: var(--apagado); letter-spacing: .06em; }
.cst__n span { opacity: .6; }
.cst__text h3 { margin-top: 0.625rem; font-family: var(--font-serif); font-weight: 400; font-size: max(2.5rem, 14px); line-height: 1.08; letter-spacing: -.01em; color: var(--noite); }
.cst__text p:not(.cst__n) { margin-top: 0.75rem; font-size: max(1.0625rem, 14px); line-height: 1.55; color: var(--apagado); }
.cst__switch { display: flex; gap: 0.375rem; margin-top: 1rem; }
.cst__switch .pill[aria-pressed='true'] { background: var(--noite); color: var(--branco); }
/* o mapa: a figura de seis estrelas */
.sky { position: relative; width: 18.75rem; max-width: 100%; aspect-ratio: 300 / 200; margin-top: 0.375rem; }
.sky__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sky__line, .sky__inner, .sky__prog { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sky__line { stroke: var(--linha-forte); stroke-width: 1.4; stroke-dasharray: 0 6; }
.sky__inner { stroke: var(--linha-forte); stroke-opacity: .45; stroke-width: 1.2; stroke-dasharray: 0 6; }
.sky__prog { stroke: var(--noite); stroke-width: 1.4; stroke-opacity: .7; }
.sky__comet { position: absolute; left: -0.3125rem; top: -0.3125rem; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--noite); box-shadow: 0 0 0 0.25rem rgba(11,21,48,.12); opacity: 0; pointer-events: none; }
.star { position: absolute; width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; }
.star__dot { position: absolute; left: 50%; top: 50%; width: 0.4375rem; height: 0.4375rem; margin: -0.21875rem 0 0 -0.21875rem; border-radius: 50%; background: var(--linha-forte); transition: transform 300ms var(--ease-pop), background-color 300ms var(--ease-ui), box-shadow 300ms var(--ease-ui); }
.star.is-on .star__dot { background: var(--noite); transform: scale(1.6); box-shadow: 0 0 0 0.1875rem var(--papel), 0 0 0 0.28125rem rgba(11,21,48,.35); }
.star:hover .star__dot { background: var(--noite); }
.star__nm { position: absolute; left: 50%; top: 2.125rem; translate: -50% 0; font-family: var(--font-mono); font-size: max(0.75rem, 12px); line-height: 1; white-space: nowrap; color: var(--apagado); transition: color 200ms var(--ease-ui); }
.star[data-go='0'] .star__nm, .star[data-go='5'] .star__nm { top: auto; bottom: 2.125rem; }
.star.is-on .star__nm { color: var(--noite); font-weight: 600; }
.star:focus-visible { outline-offset: -0.25rem; border-radius: 50%; }
.cst__ctl { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.5rem; }
.cst__ctl .tiny--pause { margin-left: 0.5rem; }
/* os objetos (os mesmos do site real) */
.o-msgs { display: block; width: 14.75rem; }
.o-msgs .bubble { max-width: 100%; }
.o-msgs__q { rotate: -2deg; box-shadow: var(--fio-claro), var(--sombra-1); }
.bubble--eu { margin-left: auto; background: var(--anil-noite); color: var(--luar); border-bottom-right-radius: 0.25rem; }
.bubble__tag { display: block; margin-bottom: 0.1875rem; font-family: var(--font-mono); font-size: max(0.75rem, 12px); line-height: 1.3; color: var(--escuro-apagado); }
.o-msgs__a { position: relative; margin-top: -0.375rem; rotate: 1.5deg; box-shadow: var(--sombra-1); }
.o-agenda { position: relative; display: block; width: 9.375rem; height: 10.75rem; rotate: -3deg; }
.o-agenda::before, .o-agenda::after { content: ''; position: absolute; left: 50%; height: 100%; border-radius: 0.75rem; }
.o-agenda::before { top: 0.375rem; width: 96%; margin-left: -48%; background: #efede6; box-shadow: var(--fio-claro), var(--sombra-1); }
.o-agenda::after { top: 0.1875rem; width: 98%; margin-left: -49%; background: #f7f6f2; box-shadow: var(--fio-claro); }
.o-agenda__leaf { position: relative; z-index: 1; display: block; height: 100%; border-radius: 0.75rem; background: var(--branco); overflow: hidden; box-shadow: var(--fio-claro); }
.o-agenda__band { position: relative; display: flex; align-items: center; justify-content: center; height: 1.75rem; background: var(--noite); color: var(--luar); font-family: var(--font-mono); font-size: max(0.75rem, 12px); letter-spacing: .08em; text-transform: uppercase; }
.o-agenda__band::before, .o-agenda__band::after { content: ''; position: absolute; top: 0.6875rem; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--papel); }
.o-agenda__band::before { left: 0.875rem; }
.o-agenda__band::after { right: 0.875rem; }
.o-agenda__day { display: block; padding: 0.625rem 0 0.375rem; font-family: var(--font-serif); font-size: max(2.5rem, 14px); line-height: 1; color: var(--noite); text-align: center; }
.o-agenda__rows { display: grid; gap: 0.125rem; padding: 0 0.5rem; }
.o-agenda__row { display: block; padding: 0.1875rem 0.5rem; border-radius: 62.4375rem; font-size: max(0.75rem, 12px); line-height: 1.35; color: var(--noite); white-space: nowrap; }
.o-agenda__row b { font-weight: 600; }
.o-agenda__row.is-marked { background: var(--papel); }
.o-agenda__row.is-free { color: var(--apagado); }
.o-pix { position: relative; display: block; width: 13.75rem; height: 8.625rem; padding: 0.875rem 1rem; border-radius: 1rem; background: linear-gradient(145deg, #14215a 0%, #0b1530 55%, #0a122b 100%); color: var(--luar); box-shadow: inset 0 1px 0 rgba(246,237,216,.14), var(--fio-noite), var(--borda-noite), var(--sombra-2); rotate: 2deg; }
.o-pix__top { display: flex; align-items: baseline; gap: 0.5rem; }
.o-pix__top b { font-size: max(0.8125rem, 12px); font-weight: 600; }
.o-pix__top span { font-family: var(--font-mono); font-size: max(0.75rem, 12px); color: var(--escuro-apagado); }
.o-pix__foot { position: absolute; left: 1rem; right: 0.875rem; bottom: 0.875rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; }
.o-pix__payee { display: block; margin-bottom: 0.25rem; font-size: max(0.75rem, 12px); color: var(--escuro-apagado); }
.o-pix__amount { display: block; font-family: var(--font-serif); font-size: max(1.625rem, 14px); line-height: 1; white-space: nowrap; }
.o-nota { display: block; rotate: 3deg; perspective: 50rem; }
.o-nota__flip { position: relative; display: block; transition: transform 500ms var(--ease-ui); transform-style: preserve-3d; }
.cst__obj--nota[data-nota='lida'] .o-nota__flip { transform: rotateY(180deg); }
.o-nota__paper { display: block; width: 8.25rem; min-height: 11.25rem; padding: 0.875rem 0.625rem 1.375rem; background: linear-gradient(180deg, #fff 0%, #fff 40%, #faf8f2 100%); color: var(--texto); font-family: var(--font-mono); font-size: max(0.75rem, 12px); line-height: 1.4; backface-visibility: hidden;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 0.5rem 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 0.5rem 100%; }
.o-nota { filter: drop-shadow(0 1px 1px rgba(11,21,48,.1)) drop-shadow(0 0.375rem 0.625rem rgba(11,21,48,.14)); }
.o-nota__paper > span { display: block; }
.o-nota__rule { height: 0; margin: 0.4375rem 0; border-top: 1px dashed var(--linha-forte); }
.o-nota__total { display: flex !important; justify-content: space-between; gap: 0.25rem; }
.o-nota__bars { height: 1.375rem; margin-top: 0.625rem; background: repeating-linear-gradient(90deg, var(--texto) 0 0.125rem, #0000 0.125rem 0.1875rem, var(--texto) 0.1875rem 0.25rem, #0000 0.25rem 0.4375rem, var(--texto) 0.4375rem 0.5rem, #0000 0.5rem 0.625rem, var(--texto) 0.625rem 0.8125rem, #0000 0.8125rem 0.9375rem); }
.o-nota__read { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; border-radius: 0.75rem; background: var(--branco); box-shadow: var(--fio-claro); transform: rotateY(180deg); backface-visibility: hidden; text-align: left; }
.o-nota__k { display: block; font-family: var(--font-mono); font-size: max(0.75rem, 12px); line-height: 1.3; color: var(--apagado); }
.o-nota__v { display: block; font-size: max(0.875rem, 14px); font-weight: 600; line-height: 1.25; color: var(--noite); }
.o-nota__ok { display: inline-flex; align-items: center; gap: 0.3125rem; margin-top: auto; font-size: max(0.8125rem, 12px); font-weight: 600; color: var(--verde-texto); }
.o-nota__ok svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tile-ic { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 0.625rem; background: var(--anil-noite); color: var(--luar); box-shadow: inset 0 1px 0 rgba(246,237,216,.14); }
.tile-ic .ic { width: 1rem; height: 1rem; }
.o-notice { display: block; width: 14.5rem; padding: 0.875rem; text-align: left; }
.o-notice__head { display: flex; align-items: flex-start; gap: 0.625rem; }
.o-notice__head b { display: block; font-size: max(0.875rem, 14px); line-height: 1.3; color: var(--noite); }
.o-notice__head span span { display: block; margin-top: 0.1875rem; font-size: max(0.8125rem, 12px); line-height: 1.4; color: var(--apagado); }
.o-vitrine { position: relative; display: block; width: 16.25rem; height: 12.5rem; }
.o-vitrine__profile { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 0.625rem; width: 14.75rem; padding: 0.75rem; border-radius: 0.875rem; rotate: -2deg; text-align: left; }
.o-vitrine__profile b { display: block; font-size: max(0.875rem, 14px); line-height: 1.2; color: var(--noite); }
.o-vitrine__profile span span { display: block; margin-top: 0.125rem; font-size: max(0.75rem, 12px); line-height: 1.2; color: var(--apagado); white-space: nowrap; }
.o-vitrine__post { position: absolute; right: 0; bottom: 0; display: block; width: 7rem; padding: 0.5rem; border-radius: 0.875rem; rotate: 3deg; }
.o-vitrine__pic { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 0.625rem; background: var(--papel); }
.o-vitrine__pic svg { width: 3.5rem; fill: var(--noite); }
.o-vitrine__pic .ic { position: absolute; right: 0.375rem; top: 0.375rem; width: 0.875rem; height: 0.875rem; }
.o-vitrine__l1, .o-vitrine__l2 { display: block; height: 0.25rem; margin-top: 0.5rem; width: 82%; border-radius: 62.4375rem; background: var(--linha-forte); }
.o-vitrine__l2 { width: 54%; margin-top: 0.375rem; background: var(--linha); }
@media (max-width: 1023.98px) {
  .cst { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .cst__objs { height: 20rem; }
  .cst__obj > * { scale: 1.12; }
  .cst__side { align-items: center; text-align: center; }
  .cst__texts { width: 100%; max-width: 28.75rem; min-height: 12.25rem; }
  .cst__switch { justify-content: center; }
  .cst__text h3 { font-size: max(1.875rem, 14px); }
  .cst__text p:not(.cst__n) { font-size: max(1rem, 14px); }
}
@media (max-width: 767.98px) { .cst__objs { height: 290px; } .cst__obj > * { scale: 1.04; } .cst__texts { min-height: 210px; } .sky { width: min(300px, 100%); } }
/* menos movimento: o que era tempo vira o estado pronto */
.is-still .cst__objs { cursor: default; }
@media (min-width: 1024px) { .cst__obj > * { scale: 1.5; } }
/* ######################################################################################## */
/* TERCEIRA RODADA (revisão da direção de arte, 13/11/2026)                                 */
/* ######################################################################################## */
/* Tudo o que ela faz: a constelação vira o berço do palco. Um crescente largo de seis estrelas passa por baixo do
   objeto, de ponta a ponta; o objeto repousa no oco. A faixa do céu tem 3:1 e escala junto com o palco (cqw). */
.cst { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 2rem 4rem; margin-top: 1.75rem; }
.cst__stage { container-type: inline-size; --objh: 24.375rem; }
.cst__frame { position: relative; height: calc(var(--objh) + 19.33cqw + 2.125rem); }
.cst__objs { position: absolute; left: 0; right: 0; top: 0; height: var(--objh); background: none; border-radius: 0; }
.sky { position: absolute; z-index: 2; left: 0; right: 0; bottom: 2.125rem; width: 100%; max-width: none; aspect-ratio: 3 / 1; margin: 0; }
.sky__line { stroke-width: 1.5; stroke-dasharray: 0 7; }
.sky__inner { stroke-opacity: .38; stroke-dasharray: 0 7; }
.sky__prog { stroke-width: 1.6; stroke-opacity: .8; }
.star__dot { width: 0.5rem; height: 0.5rem; margin: -0.25rem 0 0 -0.25rem; }
.star__nm { top: 1.875rem; }
.star[data-go='0'] .star__nm, .star[data-go='5'] .star__nm { top: auto; bottom: 1.875rem; }
.star[data-go='0'] .star__nm { left: 0.625rem; translate: 0 0; }
.star[data-go='5'] .star__nm { left: auto; right: 0.625rem; translate: 0 0; }
.cst__side { justify-content: center; gap: 1.75rem; }
.cst__texts { min-height: 13.375rem; }
.cst__ctl { margin-top: 0; }
@media (max-width: 1023.98px) {
  .cst { gap: 0.75rem; margin-top: 1.25rem; }
  .cst__stage { --objh: 20rem; }
  .cst__side { gap: 1.125rem; }
  .cst__texts { min-height: 11.75rem; }
  .cst__ctl { justify-content: center; }
}
@media (max-width: 767.98px) {
  .cst__stage { --objh: 262px; }
  .cst__frame { height: calc(var(--objh) + 19.33cqw + 30px); }
  .sky { bottom: 30px; }
  .star__nm { top: 26px; }
  .star[data-go='0'] .star__nm, .star[data-go='5'] .star__nm { bottom: 26px; }
  .cst__texts { min-height: 196px; }
}
/* os nomes das estrelas ficam do lado de fora do crescente, longe das linhas */
.cst { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
.star .star__nm { top: 50%; bottom: auto; left: auto; right: auto; translate: 0 -50%; }
.star[data-go='0'] .star__nm { top: auto; bottom: 1.875rem; left: 0.625rem; translate: 0 0; }
.star[data-go='5'] .star__nm { top: auto; bottom: 1.875rem; right: 0.625rem; translate: 0 0; }
.star[data-go='1'] .star__nm { right: 2.125rem; }
.star[data-go='4'] .star__nm { left: 2.125rem; }
.star[data-go='2'] .star__nm, .star[data-go='3'] .star__nm { top: 2rem; left: 50%; translate: -50% 0; }
/* o objeto repousa no oco do crescente: alinhado pelo pé, crescendo para cima */
.cst__obj { place-items: end center; padding-bottom: 1.5cqw; }
.cst__obj > * { transform-origin: 50% 100%; }
.cst__stage { --objh: 21.875rem; }
@media (max-width: 1023.98px) { .cst__stage { --objh: 18.75rem; } }
@media (max-width: 767.98px) { .cst__stage { --objh: 250px; } .star[data-go='2'] .star__nm, .star[data-go='3'] .star__nm { top: 26px; } }
@media (max-width: 1023.98px) {
  .cst { grid-template-columns: minmax(0, 1fr); }
  .cst__stage { width: 100%; max-width: 40rem; margin: 0 auto; }
}
@media (max-width: 767.98px) {
  .star[data-go='1'] .star__nm, .star[data-go='4'] .star__nm { top: 26px; left: 50%; right: auto; translate: -50% 0; }
}
@media (max-width: 767.98px) { .cst__obj > * { scale: .9; } .cst__stage { --objh: 230px; } .cst__texts { min-height: 172px; } }
/* ######################################################################################## */
/* VERSÃO C                                                                                 */
/* ######################################################################################## */
/* o objeto que sai pela linha da constelação não alarga a página (no celular ele passa da borda) */
.tudo { overflow-x: clip; }
/* no computador o título fica numa linha só, em dois tons: sobra altura para o palco */
@media (min-width: 1024px) { .tudo .tt > span { display: inline; } }
/* o cometa é a brasa âmbar do planeta: um ponto quente com um halo, por cima das linhas */
.sky__comet { z-index: 1; left: -0.375rem; top: -0.375rem; width: 0.75rem; height: 0.75rem; background: radial-gradient(circle, #fff1d6 0 16%, var(--chama) 42%, var(--urucum) 74%);
  box-shadow: 0 0 0.375rem 0.125rem rgba(245,162,58,.5), 0 0 1.125rem 0.375rem rgba(217,72,28,.18); will-change: transform, opacity; }
.sky__stars { position: absolute; inset: 0; z-index: 2; }
/* a estrela da tarefa em curso guarda um pouco da brasa */
.star.is-on .star__dot { box-shadow: 0 0 0 0.1875rem var(--papel), 0 0 0 0.28125rem rgba(11,21,48,.35), 0 0 0.75rem 0.25rem rgba(245,162,58,.28); }
/* tela baixa (larga e baixa): duas colunas sempre, palco mais baixo, objetos um pouco menores */
@media (min-width: 900px) and (max-height: 700px) {
  .tudo .tt > span { display: inline; }
  .cst { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: 1rem 3.5rem; margin-top: 1.25rem; }
  .cst__stage { width: auto; max-width: none; margin: 0; --objh: 15.5rem; }
  .cst__obj > * { scale: 1.2; }
  .cst__side { align-items: stretch; text-align: left; gap: 1.25rem; }
  .cst__texts { max-width: none; min-height: 12rem; }
  .cst__switch, .cst__ctl { justify-content: flex-start; }
}
/* celular pequeno (360 × 640): o palco e o texto são mais altos que a tela; um respiro maior entre o título e o palco
   faz o título sair por cima antes de o palco ficar no meio, em vez de ficar meio escondido sob o cabeçalho */
@media (max-width: 379.98px), (max-width: 767.98px) and (max-height: 699.98px) { .tudo .cst { margin-top: 88px; } }
/* tela baixa: a nota fiscal (o objeto mais alto, ainda mais quando vira) não sobe até o título */
@media (min-width: 900px) and (max-height: 700px) { .cst__stage { --objh: 17.5rem; } .cst__obj > * { scale: 1.25; } .cst__obj--nota > * { scale: 1.08; } }

/* 50-cerebro.css · Luvela site v3, versão C (split from version B's style.css; B's order kept inside the module) */
/* ======================================================================================== */
/* Cérebro                                                                                  */
/* ======================================================================================== */
.cer { position: relative; z-index: 1; }
.cer__grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 22.5rem) minmax(0, 1fr) minmax(0, 24.375rem); grid-template-areas: 'head moon card'; align-items: center; }
.cer__head { grid-area: head; }
.cer__moonwrap { grid-area: moon; display: flex; flex-direction: column; align-items: center; }
.cer__cardwrap { grid-area: card; }
.band--top { position: absolute; left: 0; right: 0; top: 0; height: var(--secao-y); }
.band--flow { display: none; height: 2.5rem; width: 100%; }
.moon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.875rem; will-change: transform; }
.moon__svg { width: 21.25rem; height: 21.25rem; overflow: visible; }
.moon__cap { color: var(--apagado); }
.moon__n { color: var(--noite); }
.moon .d { transition: fill 420ms var(--ease-pop), stroke-opacity 300ms linear, r 420ms var(--ease-pop); }
.cer__card { padding: 1rem 1.125rem 0.5rem; }
.cer__cardhead { display: flex; align-items: center; gap: 0.625rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(207,206,198,.6); }
.cer__cardhead p { font-size: max(0.9375rem, 14px); line-height: 1.2; color: var(--noite); }
.cer__cardhead small { display: block; font-size: max(0.75rem, 12px); color: var(--apagado); font-weight: 400; }
.icon-tile { display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 0.625rem; background: var(--anil); color: var(--luar); }
.icon-tile .ic { width: 1.125rem; height: 1.125rem; }
.facts { display: block; }
.fact { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 0.125rem 0.75rem; align-items: baseline; min-height: 2.9375rem; padding: 0.6875rem 0.125rem; border-bottom: 1px dashed var(--tracejado); font-size: max(0.9375rem, 14px); line-height: 1.45; color: var(--texto); }
.fact__t, .fact__s { transition: opacity 300ms var(--ease-ui), transform 300ms var(--ease-ui); }
.fact__s { color: var(--apagado); }
.fact.is-off .fact__t, .fact.is-off .fact__s { opacity: 0; transform: translateY(0.375rem); }
.fact .dg { font-family: var(--font-mono); font-size: max(0.75rem, 12px); color: var(--apagado); }
.fact--gap { border-bottom: 0; align-items: center; }
.fact--gap .fact__t { color: var(--apagado); }
.fact--gap.is-told .fact__t { color: var(--texto); }
.fact--gap .btn { justify-self: end; }
.fact--gap.is-off { visibility: hidden; }
.spark { position: fixed; z-index: 29; width: 0.4375rem; height: 0.4375rem; margin: -0.21875rem 0 0 -0.21875rem; border-radius: 50%; background: var(--anil); pointer-events: none; }
@media (max-width: 1099.98px) {
  .cer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'head head' 'moon card'; gap: 0 2rem; }
  .band--top { display: none; }
  .band--flow { display: block; }
  .cer__cardwrap { padding-top: 2.5rem; }
  .moon__svg { width: 17.5rem; height: 17.5rem; }
}
@media (max-width: 767.98px) {
  .cer__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'card' 'moon'; }
  .cer__cardwrap { padding-top: 32px; }
  .moon__svg { width: 240px; height: 240px; }
  .fact { grid-template-columns: 1fr; }
  .fact--gap { grid-template-columns: 1fr auto; }
}
/* Cérebro: o que ela ainda não sabe é uma linha fraca de 0s e 1s, não uma linha vazia. */
.fact__ghost { position: absolute; left: 0.125rem; top: 50%; translate: 0 -50%; color: var(--linha-forte); opacity: 0; letter-spacing: .06em; white-space: nowrap; pointer-events: none; transition: opacity 300ms var(--ease-ui); }
.fact.is-off .fact__ghost { opacity: .55; }
.fact--gap.is-off { visibility: visible; }
.fact--gap.is-off > :not(.fact__ghost) { visibility: hidden; }
.fact--gap:not(.is-off) .fact__ghost { opacity: 0; }
/* "Me contar" pode receber o foco antes da quinta informação: a linha fica transparente, não escondida */
.fact--gap.is-off > :not(.fact__ghost) { visibility: visible; opacity: 0; }
.fact--gap.is-off #meContar:focus-visible { opacity: 1; }
@media (max-width: 767.98px) { .cer__cardwrap { padding-top: 24px; } .band--flow { height: 20px; } .moon__svg { width: 210px; height: 210px; } .moon { gap: 10px; } }
/* ######################################################################################## */
/* VERSÃO C                                                                                 */
/* ######################################################################################## */
/* a faísca é a brasa âmbar do planeta: sai da informação nova e cai na brasa da lua, que respira uma vez */
.spark { width: 0.5rem; height: 0.5rem; margin: -0.25rem 0 0 -0.25rem; background: radial-gradient(circle, #fff1d6 0 18%, var(--chama) 45%, var(--urucum) 78%); box-shadow: 0 0 0.375rem 0.125rem rgba(245,162,58,.45); }
.moon__glow { transform-box: fill-box; transform-origin: center; }
/* os dígitos que viram a informação: mono, um pouco mais apagados que o texto */
.fact .dg { color: var(--linha-forte); letter-spacing: .02em; }
/* tablet e telas médias: a lua e o cartão começam na mesma altura, logo abaixo do título (centrados, a lua descia
   tanto que o título ficava sob o cabeçalho quando ela chegava) */
@media (min-width: 768px) and (max-width: 1099.98px) {
  .cer__moonwrap, .cer__cardwrap { align-self: start; }
  .cer__cardwrap { padding-top: 2.5rem; }
  .cer__grid { row-gap: 0.5rem; }
}

/* 60-confianca.css · Luvela site v3, versão C (split from version B's style.css; B's order kept inside the module) */
/* ======================================================================================== */
/* Confiança                                                                                */
/* ======================================================================================== */
.conf { position: relative; z-index: 2; padding-top: calc(var(--secao-y) * .5); }
.conf__panel { position: relative; }
.conf__bg { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; background-color: var(--noite);
  background-image: radial-gradient(rgba(246,237,216,.1) 1px, transparent 1.3px); background-size: 1.375rem 1.375rem;
  --ci: max(var(--gutter), calc(50vw - 35rem)); --cr: 2.25rem;
  clip-path: inset(0 var(--ci) round var(--cr)); }
@media (max-width: 767.98px) { .conf__bg { --cr: 28px; } }
.conf__in { position: relative; max-width: 70rem; padding-block: 5rem; text-align: center; }
.conf__label { color: var(--escuro-apagado); margin-bottom: 1.25rem; }
.conf__statement > span { display: block; }
.phrase { display: inline; padding: 0 .04em; margin: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 0.125rem; text-underline-offset: .2em; text-decoration-color: rgba(174,179,199,.35); transition: color 200ms var(--ease-ui), text-decoration-color 200ms var(--ease-ui); border-radius: 0.5rem; }
.phrase:hover, .phrase.is-on { color: var(--luar); text-decoration-color: var(--luar); }
.conf.has-on .phrase:not(.is-on) { color: var(--escuro-apagado); }
.conf__cards { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; max-width: 37.5rem; margin: 2.75rem auto 0; justify-items: center; align-items: center; }
.pcard { position: relative; z-index: 1; text-align: left; transition: transform 320ms var(--ease-ui), box-shadow 320ms var(--ease-ui); transform: rotate(var(--rot, 0deg)); }
.pcard.is-on { z-index: 3; transform: rotate(0deg) scale(1.06); }
.conf.has-on .pcard:not(.is-on) { transform: rotate(var(--rot, 0deg)) scale(.97); }
.pcard--branco { width: 14.75rem; max-width: 100%; padding: 0.875rem; border-radius: 1rem; background: var(--branco); box-shadow: var(--fio-claro), var(--sombra-noite); }
.pcard--luar { border-radius: 1rem; background: var(--luar); box-shadow: var(--sombra-noite); }
.pcard.is-on.pcard--branco, .pcard.is-on.pcard--luar { box-shadow: 0 0 0 0.125rem var(--luar), 0 0 0 0.375rem rgba(246,237,216,.18), var(--sombra-noite); }
.pcard--ia { --rot: -4deg; }
.pcard--ok { --rot: 3deg; }
.pcard--recibo { --rot: 2deg; }
.pcard--dados { --rot: -3deg; }
.pcard__badge { display: flex; align-items: center; gap: 0.625rem; min-height: 3.75rem; padding: 0.625rem 1rem 0.625rem 0.625rem; border: 0; background: none; font-size: max(0.9375rem, 14px); font-weight: 600; color: var(--noite); cursor: pointer; border-radius: 1rem; text-align: left; }
.pcard__title { font-size: max(0.875rem, 14px); font-weight: 600; color: var(--noite); }
.flip { display: none; }
[data-flip='q'] .flip--q, [data-flip='r'] .flip--r { display: block; }
.flip--r { display: none; align-items: center; }
[data-flip='r'] .flip--r { display: flex; justify-content: space-between; gap: 0.5rem; }
.receipt--flat { padding: 0; box-shadow: none; font-size: max(0.875rem, 14px); align-items: center; }
.flip__no { margin-top: 0.625rem; font-size: max(0.8125rem, 12px); color: var(--apagado); }
.filechip { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 0.625rem; padding: 0.375rem 0.625rem; border-radius: 62.4375rem; background: var(--canvas); font-family: var(--font-mono); font-size: max(0.75rem, 12px); color: var(--noite); }
.filechip svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.pop { animation: pop 380ms var(--ease-pop); }
@keyframes pop { 0% { scale: .98; } 45% { scale: 1.03; } 100% { scale: 1; } }
.conf__wire { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; display: none; }
.conf__wire path { fill: none; stroke: var(--luar); stroke-opacity: .55; stroke-width: 1.4; stroke-dasharray: 0 6; stroke-linecap: round; }
.conf__notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; max-width: 70rem; margin: 3rem auto 0; }
.conf__notes h3 { font-size: max(1rem, 14px); font-weight: 600; color: var(--noite); }
.conf__notes p { margin-top: 0.5rem; font-size: max(0.9375rem, 14px); line-height: 1.55; color: var(--apagado); }
@media (min-width: 1280px) {
  .conf__in { height: 40rem; padding: 0; display: flex; flex-direction: column; justify-content: center; }
  .conf__cards { position: absolute; inset: 0; display: block; max-width: none; margin: 0; }
  .pcard { position: absolute; }
  .pcard--ia { left: 4.5rem; top: 4.375rem; }
  .pcard--ok { right: 4rem; top: 5.75rem; }
  .pcard--recibo { left: 6.5rem; bottom: 4.625rem; }
  .pcard--dados { right: 6rem; bottom: 5.25rem; }
  .conf__wire { display: block; }
  .conf__statement { position: relative; z-index: 2; }
}
@media (max-width: 899.98px) { .conf__notes { grid-template-columns: 1fr; gap: 1.75rem; } }
@media (max-width: 767.98px) { .conf__in { padding-block: 56px; } .conf__cards { gap: 16px 10px; } .pcard--branco { padding: 12px; } .pcard--ia { --rot: -2deg; } .pcard--ok { --rot: 2deg; } .pcard--recibo { --rot: 1.5deg; } .pcard--dados { --rot: -2deg; } }
@media (max-width: 459.98px) { .conf__cards .acts { grid-template-columns: 1fr; } [data-flip='r'] .flip--r { flex-direction: column; align-items: flex-start; } .pcard__badge { font-size: 14px; padding-right: 10px; } }
.flip--r .receipt span { white-space: nowrap; }
/* Confiança: cartões quase retos (no máximo 1,5°), um recibo de verdade que quebra linha. */
.pcard--ia { --rot: -1.5deg; }
.pcard--ok { --rot: 1deg; }
.pcard--recibo { --rot: 1deg; }
.pcard--dados { --rot: -1deg; }
.pcard--recibo { width: 16.5rem; }
.pcard--recibo .flip--r .receipt span { white-space: normal; }
.pcard--recibo[data-flip='r'] .flip--r { align-items: flex-start; }
@media (max-width: 767.98px) { .pcard--ia, .pcard--ok, .pcard--recibo, .pcard--dados { --rot: 0deg; } }
@media (max-width: 559.98px) {
  .conf__cards { grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 320px; justify-items: stretch; margin-top: 36px; }
  .pcard--branco, .pcard--recibo { width: 100%; }
  .pcard--luar { justify-self: start; }
  .conf__cards .acts { grid-template-columns: 1fr 1fr; }
  [data-flip='r'] .flip--r { flex-direction: row; align-items: center; }
  .pcard.is-on { transform: scale(1.02); }
  .conf.has-on .pcard:not(.is-on) { transform: none; opacity: .72; }
}
@media (max-width: 559.98px) { .conf.has-on .pcard:not(.is-on) { opacity: 1; } }
/* ######################################################################################## */
/* VERSÃO C                                                                                 */
/* ######################################################################################## */
/* o fio pontilhado que liga a frase ao cartão termina numa brasa âmbar (a luz do planeta), não num ponto de luar */
.conf__wire .conf__ember { fill: var(--chama); filter: drop-shadow(0 0 0.25rem rgba(245,162,58,.75)); }
/* a Luvela do cartão "É uma IA." (o componente da presença) */
.pcard__badge .lv { flex: none; }
/* (direção de arte) abaixo de 1280 px os cartões ficam numa grade: como o texto tem piso de 14 px e a raiz encolhe, o
   recibo quebrava em três linhas num cartão estreito. Larguras com piso em px. */
@media (min-width: 560px) and (max-width: 1279.98px) {
  .conf__cards { max-width: max(40rem, 580px); gap: 1.25rem 1.5rem; }
  .pcard--branco { width: max(14.75rem, 232px); }
  .pcard--recibo { width: max(18rem, 270px); }
}

/* 70-planos.css · Luvela site v3, versão C · Planos: "a conta em órbita"
 *
 * The scene: two columns (the title, the question and the orbit dial on the left; "a conta", a receipt, on the right),
 * then three cards with their own personality (Grátis, Conteúdo, Preço travado), then "Em qualquer plano" (six cards,
 * one small loop each). Sizes are rem (the stage scale of 00-base.css) with the readable floors; the small drawn
 * objects (loops, carousel, seal) are in em of a font-size that never goes under 16 px, so their 12 px text holds.
 * Layouts: two columns from 1024 px and in the short tier; one column on the tablet and the phone; on the phone a
 * slim bar with the total and "Assinar" follows the scene (sticky, so it works without JavaScript).
 * The ready state is the default: every loop only runs under html.is-motion and inside .is-live; with reduced motion
 * (.is-still) the page shows the finished state of each loop.
 */
.planos { position: relative; z-index: 1; }
.planos .secao { padding-top: calc(var(--secao-y) * .8); }

/* ======================================================================================== */
/* O palco: mostrador à esquerda, a conta à direita                                          */
/* ======================================================================================== */
.pn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
.pn__head { gap: 0.875rem; }
.pn__head .head__sub { max-width: 30rem; }
.pn__fim { display: block; height: 1px; margin-top: -1px; }

.dial { margin-top: 2.25rem; }
.dial__q { display: block; font-size: max(1.25rem, 16px); font-weight: 600; line-height: 1.3; letter-spacing: -.005em; color: var(--noite); }
.dial__arc { --dial-h: 15rem; --cx: 50%; --cy: 100%; --r: 10rem; --a: 0deg; position: relative; height: var(--dial-h); margin-top: 0.75rem; touch-action: pan-y; }
.dial__svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.dial__base { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 0 6.5; }
.dial__done { fill: none; stroke: var(--noite); stroke-width: 2.4; transition: stroke-dasharray 420ms var(--ease-morph); }
.dial__dot { fill: var(--papel); stroke: var(--linha-forte); stroke-width: 1.5; transition: fill 200ms var(--ease-ui) 120ms, stroke 200ms var(--ease-ui) 120ms; }
.dial__dot.is-past { fill: var(--noite); stroke: var(--noite); }
.dial__ticks { position: absolute; inset: 0; pointer-events: none; }
.dial__ticks li { position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: max(0.8125rem, 12px); line-height: 1; color: var(--apagado); white-space: nowrap; transition: color 200ms var(--ease-ui); }
.dial__ticks li.is-past { color: var(--texto); }
.dial__ticks li.is-on { color: var(--noite); }
.dial__read { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
.dial__ate { font-family: var(--font-mono); font-size: max(0.75rem, 12px); line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.dial__n { font-family: var(--font-serif); font-size: max(4.75rem, 14px); line-height: 1; letter-spacing: -.02em; color: var(--noite); font-variant-numeric: lining-nums tabular-nums; }
.dial__un { margin-top: 0.125rem; font-size: max(0.9375rem, 14px); line-height: 1.3; color: var(--apagado); }
.dial__arm { position: absolute; left: var(--cx); top: var(--cy); z-index: 2; width: 0; height: 0; pointer-events: none; transform: rotate(var(--a)); transition: transform 420ms var(--ease-morph); }
.dial__planet { position: absolute; left: 0; top: calc(-1 * var(--r)); width: 2.75rem; height: 2.75rem; margin: -1.375rem 0 0 -1.375rem; border-radius: 50%; overflow: hidden; transform: rotate(calc(-1 * var(--a))); transition: transform 420ms var(--ease-morph), box-shadow 200ms var(--ease-ui);
  box-shadow: 0 0 0 0.25rem var(--papel), 0 0.625rem 1.25rem -0.375rem rgba(11,21,48,.6), 0 0 1.75rem rgba(245,162,58,.3); }
.dial__planet img { position: absolute; width: 150.8%; height: 150.8%; max-width: none; left: -25.4%; top: -24.5%; }
.dial__arc:has(.dial__input:focus-visible) .dial__planet { box-shadow: 0 0 0 0.25rem var(--papel), 0 0 0 0.375rem var(--azul-texto), 0 0.625rem 1.25rem -0.375rem rgba(11,21,48,.6); }
.dial__arc:has(.dial__input:active) .dial__planet { box-shadow: 0 0 0 0.25rem var(--papel), 0 0.25rem 0.75rem -0.25rem rgba(11,21,48,.6), 0 0 2.25rem rgba(245,162,58,.45); }
.dial__input { position: absolute; left: 0; top: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: grab; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.dial__input:active { cursor: grabbing; }
.dial__input::-webkit-slider-runnable-track { height: var(--dial-h); }
.dial__input::-webkit-slider-thumb { -webkit-appearance: none; width: 2.75rem; height: var(--dial-h); }
.dial__input::-moz-range-thumb { width: 2.75rem; height: var(--dial-h); border: 0; }
.dial__hint { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.625rem; color: var(--apagado); }
.dial__hint svg { width: 1.25rem; height: 0.625rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dial__help { max-width: 33rem; margin: 0.375rem 0 0; font-size: max(0.9375rem, 14px); line-height: 1.5; color: var(--apagado); text-wrap: pretty; }

/* ---------- os números que rolam (70-planos.js monta .roll dentro de cada .num) ---------- */
.num { font-variant-numeric: lining-nums tabular-nums; }
.roll { display: inline-flex; align-items: stretch; line-height: 1.12; white-space: pre; vertical-align: bottom; }
.roll .ch, .roll .dg { display: block; height: 1.12em; }
.roll .dg { overflow: hidden; }
.roll .dg__s { display: block; transition: transform 520ms var(--ease-ui); }
.roll .dg__s i { display: block; height: 1.12em; font-style: normal; text-align: center; }
.is-motion .roll .is-novo { animation: pn-novo 360ms var(--ease-ui) both; }
@keyframes pn-novo { from { opacity: 0; transform: translateY(35%); } to { opacity: 1; transform: none; } }

/* ---------- a conta ---------- */
.conta { position: relative; padding: 1.375rem 1.75rem 1.5rem; border-radius: 1.25rem; background: var(--branco);
  box-shadow: var(--fio-claro), var(--borda-papel-2), 0 0.125rem 0.25rem rgba(11,21,48,.06), 0 1.5rem 2.75rem -1.25rem rgba(11,21,48,.3), 0 3.5rem 5rem -3rem rgba(11,21,48,.28); }
.conta__topo { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.75rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(207,206,198,.7); }
.conta__rotulo { letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.conta__marca { width: 1.25rem; height: auto; fill: var(--noite); }
.conta__parada { font-family: var(--font-serif); font-size: max(2rem, 14px); line-height: 1.1; letter-spacing: -.01em; color: var(--noite); }
.conta__para { margin-top: 0.375rem; min-height: 2.9em; font-size: max(0.875rem, 14px); line-height: 1.45; color: var(--apagado); max-width: 24rem; text-wrap: pretty; }
.conta__linhas { margin: 0.75rem 0 0; }
.ln { display: flex; align-items: baseline; gap: 0.625rem; padding: 0.5rem 0; }
.ln dt { display: flex; align-items: baseline; gap: 0.625rem; flex: 1; min-width: 0; font-size: max(0.9375rem, 14px); color: var(--texto); }
/* the dotted leader of a receipt, between the name and the value */
.ln dt::after { content: ''; flex: 1; min-width: 0.75rem; height: 0; border-bottom: 1.5px dotted var(--linha); translate: 0 -0.2em; }
.ln--total dt { display: block; flex: none; }
.ln--total dt::after { content: none; }
.ln dd { margin: 0; font-size: max(1.0625rem, 14px); font-weight: 600; color: var(--noite); text-align: right; white-space: nowrap; }
.ln .cerca { display: block; font-size: max(0.8125rem, 12px); font-weight: 400; line-height: 1.2; color: var(--apagado); }
.ln--extra { max-height: 0; padding-block: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: max-height 360ms var(--ease-ui), padding 360ms var(--ease-ui), opacity 240ms var(--ease-ui), visibility 0s linear 360ms; }
.ln--extra.is-on { max-height: 3.5rem; padding-block: 0.5rem; opacity: 1; visibility: visible; transition-delay: 0s; }
.ln--total { position: relative; align-items: flex-end; justify-content: space-between; margin-top: 0.625rem; padding: 1.125rem 0 0; border-top: 1.5px dashed var(--tracejado); }
.ln--total::before, .ln--total::after { content: ''; position: absolute; top: -0.5625rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--papel); }
.ln--total::before { left: -2.3125rem; box-shadow: inset -1px 0 0 rgba(11,21,48,.1); }
.ln--total::after { right: -2.3125rem; box-shadow: inset 1px 0 0 rgba(11,21,48,.1); }
.ln--total dt { padding-bottom: 0.5rem; font-size: max(1rem, 14px); font-weight: 600; color: var(--noite); }
.ln--total dd { font-family: var(--font-serif); font-weight: 400; font-size: max(3.75rem, 14px); line-height: 1; letter-spacing: -.015em; }
.ln--total dd.is-range { font-size: max(2.125rem, 14px); }
.ln--total .cerca { font-family: var(--font-sans); font-size: max(0.875rem, 14px); letter-spacing: 0; margin-bottom: 0.125rem; }
.conta__cabem { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; font-size: max(0.875rem, 14px); line-height: 1.4; color: var(--apagado); text-align: right; }
.lua { width: 1.375rem; height: 1.375rem; flex: none; transition: opacity 240ms var(--ease-ui); }
.lua__noite { fill: var(--noite); }
.lua__luz { fill: var(--luar); }
.conta__cabem.is-direto .lua { opacity: 0; width: 0; }
.desliza { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 360ms var(--ease-ui), opacity 240ms var(--ease-ui), visibility 0s linear 360ms; }
.desliza.is-on { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; }
.desliza__in { min-height: 0; overflow: hidden; }
.pay { margin: 0.875rem 0 0; padding: 0.75rem 0.875rem 0.375rem; border: 0; border-radius: 0.875rem; background: var(--papel); min-width: 0; }
.pay legend { float: left; width: 100%; padding: 0 0 0.125rem; font-size: max(0.875rem, 14px); font-weight: 600; color: var(--noite); }
.pay legend + * { clear: both; }
.pay__opt { display: flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; font-size: max(0.875rem, 14px); line-height: 1.35; color: var(--texto); cursor: pointer; }
.pay__opt input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--noite); flex: none; }
.switch { position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; cursor: pointer; }
.switch input { position: absolute; left: 0; top: 50%; width: 2.5rem; height: 1.5rem; margin: -0.75rem 0 0; opacity: 0; cursor: pointer; }
.switch__track { position: relative; width: 2.5rem; height: 1.5rem; flex: none; border-radius: 0.75rem; background: var(--linha); box-shadow: inset 0 0 0 1px rgba(11,21,48,.12); transition: background-color 200ms var(--ease-ui); }
.switch__knob { position: absolute; left: 0.125rem; top: 0.125rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--branco); box-shadow: 0 1px 0.1875rem rgba(11,21,48,.3); transition: transform 240ms var(--ease-ui); }
.switch input:checked ~ .switch__track { background: var(--noite); }
.switch input:checked ~ .switch__track .switch__knob { transform: translateX(1rem); }
.switch input:focus-visible ~ .switch__track { outline: 0.125rem solid var(--azul-texto); outline-offset: 0.1875rem; }
.switch__text b { display: block; font-size: max(0.9375rem, 14px); line-height: 1.3; color: var(--noite); }
.switch__text small { display: block; font-size: max(0.8125rem, 12px); line-height: 1.4; color: var(--apagado); }
.switch--so { justify-content: flex-end; }
.switch--so input { left: auto; right: 0; }
.conta__switch { margin: 0.875rem 0 1rem; padding-top: 0.875rem; border-top: 1px solid rgba(207,206,198,.7); }
.conta__switch input { top: calc(50% + 0.4375rem); }
.price__soon { display: flex; justify-content: center; }
.price__more { margin-top: 0.75rem; font-size: max(0.875rem, 14px); color: var(--apagado); text-align: center; text-wrap: balance; }
.link--inline { display: inline; min-height: 0; padding: 0; font-size: inherit; }

/* ---------- a barra do celular (o total e o botão acompanham a cena) ---------- */
.barra { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(242,241,236,.88); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 -1px 0 rgba(11,21,48,.1), 0 -14px 28px -18px rgba(11,21,48,.3);
  transition: opacity 240ms var(--ease-ui), transform 320ms var(--ease-ui), visibility 0s linear 0s; }
.barra__txt { display: flex; flex-direction: column; min-width: 0; }
.barra__rot { font-size: 12px; line-height: 1.3; color: var(--apagado); }
.barra__val { font-family: var(--font-serif); font-size: 26px; line-height: 1.1; letter-spacing: -.01em; color: var(--noite); white-space: nowrap; }
.barra__val.is-range { font-size: 17px; line-height: 1.5; }
.barra .cerca { display: none; }
.barra .btn { min-height: 44px; padding: 0 22px; flex: none; }
.barra__soon { min-height: 44px; padding: 0 16px; font-size: 14px; flex: none; }
.pn.tem-barra .barra:not(.is-on) { opacity: 0; transform: translateY(110%); visibility: hidden; pointer-events: none; transition: opacity 240ms var(--ease-ui), transform 320ms var(--ease-ui), visibility 0s linear 320ms; }
/* The floating Luvela steps above the bar by herself (99-presenca.js looks at #planosBarra / data-presenca="acima");
   70-planos.js also sets html.planos-barra and --planos-barra-h while the bar is on screen and calls Luvela.desvia(). */

/* ======================================================================================== */
/* Os três cartões                                                                          */
/* ======================================================================================== */
.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 4.5rem; }
.tri__c { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 1.625rem 1.625rem 1.625rem; border-radius: 1.25rem; overflow: hidden; }
.tri__over { letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.tri__t { margin: 0.5rem 0 0; font-family: var(--font-serif); font-weight: 400; font-size: max(1.75rem, 22px); line-height: 1.1; letter-spacing: -.01em; color: var(--noite); text-wrap: balance; }
.tri__txt { margin-top: 0.75rem; font-size: max(0.9375rem, 14px); line-height: 1.5; color: var(--apagado); text-wrap: pretty; }
/* 1. Grátis: papel branco, o preço grande e os três objetos do Kit MEI */
.tri__c--gratis { background: var(--branco); box-shadow: var(--fio-claro), var(--borda-papel-2), var(--sombra-2); }
.tri__preco { display: flex; align-items: baseline; gap: 0.625rem; margin-top: 0.875rem; color: var(--noite); }
.tri__preco .t-price { font-size: max(3.25rem, 14px); }
.tri__preco-nota { font-size: max(0.875rem, 14px); color: var(--apagado); }
.mei { display: grid; gap: 0.5rem; margin: 0.875rem 0 1.375rem; }
.mei__i { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem 0.5rem 0.5rem; border-radius: 0.875rem; background: var(--papel); }
.mei__obj { width: 2.75em; height: 2.75em; flex: none; font-size: max(1rem, 16px); overflow: visible; filter: drop-shadow(0 0.125em 0.1875em rgba(11,21,48,.18)); }
.mei__t { display: block; min-width: 0; }
.mei__t b { display: block; font-size: max(0.9375rem, 14px); font-weight: 600; line-height: 1.3; color: var(--noite); }
.mei__t span { display: block; font-size: max(0.8125rem, 13px); line-height: 1.4; color: var(--apagado); }
.mei-papel { fill: var(--branco); stroke: rgba(11,21,48,.1); stroke-width: 1; }
.mei-faixa { fill: var(--urucum); }
.mei-furo { fill: var(--branco); opacity: .9; }
.mei-dia { font-family: var(--font-serif); font-size: 17px; fill: var(--noite); font-variant-numeric: lining-nums; }
.mei-trilho { fill: none; stroke: var(--linha); stroke-width: 5; stroke-linecap: round; }
.mei-cheio { fill: none; stroke: var(--noite); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 53 100; transition: stroke-dasharray 900ms var(--ease-ui) 300ms; }
.mei-brasa { fill: var(--chama); stroke: var(--papel); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; transition: opacity 240ms var(--ease-ui) 1000ms, transform 320ms var(--ease-pop) 1000ms; }
.mei-base { fill: none; stroke: var(--linha-forte); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 0 4.33; }
.mei-dobra { fill: none; stroke: rgba(11,21,48,.18); stroke-width: 1; }
.mei-linha { fill: none; stroke: var(--linha); stroke-width: 2; stroke-linecap: round; }
.mei-selo { fill: var(--verde-texto); stroke: var(--papel); stroke-width: 1.6; }
.mei-visto { fill: none; stroke: var(--branco); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10; stroke-dashoffset: 0; transition: stroke-dashoffset 360ms var(--ease-ui) 700ms; }
.is-motion .tri.pre:not(.is-in) .mei-cheio { stroke-dasharray: 0 100; }
.is-motion .tri.pre:not(.is-in) .mei-brasa { opacity: 0; transform: scale(.4); }
.is-motion .tri.pre:not(.is-in) .mei-visto { stroke-dashoffset: 10; }
.tri__c--gratis .btn { margin-top: auto; }
/* 2. Conteúdo: papel mais quente, o carrossel pequeno que desliza, o mesmo interruptor da conta */
.tri__c--conteudo { background: var(--canvas); box-shadow: inset 0 0 0 1px rgba(11,21,48,.05), 0 1px 0 #d5d3ca, 0 0.125rem 0 #cbc9c0, var(--sombra-1); }
.car { --passo: 5.625em; position: relative; margin: 1.125rem -1.625rem 0; padding: 0.375em 0 0; overflow: hidden; font-size: max(1.5rem, 18px);
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 1.625rem, #000 78%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 1.625rem, #000 78%, transparent 100%); }
.car__faixa { display: flex; gap: 0.625em; width: max-content; padding: 0 1.625rem 0.875em; }
.car__s { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3125em; flex: none; width: 5em; height: 6.25em; padding: 0.5em; border-radius: 0.625em; box-shadow: 0 0.0625em 0.125em rgba(11,21,48,.12), 0 0.5em 0.875em -0.375em rgba(11,21,48,.35); }
.car__s i { display: block; height: 0.25em; border-radius: 0.125em; background: currentColor; opacity: .5; }
.car__s i:nth-of-type(1) { width: 78%; opacity: .9; }
.car__s i:nth-of-type(2) { width: 100%; }
.car__s i:nth-of-type(3) { width: 56%; }
.car__s b { position: absolute; left: 0.5em; top: 0.3em; font-family: var(--font-serif); font-weight: 400; font-size: 1.625em; line-height: 1; }
.car__s--a { background: linear-gradient(160deg, var(--anil-noite), var(--noite)); color: var(--luar); }
.car__s--a svg { position: absolute; left: 0.55em; top: 0.6em; width: 1.5em; fill: var(--luar); }
.car__s--b { background: var(--luar); color: var(--noite); }
.car__s--c { background: var(--branco); color: var(--noite); }
.car__s--d { background: var(--chama); color: var(--noite); }
.car__s--d em { position: absolute; inset: 0.5em 0.5em 2em; border-radius: 0.375em; background: rgba(11,21,48,.14); }
.car__s--d em::after { content: ''; position: absolute; left: 22%; top: 30%; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--luar); box-shadow: 0 0 0.75em rgba(246,237,216,.8); }
.car__pts { display: flex; justify-content: center; gap: 0.3125em; padding-bottom: 0.25em; }
.car__pts i { width: 0.375em; height: 0.375em; border-radius: 0.375em; background: var(--noite); opacity: .25; }
.car__pts i:first-child { width: 1em; opacity: .9; }
.tri__pe { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1rem; }
.tri__mais { display: flex; flex-direction: column; color: var(--noite); }
.tri__mais b { font-family: var(--font-serif); font-weight: 400; font-size: max(1.875rem, 22px); line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; }
.tri__mais span { font-size: max(0.8125rem, 13px); color: var(--apagado); }
.tri__c--conteudo .tri__txt { margin-bottom: 0.25rem; }
/* 3. Preço travado: a noite e o selo de lançamento */
.tri__c--trava { color: var(--luar); box-shadow: var(--fio-noite), var(--borda-noite), var(--sombra-2);
  background: radial-gradient(120% 70% at 50% 122%, rgba(245,162,58,.34) 0, rgba(245,162,58,.1) 38%, rgba(245,162,58,0) 66%), radial-gradient(rgba(246,237,216,.1) 1px, transparent 1.3px) 0 0 / 1.375rem 1.375rem, linear-gradient(180deg, #0b1530, #101c44); }
.tri__c--trava .tri__over { color: var(--escuro-apagado); }
.tri__c--trava .tri__t { color: var(--luar); }
.tri__c--trava .tri__txt { color: var(--escuro-apagado); }
.selo { width: 11.5em; height: 11.5em; margin: auto -1.5em -1.75em auto; padding-top: 1.25rem; box-sizing: content-box; font-size: max(1rem, 16px); rotate: -10deg; }
.selo svg { width: 100%; height: 100%; overflow: visible; }
.selo__aro { fill: none; stroke: var(--luar); stroke-width: 1.4; }
.selo__aro--fino { stroke-width: 1; stroke-dasharray: 0 3.6; stroke-linecap: round; stroke-opacity: .7; }
.selo__gira { transform-origin: 0 0; }
.selo__volta { font-family: var(--font-mono); font-size: 8.4px; letter-spacing: .04em; fill: var(--luar); }
.selo__n { font-family: var(--font-serif); font-size: 31px; fill: var(--luar); font-variant-numeric: lining-nums; }
.selo__m { font-family: var(--font-mono); font-size: 7.6px; letter-spacing: .16em; fill: var(--chama); }

/* ======================================================================================== */
/* Em qualquer plano: seis cartões, um laço pequeno em cada um                               */
/* ======================================================================================== */
.incl { margin-top: 6rem; }
.incl__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.incl__t { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: max(2.5rem, 14px); line-height: 1.08; letter-spacing: -.015em; }
.incl__s { margin-top: 0.75rem; max-width: 34rem; font-size: max(1.0625rem, 14px); line-height: 1.5; color: var(--apagado); }
.incl__pausa { margin-bottom: 0.25rem; }
.incl__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.ig { min-width: 0; padding: 0.625rem 0.625rem 1.25rem; border-radius: 1.25rem; background: var(--branco); box-shadow: var(--fio-claro), var(--borda-papel-2), var(--sombra-1); }
.ig__cena { position: relative; display: grid; place-items: center; height: 9.25rem; border-radius: 0.75rem; overflow: hidden; font-size: max(1rem, 16px);
  background: radial-gradient(rgba(11,21,48,.06) 1px, transparent 1.3px) 0 0 / 0.875rem 0.875rem, var(--papel); }
.ig__t { margin: 1rem 0.625rem 0; font-size: max(1.125rem, 16px); font-weight: 600; line-height: 1.3; letter-spacing: -.005em; color: var(--noite); }
.ig__d { margin: 0.25rem 0.625rem 0; font-size: max(0.9375rem, 14px); line-height: 1.45; color: var(--apagado); text-wrap: pretty; }
/* a entrada, 50 ms entre um e outro (só com movimento; o estado pronto é o padrão) */
.tri > *, .incl__grade > * { transition: opacity 520ms var(--ease-ui), translate 520ms var(--ease-ui); transition-delay: calc(var(--i, 0) * 50ms); }
.is-motion .pre:not(.is-in) > * { opacity: 0; translate: 0 1.25rem; }

/* ---------- as cenas (em: 1em = 16 px no mínimo) ---------- */
.cn { position: relative; display: flex; flex-direction: column; width: 8.5em; scale: 1.3; }
.cn-ok { width: 1em; height: 1em; flex: none; }
.cn-ok circle { fill: var(--verde-texto); stroke: var(--verde-texto); stroke-width: 1.2; }
.cn-ok path { fill: none; stroke: var(--branco); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10; stroke-dashoffset: 0; }
/* 1. WhatsApp: a resposta sendo escrita */
.cn-wa { gap: 0.3125em; }
.cn-wa__q, .cn-wa__a { width: fit-content; max-width: 100%; padding: 0.375em 0.625em; font-size: 0.75em; line-height: 1.35; white-space: nowrap; }
.cn-wa__q { align-self: flex-start; border-radius: 1em 1em 1em 0.375em; background: var(--branco); color: var(--noite); box-shadow: var(--fio-claro), 0 1px 0.125rem rgba(11,21,48,.1); }
.cn-wa__a { align-self: flex-end; border-radius: 1em 1em 0.375em 1em; background: var(--anil-noite); color: var(--luar); box-shadow: 0 0.375em 0.75em -0.375em rgba(11,21,48,.5); }
.cn-wa__tag { display: flex; align-items: center; gap: 0.375em; color: var(--escuro-apagado); }
.cn-wa__linha { position: relative; display: block; }
.cn-wa__dots { position: absolute; left: 0; top: 50%; display: flex; gap: 0.25em; translate: 0 -50%; opacity: 0; }
.cn-wa__dots i { width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--luar); }
.cn-wa__txt { display: block; }
/* 2. Agenda: um horário sendo marcado */
.cn-ag { width: 8em; padding: 0.5em 0.625em 0.375em; border-radius: 0.75em; background: #fbfaf6; box-shadow: var(--fio-claro), 0 1px 0 #d9d7cf, 0 0.5em 1em -0.5em rgba(11,21,48,.35); }
.cn-ag__topo { display: flex; align-items: baseline; gap: 0.375em; padding-bottom: 0.25em; border-bottom: 1px solid var(--linha); font-family: var(--font-serif); font-size: 1em; line-height: 1.1; color: var(--noite); }
.cn-ag__topo b { font-family: var(--font-mono); font-weight: 400; font-size: 0.75em; letter-spacing: .06em; text-transform: uppercase; color: var(--apagado); }
.cn-ag__l { display: flex; align-items: center; gap: 0.5em; margin: 0.1875em -0.3125em 0; padding: 0.25em 0.3125em; border-radius: 0.4375em; font-size: 0.75em; line-height: 1.3; color: var(--noite); }
.cn-ag__l i { width: 2.4em; font-style: normal; font-family: var(--font-mono); color: var(--apagado); }
.cn-ag__l .cn-ok { margin-left: auto; width: 1.2em; height: 1.2em; }
.cn-ag__troca { position: relative; display: block; }
.cn-ag__livre { position: absolute; left: 0; top: 0; color: var(--apagado); opacity: 0; }
/* 3. Pix: o código copiado e o dinheiro que chega */
.cn-px { gap: 0.375em; padding: 0.5em 0.625em; border-radius: 0.75em; background: var(--branco); box-shadow: var(--fio-claro), 0 1px 0 #d9d7cf, 0 0.5em 1em -0.5em rgba(11,21,48,.35); font-size: 1em; }
.cn-px__topo { display: flex; align-items: baseline; justify-content: space-between; font-size: 0.75em; line-height: 1.3; color: var(--noite); }
.cn-px__topo b { font-weight: 700; }
.cn-px__topo span { font-variant-numeric: tabular-nums; font-weight: 600; }
.cn-px__cod { display: flex; align-items: center; gap: 0.375em; padding: 0.1875em 0.1875em 0.1875em 0.5em; border-radius: 0.5em; background: var(--papel); }
.cn-px__barras { flex: 1; height: 0.75em; opacity: .55; background: repeating-linear-gradient(90deg, var(--noite) 0 0.125em, transparent 0.125em 0.25em, var(--noite) 0.25em 0.3125em, transparent 0.3125em 0.5625em, var(--noite) 0.5625em 0.75em, transparent 0.75em 0.875em); }
.cn-px__btn { position: relative; display: grid; place-items: center; min-width: 4.9em; padding: 0.3em 0.6em; border-radius: 0.5em; background: var(--verde-texto); color: var(--branco); font-size: 0.75em; font-weight: 600; line-height: 1.3; }
.cn-px__c1, .cn-px__c2 { grid-area: 1 / 1; }
.cn-px__c1 { opacity: 0; }
.cn-px__ok { display: flex; align-items: center; gap: 0.375em; font-size: 0.75em; font-weight: 600; line-height: 1.3; color: var(--verde-texto); }
/* 4. Notas fiscais: um papel sendo lido */
.cn-nf { flex-direction: row; align-items: center; gap: 0.625em; }
.cn-nf__papel { position: relative; display: flex; flex-direction: column; gap: 0.3125em; width: 3.25em; height: 4.375em; flex: none; padding: 0.5em 0.4375em; border-radius: 0.25em; background: var(--branco); overflow: hidden; rotate: -4deg; box-shadow: var(--fio-claro), 0 0.5em 1em -0.5em rgba(11,21,48,.4); }
.cn-nf__papel i { display: block; height: 0.1875em; border-radius: 0.125em; background: var(--linha); }
.cn-nf__papel i:nth-child(1) { width: 60%; height: 0.3125em; background: var(--noite); }
.cn-nf__papel i:nth-child(3) { width: 78%; }
.cn-nf__papel i:nth-child(4) { width: 52%; }
.cn-nf__papel i:nth-child(5) { width: 100%; height: 0.3125em; margin-top: auto; background: var(--linha-forte); }
.cn-nf__feixe { position: absolute; left: 0; right: 0; top: 0; height: 1.25em; opacity: 0; background: linear-gradient(180deg, rgba(245,162,58,0), rgba(245,162,58,.35)); border-bottom: 0.125em solid var(--chama); }
.cn-nf__campos { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3125em; min-width: 0; }
.cn-nf__campos span { padding: 0.2em 0.625em; border-radius: 1em; background: var(--branco); color: var(--noite); font-size: 0.75em; font-weight: 600; line-height: 1.35; box-shadow: var(--fio-claro), 0 1px 0.125rem rgba(11,21,48,.1); }
/* 5. Lembretes: o sino */
.cn-si { flex-direction: row; align-items: center; gap: 0.5em; width: max-content; padding: 0.5em 0.875em 0.5em 0.5em; border-radius: 0.75em; background: var(--branco); box-shadow: var(--fio-claro), 0 1px 0 #d9d7cf, 0 0.5em 1em -0.5em rgba(11,21,48,.35); }
.cn-si__sino { position: relative; display: grid; place-items: center; width: 2em; height: 2em; flex: none; border-radius: 0.625em; background: var(--anil-noite); color: var(--luar); }
.cn-si__sino .ic { width: 1em; height: 1em; transform-origin: 50% 10%; }
.cn-si__onda { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0.125em var(--chama); opacity: 0; }
.cn-si__txt { display: block; min-width: 0; font-size: 0.75em; line-height: 1.3; white-space: nowrap; }
.cn-si__txt b { display: block; font-weight: 600; color: var(--noite); }
.cn-si__txt span { display: block; color: var(--apagado); }
/* 6. Cérebro: a lua de pontos */
.cn-lu { width: 5.25em; height: 5.25em; }
.cn-lu__svg { width: 100%; height: 100%; overflow: visible; }
.cn-lu__svg circle { fill: var(--noite); }
.cn-lu__svg circle.is-brasa { fill: var(--chama); }

/* ---------- os laços (7 s; só com movimento, dentro de .is-live; a pausa congela) ---------- */
.is-motion .ig.is-live .cn { animation: cn-cena 7s linear infinite both; }
.is-motion .ig.is-live .cn-wa__a { animation: cn-wa-a 7s var(--ease-ui) infinite both; }
.is-motion .ig.is-live .cn-wa__dots { animation: cn-wa-dots 7s linear infinite both; }
.is-motion .ig.is-live .cn-wa__dots i { animation: cn-pt 900ms var(--ease-ui) infinite; }
.is-motion .ig.is-live .cn-wa__dots i:nth-child(2) { animation-delay: 150ms; }
.is-motion .ig.is-live .cn-wa__dots i:nth-child(3) { animation-delay: 300ms; }
.is-motion .ig.is-live .cn-wa__txt { animation: cn-wa-txt 7s linear infinite both; }
.is-motion .ig.is-live .cn-ag__l--novo { animation: cn-ag-l 7s var(--ease-ui) infinite both; }
.is-motion .ig.is-live .cn-ag__livre { animation: cn-ag-livre 7s linear infinite both; }
.is-motion .ig.is-live .cn-ag__nome { animation: cn-ag-nome 7s linear infinite both; }
.is-motion .ig.is-live .cn-ag__l--novo .cn-ok circle { animation: cn-ok-c 7s linear infinite both; }
.is-motion .ig.is-live .cn-ag__l--novo .cn-ok path { animation: cn-ok-p 7s var(--ease-ui) infinite both; }
.is-motion .ig.is-live .cn-px__btn { animation: cn-px-btn 7s var(--ease-ui) infinite both; }
.is-motion .ig.is-live .cn-px__c1 { animation: cn-px-c1 7s linear infinite both; }
.is-motion .ig.is-live .cn-px__c2 { animation: cn-px-c2 7s linear infinite both; }
.is-motion .ig.is-live .cn-px__ok { animation: cn-px-ok 7s var(--ease-ui) infinite both; }
.is-motion .ig.is-live .cn-nf__feixe { animation: cn-nf-feixe 7s var(--ease-morph) infinite both; }
.is-motion .ig.is-live .cn-nf__campos span { animation: cn-nf-campo 7s var(--ease-ui) infinite both; }
.is-motion .ig.is-live .cn-nf__campos span:nth-child(2) { animation-name: cn-nf-campo2; }
.is-motion .ig.is-live .cn-nf__campos span:nth-child(3) { animation-name: cn-nf-campo3; }
.is-motion .ig.is-live .cn-si__sino .ic { animation: cn-si-sino 7s linear infinite both; }
.is-motion .ig.is-live .cn-si__onda { animation: cn-si-onda 7s var(--ease-ui) infinite both; }
.is-motion .ig.is-live .cn-lu__svg circle { animation: cn-lu-pt 7s var(--ease-ui) infinite both; animation-delay: calc(var(--d, 0) * 1ms); }
.is-motion .tri__c.is-live .car__faixa { animation: car-anda 10s var(--ease-morph) infinite; }
.is-motion .tri__c.is-live .car__pts i { animation: car-pt 10s linear infinite both; }
.is-motion .tri__c.is-live .car__pts i:nth-child(2) { animation-delay: -7.5s; }
.is-motion .tri__c.is-live .car__pts i:nth-child(3) { animation-delay: -5s; }
.is-motion .tri__c.is-live .car__pts i:nth-child(4) { animation-delay: -2.5s; }
.is-motion .tri__c.is-live .selo__gira { animation: selo-gira 60s linear infinite; }
.planos.is-paused .ig .cn, .planos.is-paused .ig .cn *, .planos.is-paused .car *, .planos.is-paused .selo__gira { animation-play-state: paused !important; }
@keyframes cn-cena { 0% { opacity: 0; translate: 0 0.375em; } 5%, 94% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 0; } }
@keyframes cn-wa-a { 0%, 12% { opacity: 0; transform: translateY(0.375em) scale(.96); } 17%, 100% { opacity: 1; transform: none; } }
@keyframes cn-wa-dots { 0%, 15% { opacity: 0; } 18%, 38% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes cn-pt { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-0.25em); opacity: 1; } }
@keyframes cn-wa-txt { 0%, 40% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(19, end); } 60%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes cn-ag-l { 0%, 26% { background-color: rgba(246,237,216,0); } 32%, 58% { background-color: rgba(246,237,216,1); } 74%, 100% { background-color: rgba(246,237,216,0); } }
@keyframes cn-ag-livre { 0%, 28% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes cn-ag-nome { 0%, 28% { opacity: 0; } 32%, 100% { opacity: 1; } }
@keyframes cn-ok-c { 0%, 38% { fill: transparent; stroke: var(--linha-forte); } 42%, 100% { fill: var(--verde-texto); stroke: var(--verde-texto); } }
@keyframes cn-ok-p { 0%, 41% { stroke-dashoffset: 10; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes cn-px-btn { 0%, 24% { background-color: var(--noite); transform: none; } 26% { transform: scale(.92); } 30%, 100% { background-color: var(--verde-texto); transform: none; } }
@keyframes cn-px-c1 { 0%, 26% { opacity: 1; } 29%, 100% { opacity: 0; } }
@keyframes cn-px-c2 { 0%, 26% { opacity: 0; } 29%, 100% { opacity: 1; } }
@keyframes cn-px-ok { 0%, 50% { opacity: 0; transform: translateY(0.375em); } 57%, 100% { opacity: 1; transform: none; } }
@keyframes cn-nf-feixe { 0%, 10% { opacity: 0; transform: translateY(-1.25em); } 14% { opacity: 1; } 46% { opacity: 1; } 50%, 100% { opacity: 0; transform: translateY(3.25em); } }
@keyframes cn-nf-campo { 0%, 20% { opacity: 0; transform: translateX(-0.375em); } 26%, 100% { opacity: 1; transform: none; } }
@keyframes cn-nf-campo2 { 0%, 31% { opacity: 0; transform: translateX(-0.375em); } 37%, 100% { opacity: 1; transform: none; } }
@keyframes cn-nf-campo3 { 0%, 42% { opacity: 0; transform: translateX(-0.375em); } 48%, 100% { opacity: 1; transform: none; } }
@keyframes cn-si-sino { 0%, 14%, 40%, 100% { transform: none; } 18% { transform: rotate(16deg); } 22% { transform: rotate(-13deg); } 26% { transform: rotate(10deg); } 30% { transform: rotate(-6deg); } 35% { transform: rotate(3deg); } }
@keyframes cn-si-onda { 0%, 15% { opacity: 0; transform: none; } 18% { opacity: .9; } 42%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes cn-lu-pt { 0% { fill-opacity: .14; } 9%, 78% { fill-opacity: 1; } 86%, 100% { fill-opacity: .14; } }
@keyframes car-anda { 0%, 17% { transform: translateX(0); } 25%, 42% { transform: translateX(calc(-1 * var(--passo))); } 50%, 67% { transform: translateX(calc(-2 * var(--passo))); } 75%, 92% { transform: translateX(calc(-3 * var(--passo))); } 100% { transform: translateX(calc(-4 * var(--passo))); } }
@keyframes car-pt { 0%, 18% { width: 1em; opacity: .9; } 25%, 93% { width: 0.375em; opacity: .25; } 100% { width: 1em; opacity: .9; } }
@keyframes selo-gira { to { transform: rotate(360deg); } }
/* with the dots of the carousel running, the first one no longer keeps its resting look */
.is-motion .tri__c.is-live .car__pts i { width: 0.375em; opacity: .25; }

.plans__proto[hidden] { display: none; }
.plans__proto { display: table; margin: 3.5rem auto 0; padding: 0.25rem 0.625rem; border: 1px dashed var(--linha-forte); border-radius: 62.4375rem; color: var(--apagado); text-align: center; }

/* ======================================================================================== */
/* Duas colunas: a partir de 1024 px e no tamanho baixo (short)                              */
/* ======================================================================================== */
@media (min-width: 1024px), (min-width: 900px) and (max-height: 700px) {
  .pn { grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); column-gap: 4rem; align-items: start; }
  .conta { margin-top: 0.25rem; }
}
/* Uma coluna (tablet e celular): tudo no eixo do mostrador */
@media (max-width: 1023.98px) and (min-height: 700.02px), (max-width: 899.98px) {
  .pn__head { align-items: center; text-align: center; }
  .dial__q { text-align: center; }
  .dial__help { margin-inline: auto; text-align: center; text-wrap: balance; }
  .conta { width: 100%; max-width: 34rem; margin-inline: auto; }
}
/* tablet: o Grátis ocupa a linha de cima, deitado; Conteúdo e Preço travado lado a lado */
@media (min-width: 768px) and (max-width: 1023.98px) and (min-height: 700.02px) {
  .dial__arc { --dial-h: 17rem; }
  .tri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tri__c--gratis { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 2rem; align-items: start; }
  .tri__c--gratis > :not(.mei) { grid-column: 1; }
  .tri__c--gratis .mei { grid-column: 2; grid-row: 1 / span 5; margin: 0; }
  .tri__c--gratis .btn { margin-top: 1.25rem; }
  .incl__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* o tamanho baixo (1263 × 577): a cena inteira cabe embaixo do cabeçalho */
@media (min-width: 900px) and (max-height: 700px) {
  .planos .secao { padding-top: 2rem; }
  .pn { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); column-gap: 3rem; }
  .pn__head { gap: 0.5rem; }
  .pn__head .t-h2 { font-size: max(2.375rem, 14px); line-height: 1.06; }
  .dial { margin-top: 1.25rem; }
  .dial__arc { --dial-h: 12rem; }
  .dial__n { font-size: max(3.75rem, 14px); }
  .dial__hint { margin-top: 0.375rem; }
  .dial__help { margin-top: 0.125rem; max-width: 40rem; }
  .dial__arc { margin-top: 0.375rem; }
  .conta { padding: 0.875rem 1.5rem 1rem; }
  .conta__para { margin-top: 0.25rem; }
  .conta__topo { padding-bottom: 0.5rem; margin-bottom: 0.625rem; }
  .conta__parada { font-size: max(1.75rem, 14px); }
  .conta__linhas { margin-top: 0.375rem; }
  .ln { padding: 0.3125rem 0; }
  .ln--extra.is-on { padding-block: 0.3125rem; }
  .ln--total { margin-top: 0.375rem; padding-top: 0.75rem; }
  .ln--total::before { left: -2.0625rem; }
  .ln--total::after { right: -2.0625rem; }
  .ln--total dd { font-size: max(3.25rem, 14px); }
  .conta__switch { margin: 0.5rem 0 0.625rem; padding-top: 0.5rem; }
  .conta__switch input { top: calc(50% + 0.25rem); }
  .price__more { margin-top: 0.375rem; }
  .tri { margin-top: 3rem; }
  .incl { margin-top: 4rem; }
}
/* ======================================================================================== */
/* Celular                                                                                  */
/* ======================================================================================== */
@media (max-width: 767.98px) {
  .planos .secao { padding-bottom: 64px; }
  .pn { row-gap: 28px; }
  .dial { margin-top: 28px; }
  .dial__q { font-size: 18px; }
  .dial__arc { --dial-h: 184px; margin-top: 4px; }
  .dial__planet { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .dial__input::-webkit-slider-thumb { width: 44px; }
  .dial__input::-moz-range-thumb { width: 44px; }
  .dial__ticks li { font-size: 12px; }
  .dial__n { font-size: 54px; }
  .dial__un { font-size: 14px; }
  .dial__hint { margin-top: 10px; }
  .conta { padding: 20px 20px 18px; }
  .conta__parada { font-size: 28px; }
  .ln--total::before { left: -29px; }
  .ln--total::after { right: -29px; }
  .ln--total dd { font-size: 52px; }
  .ln--total dd.is-range { font-size: 30px; }
  .ln--total:has(.is-range) { flex-direction: column; align-items: stretch; gap: 2px; }
  .ln--total:has(.is-range) dt { padding-bottom: 0; }
  .ln--total:has(.is-range) .cerca { display: none; }
  .ln--total:has(.is-range) dt::after { content: ', cerca de'; height: auto; border: 0; translate: none; font-weight: 400; color: var(--apagado); }
  .conta__cabem { justify-content: flex-start; font-size: 13px; text-align: left; }
  .conta__switch { margin-bottom: 4px; }
  .price__more { margin-top: 8px; }
  .tri { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 40px; }
  .tri__c { padding: 22px 20px; }
  .car { margin-inline: -20px; -webkit-mask: linear-gradient(90deg, transparent 0, #000 20px, #000 80%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 20px, #000 80%, transparent 100%); }
  .car__faixa { padding-inline: 20px; }
  .selo { width: 10em; height: 10em; }
  .incl { margin-top: 64px; }
  .incl__t { font-size: 30px; }
  .incl__s { font-size: 15px; }
  .incl__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
  .ig { padding: 8px 8px 14px; border-radius: 18px; }
  .ig__cena { height: 108px; border-radius: 12px; }
  .cn { scale: 1; }
  .ig__t { margin: 10px 6px 0; font-size: 15px; }
  .ig__d { margin: 2px 6px 0; font-size: 14px; line-height: 1.4; }
  .plans__proto { display: block; margin-top: 40px; border-radius: 14px; }
}
@media (max-width: 379.98px) {
  .cn { scale: .92; }
  .barra__val { font-size: 24px; }
  .barra__val.is-range { font-size: 15px; }
}
/* ######################################################################################## */
/* DIREÇÃO DE ARTE (última passada)                                                         */
/* ######################################################################################## */
/* Preço travado: o selo inteiro dentro do cartão, grande, no centro do espaço livre. Antes ele ficava espremido no
   canto, com o aro encostado nas duas bordas, e metade do cartão vazia. */
.tri__c--trava .tri__txt { margin-bottom: 1.5rem; }
.tri__c--trava .selo { width: min(13.5em, 100%); height: auto; aspect-ratio: 1; margin: auto; padding: 0; box-sizing: border-box; }
/* Conteúdo: o carrossel um pouco maior e o preço como pé do cartão (uma linha tracejada, como o recibo), para o meio
   não parecer um buraco */
.car { font-size: max(1.75rem, 18px); }
.tri__pe { margin-top: auto; padding-top: 1rem; border-top: 1px dashed var(--tracejado); }
.tri__c--conteudo .tri__txt { margin-bottom: 1.25rem; }
@media (max-width: 767.98px) {
  .car { font-size: 24px; }
  .tri__c--trava .selo { width: 11em; }
}
/* janela baixa: "até" ao lado do número, não em cima dele (em cima, ficava na linha dos rótulos 500 e 750 e a pessoa
   lia "500 até 750") */
@media (min-width: 900px) and (max-height: 700px) {
  .dial__read { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 0.5rem; align-items: baseline; }
  .dial__ate { justify-self: end; }
  .dial__un { grid-column: 1 / -1; justify-self: center; }
}
/* celular pequeno: o número grande não encosta nos rótulos de dentro do arco */
@media (max-width: 379.98px) { .dial__n { font-size: 46px; } }
@media (forced-colors: active) { .conta, .tri__c, .ig, .barra { border: 1px solid CanvasText; } }

/* 80-perguntas.css · Luvela site v3, versão C (split from version B's style.css; B's order kept inside the module) */
/* ======================================================================================== */
/* Perguntas                                                                                */
/* ======================================================================================== */
.faq__grid { display: grid; grid-template-columns: minmax(0, 23.75rem) minmax(0, 1fr); gap: 3rem; align-items: start; }
.faq__list { display: grid; gap: 0.625rem; }
.faq details { border-radius: 1.125rem; background: var(--branco); box-shadow: var(--fio-claro), var(--sombra-1); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; padding: 0.875rem 1.25rem; font-family: var(--font-serif); font-size: max(1.25rem, 14px); line-height: 1.25; color: var(--noite); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: 0.75rem; height: 0.75rem; flex: none; border-right: 0.125rem solid var(--noite); border-bottom: 0.125rem solid var(--noite); transform: rotate(45deg) translate(-0.1875rem, -0.1875rem); transition: transform 200ms var(--ease-ui); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-0.1875rem, -0.1875rem); }
.faq details p { padding: 0 1.25rem 1.125rem; font-size: max(1rem, 14px); line-height: 1.6; color: var(--texto); max-width: 40rem; }
@media (max-width: 1023.98px) { .faq__grid { grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 767.98px) { .faq summary { font-size: 18px; padding: 12px 16px; } .faq details p { padding: 0 16px 16px; } }
/* ######################################################################################## */
/* VERSÃO C                                                                                 */
/* ######################################################################################## */
/* a resposta abre com a altura mudando devagar (e a outra, que fecha, também: name="faq" deixa uma só aberta);
   onde o navegador não sabe animar ::details-content ela só abre, como antes */
.faq { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow-y: clip; opacity: 0; transition: block-size 420ms var(--ease-ui), opacity 280ms var(--ease-ui), content-visibility 420ms allow-discrete; }
.faq details[open]::details-content { block-size: auto; opacity: 1; }
.is-still .faq details::details-content { transition: none; }
.faq details { transition: box-shadow 200ms var(--ease-ui); }
.faq summary { cursor: pointer; border-radius: 1.125rem; }
.faq summary:focus-visible { outline-offset: -0.125rem; }
/* o sinal: uma órbita pontilhada com um +; aberta, vira um disco da noite com um − de luar */
.faq summary::after { width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; color: var(--noite); transform: none; box-shadow: none;
  background: linear-gradient(currentColor, currentColor) center / 0.625rem 0.125rem no-repeat, linear-gradient(currentColor, currentColor) center / 0.125rem 0.625rem no-repeat;
  outline: 1.5px dotted var(--linha-forte); outline-offset: -1.5px;
  transition: background-color 260ms var(--ease-ui), color 260ms var(--ease-ui), background-size 260ms var(--ease-ui), outline-color 260ms var(--ease-ui); }
.faq details[open] summary::after { transform: none; background-color: var(--noite); color: var(--luar); outline-color: var(--noite); background-size: 0.625rem 0.125rem, 0.125rem 0; }
@media (hover: hover) { .faq summary:hover::after { outline-color: var(--noite); } }
/* no computador o título fica parado ao lado enquanto as perguntas passam */
@media (min-width: 1024px) { .faq__grid > .head { position: sticky; top: calc(var(--nav-h) + 2.5rem); } }
@media (max-width: 767.98px) { .faq summary::after { width: 28px; height: 28px; } }

/* 90-comecar.css · Luvela site v3, versão C · Começar (o amanhecer)                                               */
/* ============================================================================================================== */
/* O papel das Perguntas termina na borda acesa do planeta (.com__limb) e volta a noite. Embaixo, um trilho        */
/* (.com__track) da altura da janela mais a corrida (--run): o palco (.com__stage, 100svh) fica preso nele         */
/* enquanto o planeta que viaja pousa na coroa do horizonte e se põe atrás do chão, e o âmbar cresce (os quadros   */
/* do Higgsfield, desenhados num canvas por 90-comecar.js). Nada sequestra a rolagem: é só position: sticky.       */
/* O palco é desenhado para caber inteiro na janela em todos os tamanhos: o texto e a caixa no céu, o horizonte    */
/* embaixo, e entre eles a faixa vazia por onde o planeta chega (.com__band). Assim o cabeçalho nunca fica em      */
/* cima da caixa do pedido enquanto a cena acontece.                                                             */
/* Medidas da imagem (amanhecer d/ e m/, iguais a horizonte-1): coroa do arco a 71,56% da altura, raio do planeta  */
/* 2,135 larguras. Se os quadros mudarem, medir de novo (fim/medir.cjs).                                          */
/* ============================================================================================================== */
.com {
  position: relative; background: var(--noite); color: var(--luar);
  --hz: clamp(3.5rem, 7.5vw, 7.5rem);                 /* a altura do arco de papel no topo */
  --sun: clamp(3.5rem, 7vw, 6.75rem);                 /* o planeta pousado (o mesmo de sunSize() no JS) */
  --chao-h: clamp(4.5rem, 15svh, 12rem);              /* quanto do chão aparece abaixo da coroa */
  --run: 80svh;                                       /* a corrida do palco preso: o planeta se põe, o âmbar cresce */
  --amb: 0;                                           /* 0..1, escrito pelo JS: quanto o amanhecer já acendeu */
  padding-top: var(--hz);
}
.com__limb { position: absolute; inset: 0 0 auto 0; z-index: 3; height: calc(var(--hz) * 2); pointer-events: none; background:
    radial-gradient(56% calc(var(--hz)) at 50% 0, var(--papel) 0 98.4%, rgba(242,241,236,0) 100%),
    radial-gradient(56.6% calc(var(--hz) + 0.3125rem) at 50% 0, #fff6e4 0 96%, rgba(246,237,216,0) 100%),
    radial-gradient(58% calc(var(--hz) + 2.125rem) at 50% 0, rgba(246,224,190,.30) 0 88%, rgba(246,224,190,0) 100%); }

/* ---------------------------------------------------------------- o trilho e o palco */
.com__track { position: relative; height: calc(100svh + var(--run)); }
.com__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; container-type: inline-size; }
.is-still .com__track { height: auto; }
.is-still .com__stage { position: relative; }

/* ---------------------------------------------------------------- o horizonte (quadros, planeta, chão) */
.com__horizon { position: absolute; inset: 0; z-index: 1; pointer-events: none; --fw: max(100cqw, 42.5rem); }
/* o quadro: 16:9, centrado, com a coroa do arco a --chao-h do pé do palco */
.com__frame { position: absolute; left: 50%; width: var(--fw); height: calc(var(--fw) * .5625); bottom: calc(var(--chao-h) - .16 * var(--fw)); translate: -50% 0;
  -webkit-mask: linear-gradient(transparent 0, #000 36%); mask: linear-gradient(transparent 0, #000 36%); }
.com__frame img { display: block; width: 100%; height: 100%; }
.com__dawn { opacity: 0; transition: opacity 400ms var(--ease-ui); }
.com__dawn.is-ready { opacity: 1; }
/* sem os quadros (ainda carregando, ou se falharem): a luz âmbar cresce em CSS sobre o pôster, o planeta e o chão */
.com__glow { position: absolute; left: 50%; bottom: var(--chao-h); z-index: 4; width: min(90cqw, 70rem); height: clamp(10rem, 34svh, 22rem); translate: -50% 50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245,162,58,.42), rgba(245,162,58,.12) 55%, rgba(245,162,58,0)); opacity: calc(var(--amb) * var(--glow-on, 1)); transition: opacity 400ms var(--ease-ui); }
.com.has-frames .com__glow, .is-still .com__glow { --glow-on: 0; }
.com__sun { position: absolute; z-index: 2; left: 0; top: 0; border-radius: 50%; overflow: hidden; opacity: 0; will-change: transform; box-shadow: 0 0 2.5rem -0.375rem rgba(245,162,58,.35); }
.com__sun img { position: absolute; width: 150.8%; height: 150.8%; max-width: none; left: -25.4%; top: -24.5%; transform: rotate(180deg); transform-origin: 50% 49.4%; }
/* o chão: um recorte pequeno do mesmo quadro, abaixo do arco, por cima do planeta que se põe */
.com__ground { position: absolute; z-index: 3; left: 0; top: 0; width: 0; height: 0; }
/* (direção de arte) as bordas do recorte se desfazem: ele é desenhado meio pixel fora do quadro de trás e, com a borda
   reta, aparecia um retângulo na luz do horizonte. O JS também o tira de cena quando o planeta já se pôs. */
.com__ground { -webkit-mask: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(#000 85%, transparent 100%); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(#000 85%, transparent 100%); mask-composite: intersect; }
.com__floor { position: absolute; inset: auto 0 0 0; z-index: 4; height: calc(var(--chao-h) * .8); background: linear-gradient(rgba(4,11,29,0), var(--chao)); }
.is-still .com__sun { opacity: 1; }
/* a faixa vazia do céu por onde o planeta que viaja chega (97-viagem.js lê [data-band="horizon"]) */
.com__band { position: absolute; left: 0; right: 0; bottom: calc(var(--chao-h) + var(--sun) * .72 + 0.5rem); height: 3rem; pointer-events: none; }

/* ---------------------------------------------------------------- o texto e a caixa, no céu */
.com__in { position: relative; z-index: 5; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
  padding-top: calc(var(--nav-h) + 1.5rem); padding-bottom: calc(var(--chao-h) + var(--sun) * .72 + 5rem); }
.com__greet { display: grid; grid-template-areas: 'lv' 'titulo' 'diz'; justify-items: center; gap: 1rem; text-align: center; }
.com__words { display: contents; }
.com__lv { grid-area: lv; position: relative; display: grid; place-items: center; width: 10rem; height: 10rem; }
/* um halo de luar atrás da Luvela, quieto (ela é a luz; isto só a separa do céu) */
.com__lv::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(246,237,216,.10), rgba(246,237,216,0)); pointer-events: none; }
.com__lv > .lv { position: relative; }
.com__title { grid-area: titulo; color: var(--luar); }
.com__said { grid-area: diz; display: flex; flex-direction: column; align-items: center; gap: 0.375rem; }
.com__bubble { width: fit-content; max-width: 26rem; padding: 0.625rem 0.9375rem; border-radius: 1.125rem; background: rgba(246,237,216,.09); box-shadow: inset 0 0 0 1px rgba(246,237,216,.13); color: var(--luar);
  font-size: max(1rem, 14px); font-weight: 500; line-height: 1.38; text-align: left; -webkit-backdrop-filter: blur(0.375rem); backdrop-filter: blur(0.375rem); }
.com__bubble:first-child { font-weight: 650; }
/* ela fala: os balões chegam um depois do outro quando o palco aparece (o estado pronto é o padrão) */
.is-motion .com:not(.is-said) .com__bubble { opacity: 0; transform: translateY(0.5rem) scale(.98); }
.is-motion .com__bubble { transition: opacity 400ms var(--ease-ui), transform 400ms var(--ease-ui); transform-origin: 0 100%; }
.is-motion .com__bubble--2 { transition-delay: 650ms; }

.chatbox { width: 100%; max-width: 36rem; text-align: left; }
.chatbox__card { position: relative; padding: 1.125rem 1.125rem 1rem; border-radius: 1.5rem; background: var(--branco); color: var(--noite);
  box-shadow: var(--fio-claro), 0 0 0 1px rgba(246,237,216,.18), var(--sombra-noite); }
/* o amanhecer bate na borda de baixo do cartão: a mesma luz âmbar do horizonte, que cresce com ele */
.chatbox__card::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -1px; height: 0.125rem; border-radius: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(245,162,58,0), rgba(255,196,120,.95) 50%, rgba(245,162,58,0)); box-shadow: 0 0.375rem 1.5rem 0.125rem rgba(245,162,58,.35); opacity: calc(.15 + .85 * var(--amb)); }
.chatbox__label { display: block; margin-bottom: 0.5rem; font-size: max(0.9375rem, 14px); font-weight: 650; color: var(--noite); }
.chatbox textarea { display: block; width: 100%; min-height: 6rem; padding: 0.875rem 1rem; border: 0; border-radius: 1rem; background: #f7f6f2; box-shadow: inset 0 0 0 1px rgba(11,21,48,.08);
  font: max(1rem, 16px)/1.5 var(--font-sans); color: var(--noite); resize: vertical; transition: box-shadow 200ms var(--ease-ui), background-color 200ms var(--ease-ui); }
.chatbox textarea::placeholder { color: var(--apagado); }
.chatbox textarea:focus { background: var(--branco); box-shadow: inset 0 0 0 1.5px var(--noite); }
.chatbox textarea:focus-visible { outline: 0.125rem solid var(--azul-texto); outline-offset: 0.125rem; }
.chatbox__sugs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.chatbox__sug { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.875rem; border: 0; border-radius: 62.4375rem; background: var(--papel); color: var(--noite); box-shadow: inset 0 0 0 1px rgba(11,21,48,.12);
  font-size: max(0.875rem, 14px); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color 150ms var(--ease-ui), transform 150ms var(--ease-ui); }
.chatbox__sug:hover { background: var(--canvas); }
.chatbox__sug:active { transform: scale(.98); }
.chatbox__sug:focus-visible { outline-color: var(--azul-texto); }
.chatbox__err { min-height: 1.4em; margin-top: 0.5rem; font-size: max(0.875rem, 14px); line-height: 1.4; color: #ffc7ad; text-align: center; }
.chatbox__err:empty { margin-top: 0; min-height: 0.5rem; }
.chatbox__acts { display: flex; align-items: center; justify-content: center; gap: 0.875rem; }
.chatbox__note { max-width: 28.75rem; margin: 0.75rem auto 0; font-size: max(0.875rem, 14px); line-height: 1.5; color: var(--escuro-apagado); text-align: center; }
.com__vitrine { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.875rem; }

/* ---------------------------------------------------------------- computador: duas colunas (a Luvela e a caixa) */
@media (min-width: 1024px) {
  .com__in { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 36rem); column-gap: clamp(3rem, 5.5vw, 6.5rem); align-content: center; justify-content: center; align-items: center; }
  .com__greet { justify-items: start; text-align: left; }
  .com__said { align-items: flex-start; }
  .com__bubble:first-child { border-bottom-left-radius: 0.375rem; }
  .com__bubble--2 { border-top-left-radius: 0.375rem; }
  .chatbox__acts { justify-content: flex-start; }
  .chatbox__note, .chatbox__err { margin-left: 0; text-align: left; }
  .com__vitrine { justify-content: flex-start; }
}
/* janela baixa (1263 × 577): a Luvela ao lado do título, menos ar, o chão mais baixo */
@media (min-width: 900px) and (max-height: 700px) {
  .com { --chao-h: clamp(3.75rem, 12svh, 6rem); --sun: clamp(3.25rem, 6vw, 5rem); }
  .com__in { padding-top: calc(var(--nav-h) + 1rem); padding-bottom: calc(var(--chao-h) + var(--sun) * .72 + 4.25rem); row-gap: 1rem; }
  .com__greet { grid-template-areas: 'lv titulo' 'lv diz'; grid-template-columns: auto 1fr; column-gap: 1.25rem; row-gap: 0.75rem; align-items: center; }
  .com__lv { zoom: .7; }
  .chatbox textarea { min-height: 4.75rem; }
  .chatbox__note { margin-top: 0.5rem; }
}
/* tablet: uma coluna só, centrada */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .com__in { gap: 1.25rem; }
  .com__lv { zoom: .8; }
}

/* ---------------------------------------------------------------- celular: compacto, para caber numa tela só */
@media (max-width: 767.98px) {
  .com { --chao-h: clamp(4rem, 11svh, 6rem); --sun: 3.5rem; --run: 70svh; }
  .com__in { justify-content: flex-start; gap: 1rem; padding-top: calc(var(--nav-h) + 1.25rem); padding-bottom: calc(var(--chao-h) + var(--sun) * .72 + 2rem); }
  .com__greet { width: 100%; grid-template-areas: 'titulo titulo' 'lv diz'; grid-template-columns: auto 1fr; justify-items: start; align-items: end; column-gap: 0.75rem; row-gap: 0.875rem; text-align: left; }
  .com__title { justify-self: center; text-align: center; }
  .com__lv { width: 10rem; height: 10rem; zoom: .4; }
  .com__lv::before { inset: -20%; }
  .com__said { align-items: flex-start; }
  .com__bubble { font-size: max(0.9375rem, 14px); padding: 0.5625rem 0.8125rem; }
  .com__bubble:first-child { border-bottom-left-radius: 0.375rem; }
  .com__bubble--2 { border-top-left-radius: 0.375rem; }
  .chatbox__card { padding: 0.875rem 0.875rem 0.75rem; border-radius: 1.25rem; }
  .chatbox textarea { min-height: 4.5rem; padding: 0.75rem 0.875rem; }
  /* as sugestões numa fileira que desliza com o dedo, cada uma com 44 px de toque */
  .chatbox__sugs { flex-wrap: nowrap; overflow-x: auto; margin: 0.625rem -0.875rem 0; padding: 0 0.875rem 0.125rem; scroll-padding-inline: 0.875rem; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent 0, #000 0.875rem, #000 calc(100% - 1.5rem), transparent); mask: linear-gradient(90deg, transparent 0, #000 0.875rem, #000 calc(100% - 1.5rem), transparent); }
  .chatbox__sugs::-webkit-scrollbar { display: none; }
  .chatbox__sug { min-height: 44px; flex: none; }
  .chatbox__note { margin-top: 0.5rem; }
}
@media (max-width: 379.98px), (max-width: 767.98px) and (max-height: 699.98px) {
  .com { --chao-h: 3.5rem; --sun: 3.25rem; }
  .com__in { gap: 0.75rem; padding-top: calc(var(--nav-h) + 0.75rem); padding-bottom: calc(var(--chao-h) + var(--sun) * .72 + 1.25rem); }
  .com__greet { row-gap: 0.625rem; }
  .com__bubble--2 { display: none; }
  .chatbox textarea { min-height: 3.75rem; }
  .chatbox__note { font-size: 14px; line-height: 1.4; }
}
/* o rabo: chão escuro depois do palco (altura escrita pelo JS, --tail), para o texto já ter saído da janela quando o
   rodapé aparece inteiro */
.com::after { content: ''; display: block; height: var(--tail, 0px); background: var(--chao); }
/* celular: a faixa por onde o planeta chega fica logo acima dele (no celular ele nasce em cima da coroa) */
@media (max-width: 767.98px) {
  .com__band { bottom: calc(var(--chao-h) + var(--sun) * .72 + 0.25rem); height: 1.5rem; }
}
@media (max-width: 379.98px), (max-width: 767.98px) and (max-height: 699.98px) {
  .com { --chao-h: 3rem; }
  .com__lv { zoom: .35; }
  .com__in { padding-top: calc(var(--nav-h) + 0.5rem); }
}

/* 95-rodape.css · Luvela site v3, versão C · o rodapé                                                            */
/* ============================================================================================================== */
/* A mesma noite do chão do horizonte (--chao). Em cima: a marca e os links; uma linha fina; o copyright e a       */
/* assinatura (as cinco fases da Luvela, 20 px, paradas). Embaixo, o nome grande, quase apagado, cortado pela      */
/* borda da página. Quieto: nada aqui se mexe.                                                                    */
/* ============================================================================================================== */
.foot { position: relative; overflow: hidden; background: var(--chao); color: var(--luar); padding-top: 2.5rem; }
.foot__in { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.75rem; padding-bottom: 0.5rem; }
.foot__top { display: flex; flex-direction: column; gap: 1.5rem; }
.foot__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.foot__home { display: inline-flex; align-items: center; min-height: 2.75rem; margin-left: -0.375rem; padding: 0 0.375rem; border-radius: 0.625rem; color: var(--luar); }
.foot__lockup { width: 8.75rem; height: auto; fill: currentColor; }
.foot__brand p { font-size: max(0.9375rem, 14px); line-height: 1.5; color: var(--escuro-apagado); }
.foot__nav { display: flex; flex-direction: column; gap: 0.25rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 0.25rem; margin-left: -0.75rem; }
.foot__links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; border-radius: 62.4375rem; font-size: max(0.9375rem, 14px); font-weight: 600; color: var(--luar); text-decoration: none; transition: background-color 150ms var(--ease-ui), color 150ms var(--ease-ui); }
.foot__links a:hover { background: rgba(246,237,216,.08); }
.foot__links--conta a { color: var(--escuro-apagado); }
.foot__links--conta a:hover { color: var(--luar); }
.foot__links a.foot__criar { color: var(--luar); box-shadow: inset 0 0 0 1px rgba(246,237,216,.22); margin-left: 0.25rem; }
.foot__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(246,237,216,.09); }
.foot__copy { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; color: var(--escuro-apagado); }
/* a assinatura: as cinco fases, do crescente à cheia, juntas como uma palavra */
.foot__sig { display: flex; align-items: center; gap: 0.625rem; min-height: 1.5rem; }
.foot__sig .lv { flex: none; }
.foot__name { position: relative; z-index: 1; display: block; width: calc(100% - 2 * var(--gutter)); max-width: 75rem; height: auto; margin: 1.5rem auto -6%; }
.foot__name use { fill: rgba(246,237,216,.045); }

@media (min-width: 768px) {
  .foot { padding-top: 3.5rem; }
  .foot__top { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 2.5rem; }
  .foot__brand { flex-direction: row; align-items: center; gap: 1.25rem; }
  .foot__nav { align-items: flex-end; }
  .foot__links { justify-content: flex-end; margin-left: 0; margin-right: -0.75rem; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .foot__brand { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* 97-viagem.css · Luvela site v3, versão C (split from version B's style.css; B's order kept inside the module) */
/* ======================================================================================== */
/* O planeta que viaja                                                                      */
/* ======================================================================================== */
.traveler { position: fixed; left: 0; top: 0; z-index: 30; width: 100px; height: 100px; pointer-events: none; visibility: hidden; will-change: transform; contain: layout; }
.traveler.is-on { visibility: visible; }
.traveler__sym { position: absolute; left: 0; top: 7.7%; width: 100%; height: auto; fill: var(--noite); opacity: var(--vs, 1); }
.traveler__img { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; opacity: var(--vi, 0); box-shadow: 0 18px 40px -18px rgba(11,21,48,.55); }
.traveler__img img, .disc img { position: absolute; width: 150.8%; height: 150.8%; max-width: none; left: -25.4%; top: -24.5%; }
.traveler__dots { display: none; }
.is-still .traveler { display: none; }
.traveler { z-index: 45; }
/* O planeta que viaja: com sombra de objeto, do tamanho que se lê na margem. */
.traveler__img { box-shadow: 0 10px 22px -10px rgba(11,21,48,.6); }
/* Começar: o planeta pousa com a borda acesa para cima (vira 180° na descida), como um nascer de planeta. */
.traveler__img img { transform: rotate(var(--rot, 0deg)); transform-origin: 50% 49.4%; }

/* 99-presenca.css · Luvela site v3, versão C · a presença da Luvela (DIRECAO.md 3.3)                               */
/* ============================================================================================================== */
/* A Luvela é o planeta pequeno do herói: uma esfera de noite, a borda de luz quente e uma brasa âmbar por dentro. */
/* Sem antena, sem boca, sem rosto de tela. Ela vive só pela luz.                                                  */
/*                                                                                                                */
/* O componente: <span class="lv" data-tamanho="28" aria-hidden="true"></span>                                    */
/*   data-tamanho   20, 28, 56, 120, 160 (pixels de desenho; qualquer número serve). Vira rem: cresce com o palco. */
/*   data-estado    repouso | atenta | falando | pensando | feliz   (99-presenca.js: window.Luvela.estado(el, nome)) */
/*   data-fase      1..5: uma fase parada do planeta (a assinatura do rodapé); sem brasa e sem movimento.          */
/*   data-fundo     noite | papel: sobre o que ela está (o JS descobre sozinho pelo fundo do elemento pai).        */
/*   data-variante  luz | olhar | lua: escrito pelo JS (?luvela=...), ou fixo com data-variante-fixa.              */
/* Sem JavaScript o .lv já é a esfera com a borda e a brasa (um background só). O JS acrescenta as camadas:        */
/*   .lv__halo (a luz que vaza por baixo), .lv__corpo, .lv__luz (a borda acesa; é ela que gira em "pensando"),     */
/*   .lv__cheia (a lua cheia de "feliz"), .lv__olhos (só na variante olhar), .lv__brasa, .lv__onda (o anel da fala). */
/* Três tamanhos óticos, como numa fonte: .lv--p (até 34 px na tela: borda grossa, brasa grande), .lv--m, .lv--g.  */
/* Tudo o que anda é transform e opacity de elementos HTML; só anda com .lv-vista (está na tela) e sem .lv-pausa.  */
/* ============================================================================================================== */
.lv {
  --lv-t: 28; --t: calc(var(--lv-t) * 0.0625rem); --lx: 0; --ly: 0;
  position: relative; display: inline-block; flex: none; width: var(--t); height: var(--t); border-radius: 50%;
  vertical-align: middle; line-height: 0; isolation: isolate; -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(17% 17% at 50% 59%, #ffe6ad 0 16%, rgba(245,150,50,.75) 44%, rgba(240,120,30,0) 100%),
    radial-gradient(57% 57% at 51% 43%, rgba(255,214,150,0) 82%, rgba(206,132,64,.3) 90%, rgba(255,232,192,.96) 97.6%, #fffaf0 100%),
    radial-gradient(120% 120% at 34% 22%, #18244f 0, #0d1634 46%, #070c20 100%);
}
.lv[data-tamanho='20'] { --lv-t: 20; }
.lv[data-tamanho='56'] { --lv-t: 56; }
.lv[data-tamanho='120'] { --lv-t: 120; }
.lv[data-tamanho='160'] { --lv-t: 160; }
.lv.lv--viva { background: none; }
.lv > span, .lv > svg { position: absolute; display: block; pointer-events: none; }

/* ---------------------------------------------------------------- as camadas (variantes luz e olhar) */
.lv__halo { inset: -40%; border-radius: 50%; opacity: .78; transform: rotate(9deg); background: radial-gradient(closest-side at 50% 53%, rgba(246,176,92,.5) 0 53%, rgba(246,176,92,.22) 60%, rgba(246,176,92,.08) 67%, rgba(246,176,92,0) 77%); }
.lv[data-fundo='papel'] .lv__halo { background: radial-gradient(closest-side at 50% 53%, rgba(240,150,60,.42) 0 53%, rgba(240,150,60,.16) 60%, rgba(240,150,60,.05) 67%, rgba(240,150,60,0) 76%); }
/* o corpo: quase a cor da noite, um tom frio em cima à esquerda (a esfera continua esfera) e nada de brilho de plástico */
.lv__corpo { inset: 0; border-radius: 50%; background: radial-gradient(57.2% 57.2% at 54% 56%, rgba(150,176,255,0) 93.5%, rgba(150,176,255,.2) 100%), radial-gradient(120% 120% at 34% 22%, #18244f 0, #0d1634 46%, #070c20 100%); }
.lv[data-fundo='papel'] .lv__corpo { box-shadow: 0 calc(var(--t) * .03) calc(var(--t) * .06) rgba(11,21,48,.22), 0 calc(var(--t) * .14) calc(var(--t) * .26) calc(var(--t) * -.1) rgba(11,21,48,.5); }
.lv[data-fundo='noite'] .lv__corpo { background: radial-gradient(57.2% 57.2% at 54% 56%, rgba(150,176,255,0) 92%, rgba(150,176,255,.4) 100%), radial-gradient(120% 120% at 34% 22%, #131d42 0, #0a1230 46%, #060a1c 100%); }
.lv--p[data-fundo='noite'] .lv__corpo { background: radial-gradient(57.2% 57.2% at 54% 56%, rgba(150,176,255,0) 84%, rgba(150,176,255,.6) 100%), radial-gradient(120% 120% at 34% 22%, #1b2858 0, #0c1536 48%, #060a1c 100%); }
.lv__luz { inset: 0; border-radius: 50%; transform: rotate(9deg); }
.lv--g .lv__luz { background: radial-gradient(55% 55% at 50% 45%, rgba(255,206,140,0) 82%, rgba(176,98,40,.2) 88%, rgba(206,132,64,.44) 92.6%, rgba(236,172,100,.74) 96%, rgba(252,216,160,.94) 98%, #fff3da 99.2%, #fffaf0 100%); }
.lv--m .lv__luz { background: radial-gradient(57% 57% at 50% 43%, rgba(255,206,140,0) 79%, rgba(186,108,46,.28) 86.5%, rgba(230,160,88,.72) 93%, rgba(255,228,184,.98) 97.2%, #fffaf0 100%); box-shadow: inset 0 -1px 0.5px -0.25px rgba(255,244,222,.9); }
.lv--p .lv__luz { background: radial-gradient(64% 64% at 50% 36%, rgba(255,214,150,0) 72%, rgba(214,140,70,.45) 83%, rgba(250,204,136,.94) 92%, #fff3da 97%, #fffaf0 100%); box-shadow: inset 0 -1.25px 0.5px -0.25px #fff6e2; }
/* a lua cheia de "feliz": uma esfera acesa (mais clara embaixo, onde a luz nasce), não um disco chapado */
.lv__cheia { inset: 0; border-radius: 50%; opacity: 0; background: radial-gradient(95% 95% at 44% 78%, #fffaf0 0, #f8e9c9 38%, #e7c589 78%, #c99a5c 100%); box-shadow: 0 0 calc(var(--t) * .22) rgba(246,190,110,.55); transition: opacity 400ms var(--ease-ui); }
.lv[data-fundo='papel'] .lv__cheia { box-shadow: 0 0 0 1px rgba(160,110,50,.25), 0 0 calc(var(--t) * .2) rgba(240,160,70,.45); }
.lv__brasa { --b: calc(var(--t) * .2); left: 50%; top: 59%; width: var(--b); height: var(--b); margin: calc(var(--b) / -2) 0 0 calc(var(--b) / -2); border-radius: 50%; translate: calc(var(--lx) * var(--t)) calc(var(--ly) * var(--t)); transition: translate 320ms var(--ease-ui), scale 320ms var(--ease-ui), opacity 320ms var(--ease-ui); background: radial-gradient(closest-side, #fffbec 0 7%, #ffd98c 15%, rgba(248,160,58,.9) 28%, rgba(240,120,30,.36) 52%, rgba(240,120,30,0) 100%); }
.lv--m .lv__brasa { --b: calc(var(--t) * .32); background: radial-gradient(closest-side, #fffbec 0 9%, #ffd98c 19%, rgba(248,160,58,.92) 34%, rgba(240,120,30,.4) 58%, rgba(240,120,30,0) 100%); }
.lv--p .lv__brasa { --b: calc(var(--t) * .46); top: 56%; background: radial-gradient(closest-side, #fffbec 0 13%, #ffd98c 26%, rgba(248,160,58,.95) 42%, rgba(240,120,30,.45) 66%, rgba(240,120,30,0) 100%); }
.lv__onda { inset: 0; border-radius: 50%; opacity: 0; box-shadow: inset 0 0 0 max(1px, calc(var(--t) * .014)) rgba(255,206,138,.9), 0 0 calc(var(--t) * .08) rgba(246,176,92,.45); }
.lv[data-fundo='papel'] .lv__onda { box-shadow: inset 0 0 0 max(1px, calc(var(--t) * .014)) rgba(226,132,40,.85), 0 0 calc(var(--t) * .08) rgba(240,150,60,.35); }

/* ---------------------------------------------------------------- a variante olhar: dois olhos de luz, sem boca */
.lv__olhos { inset: 0; transition: translate 320ms var(--ease-ui); translate: calc(var(--lx) * var(--t) * .45) calc(var(--ly) * var(--t) * .45); }
.lv__olhos > span { position: absolute; top: 41%; width: 8.5%; height: 13.5%; margin: -6.75% 0 0 -4.25%; border-radius: 50%; background: radial-gradient(closest-side, #fffaf0 0 34%, rgba(255,222,160,.85) 58%, rgba(246,176,92,0) 100%); }
.lv__olhos > span:first-child { left: 39.5%; }
.lv__olhos > span:last-child { left: 60.5%; }
.lv--m .lv__olhos > span { width: 12%; height: 18%; margin: -9% 0 0 -6%; top: 42%; background: radial-gradient(closest-side, #fffaf0 0 42%, rgba(255,222,160,.9) 66%, rgba(246,176,92,0) 100%); }
.lv--m .lv__olhos > span:first-child { left: 37.5%; }
.lv--m .lv__olhos > span:last-child { left: 62.5%; }
.lv--p .lv__olhos > span { width: 19%; height: 27%; margin: -13.5% 0 0 -9.5%; top: 43%; background: radial-gradient(closest-side, #fffaf0 0 50%, rgba(255,226,170,.92) 74%, rgba(246,176,92,0) 100%); }
.lv--p .lv__olhos > span:first-child { left: 34%; }
.lv--p .lv__olhos > span:last-child { left: 66%; }
/* com olhos, a brasa vai para perto da borda acesa (embaixo dos olhos ela viraria uma boca) */
.lv[data-variante='olhar'] .lv__brasa { --b: calc(var(--t) * .15); left: 68%; top: 74%; }
.lv[data-variante='olhar'].lv--m .lv__brasa { --b: calc(var(--t) * .2); left: 69%; top: 74%; }
.lv[data-variante='olhar'].lv--p .lv__brasa { display: none; }

/* ---------------------------------------------------------------- a variante lua: o crescente da marca, a brasa na ponta */
.lv__lua { inset: 0; width: 100%; height: 100%; overflow: visible; }
.lv[data-fundo='papel'] .lv__lua-corpo { fill: var(--noite); }   /* na noite o JS põe o degradê de luar (fill="url(#lvLuar)") */
.lv[data-fundo='noite'] .lv__lua { filter: drop-shadow(0 0 calc(var(--t) * .05) rgba(246,180,96,.6)); }
/* a estrela gira em volta da lua em "pensando": o centro do giro é o centro do disco */
.lv[data-variante='lua'] .lv__brasa { --b: calc(var(--t) * .2); left: 86.5%; top: 8.5%; transform-origin: calc(var(--b) / 2 - var(--t) * .365) calc(var(--b) / 2 + var(--t) * .415); translate: calc(var(--lx) * var(--t) * .4) calc(var(--ly) * var(--t) * .4); background: radial-gradient(closest-side, #fffbec 0 12%, #ffd27a 24%, rgba(245,150,50,.9) 40%, rgba(240,120,30,.4) 62%, rgba(240,120,30,0) 100%); }
.lv[data-variante='lua'].lv--m .lv__brasa { --b: calc(var(--t) * .27); }
.lv[data-variante='lua'].lv--p .lv__brasa { --b: calc(var(--t) * .4); left: 84%; top: 12%; }
.lv[data-variante='lua'][data-fundo='papel'] .lv__brasa { background: radial-gradient(closest-side, #ffe9b8 0 10%, #f5a23a 24%, rgba(226,120,30,.95) 42%, rgba(226,120,30,.4) 64%, rgba(226,120,30,0) 100%); }
.lv[data-variante='lua'] .lv__cheia { box-shadow: 0 0 calc(var(--t) * .16) rgba(246,190,110,.5); }

/* ---------------------------------------------------------------- as cinco fases (a assinatura): paradas */
.lv__fase { inset: 0; width: 100%; height: 100%; overflow: visible; }
.lv__fase-corpo { fill: #0f1a3c; }
.lv[data-fundo='noite'] .lv__fase-corpo { fill: #131d44; stroke: rgba(157,184,255,.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lv__fase-luz { fill: var(--luar); }
.lv[data-fundo='noite'] .lv__fase { filter: drop-shadow(0 0 calc(var(--t) * .09) rgba(246,180,96,.3)); }
.lv[data-fase] { animation: none !important; }

/* ---------------------------------------------------------------- os estados, parados (valem também com menos movimento) */
.lv[data-estado='atenta'] .lv__halo, .lv.lv-perto .lv__halo { opacity: 1; scale: 1.14; }
.lv[data-estado='atenta'] .lv__brasa, .lv.lv-perto .lv__brasa { scale: 1.22; }
.lv[data-estado='falando'] .lv__brasa { scale: 1.3; }
.lv[data-estado='falando'] .lv__halo { opacity: 1; }
.lv[data-estado='falando'] .lv__onda { opacity: .5; scale: 1.2; }
.lv[data-estado='pensando'] .lv__luz, .lv[data-estado='pensando'] .lv__halo { transform: rotate(128deg); }
.lv[data-estado='pensando'] .lv__brasa { scale: .78; opacity: .75; }
.lv[data-estado='pensando'] .lv__olhos { translate: calc(var(--t) * .03) calc(var(--t) * -.035); }
.lv[data-variante='lua'][data-estado='pensando'] .lv__brasa { scale: 1; opacity: 1; rotate: 128deg; }
.lv[data-estado='feliz'] .lv__cheia { opacity: .93; }
.lv[data-estado='feliz'] .lv__halo { opacity: 1; scale: 1.2; }
.lv[data-estado='feliz'] .lv__brasa { opacity: 0; }   /* uma brasa no meio da lua cheia viraria uma gema */
.lv[data-variante='lua'][data-estado='feliz'] .lv__brasa { opacity: 1; scale: 1.3; }
/* olhar, feliz: os olhos fecham num arco (continua sem boca) */
.lv[data-estado='feliz'] .lv__olhos > span { background: none; border-radius: 50% 50% 0 0 / 100% 100% 0 0; box-shadow: inset 0 max(1.5px, calc(var(--t) * .022)) 0 0 #8a5522; height: 7.5%; }
.lv--m[data-estado='feliz'] .lv__olhos > span { height: 10%; }
.lv--p[data-estado='feliz'] .lv__olhos > span { height: 15%; box-shadow: inset 0 1.5px 0 0 #7a4a1c; }
.lv__halo, .lv__luz { transition: opacity 420ms var(--ease-ui), scale 420ms var(--ease-ui); }

/* ---------------------------------------------------------------- os estados, vivos */
.is-motion .lv.lv-vista[data-estado='repouso'] .lv__brasa { animation: lv-respira 4600ms ease-in-out infinite; }
.is-motion .lv.lv-vista[data-estado='repouso'] .lv__halo { animation: lv-halo 4600ms ease-in-out infinite; }
.is-motion .lv.lv-vista[data-estado='atenta'] .lv__brasa { animation: lv-respira 2400ms ease-in-out infinite; }
.is-motion .lv.lv-vista.lv-perto .lv__brasa, .is-motion .lv.lv-vista.lv-perto .lv__halo { animation: none; }
.is-motion .lv.lv-vista[data-estado='falando'] .lv__brasa { animation: lv-fala 2900ms var(--ease-ui) infinite; }
.is-motion .lv.lv-vista[data-estado='falando'] .lv__onda { animation: lv-onda 2900ms var(--ease-ui) infinite; }
.is-motion .lv.lv-vista[data-estado='pensando'] .lv__luz, .is-motion .lv.lv-vista[data-estado='pensando'] .lv__halo { animation: lv-gira 2600ms var(--ease-morph) infinite; }
.is-motion .lv.lv-vista[data-estado='pensando'] .lv__brasa { animation: lv-pensa 1300ms ease-in-out infinite; }
.is-motion .lv.lv-vista[data-variante='lua'][data-estado='pensando'] .lv__brasa { animation: lv-varre 2600ms var(--ease-morph) infinite; }
.is-motion .lv.lv-vista[data-estado='feliz'] .lv__cheia { animation: lv-cheia 1700ms var(--ease-ui) 1 both; }
.is-motion .lv.lv-vista[data-estado='feliz'] .lv__brasa { animation: lv-brasa-feliz 1700ms var(--ease-ui) 1 both; }
.is-motion .lv.lv-vista[data-variante='lua'][data-estado='feliz'] .lv__brasa { animation: lv-pulso-brasa 900ms var(--ease-ui) 1; }
.is-motion .lv.lv-vista[data-variante='olhar'][data-estado='feliz'] .lv__olhos > span { animation: lv-olhos-feliz 1700ms var(--ease-ui) 1 both; }
.is-motion .lv.lv-vista[data-variante='olhar'] .lv__olhos > span { animation: lv-pisca 6100ms linear infinite; animation-delay: var(--lv-atraso, -2s); }
.is-motion .lv.lv-vista[data-variante='olhar'][data-estado='pensando'] .lv__olhos > span { animation-duration: 3100ms; }
.lv-pausa .lv *, .lv-pausa .lv { animation-play-state: paused !important; }
@keyframes lv-respira { 0%, 100% { scale: 1; opacity: .84; } 50% { scale: 1.16; opacity: 1; } }
@keyframes lv-halo { 0%, 100% { opacity: .7; scale: 1; } 50% { opacity: 1; scale: 1.05; } }
@keyframes lv-fala { 0%, 22%, 30%, 52%, 60%, 84%, 100% { scale: 1.02; opacity: .9; } 7% { scale: 1.5; opacity: 1; } 37% { scale: 1.42; opacity: 1; } 67% { scale: 1.5; opacity: 1; } }
@keyframes lv-onda { 0%, 30%, 60%, 100% { scale: 1; opacity: 0; } 4%, 34%, 64% { scale: 1.02; opacity: .75; } 27%, 57%, 90% { scale: 1.46; opacity: 0; } }
@keyframes lv-gira { from { transform: rotate(9deg); } to { transform: rotate(369deg); } }
@keyframes lv-varre { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes lv-pensa { 0%, 100% { scale: .74; opacity: .62; } 50% { scale: .9; opacity: .9; } }
@keyframes lv-cheia { 0% { opacity: 0; } 22% { opacity: .96; } 62% { opacity: .9; } 100% { opacity: 0; } }
@keyframes lv-brasa-feliz { 0% { opacity: 1; scale: 1; } 14%, 66% { opacity: 0; scale: 1; } 100% { opacity: 1; scale: 1.18; } }
@keyframes lv-olhos-feliz { 0%, 64% { box-shadow: inset 0 max(1.5px, calc(var(--t) * .022)) 0 0 #8a5522; } 100% { box-shadow: inset 0 max(1.5px, calc(var(--t) * .022)) 0 0 #fff0d2; } }
@keyframes lv-pisca { 0%, 95.5%, 100% { scale: 1 1; } 97.6% { scale: 1 .12; } }
/* uma pulsada só (Luvela.pulsa: o toque no selo, o planeta que pousa) */
.is-motion .lv.lv-pulso .lv__onda { animation: lv-pulso 900ms var(--ease-ui) 1; }
.is-motion .lv.lv-pulso .lv__brasa { animation: lv-pulso-brasa 900ms var(--ease-ui) 1; }
@keyframes lv-pulso { 0% { scale: 1; opacity: .8; } 100% { scale: 1.5; opacity: 0; } }
@keyframes lv-pulso-brasa { 0%, 100% { scale: 1; } 30% { scale: 1.5; } }

/* ============================================================================================================== */
/* O botão flutuante e o painel da visita guiada                                                                  */
/* .presenca é fixa no canto de baixo e anda só por transform (--py: quanto ela subiu para não cobrir um botão).  */
/* ============================================================================================================== */
.presenca { --py: 0px; position: fixed; right: max(1.125rem, env(safe-area-inset-right)); bottom: calc(1.125rem + env(safe-area-inset-bottom)); z-index: 35; width: 3.75rem; height: 3.75rem; transform: translate3d(0, var(--py), 0); transition: transform 320ms var(--ease-ui); pointer-events: none; }
.presenca.is-salto { transition: none; }
.assist { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; opacity: 0; transform: translateY(0.625rem) scale(.9); pointer-events: none; visibility: hidden; transition: opacity 200ms var(--ease-ui), transform 240ms var(--ease-ui), visibility 0s linear 240ms; -webkit-tap-highlight-color: transparent; }
.assist.is-shown { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 200ms var(--ease-ui), transform 240ms var(--ease-ui), visibility 0s; }
.assist:active { transform: scale(.96); }
/* quem sobe é .presenca (--py), que mede o que está embaixo; um empurrão de outro módulo no botão somaria duas vezes */
.presenca > .assist { translate: none !important; }
.assist:focus-visible { outline: 0.125rem solid var(--azul-texto); outline-offset: 0.25rem; border-radius: 50%; box-shadow: 0 0 0 0.25rem #fff; }   /* anel branco e azul: aparece no papel e na noite */
/* um fio de luar em volta: na noite a esfera continua um objeto; no papel não se vê */
.assist::before { content: ''; position: absolute; inset: 0.0625rem; border-radius: 50%; box-shadow: 0 0 0 1px rgba(246,237,216,.16); pointer-events: none; }
.assist[data-variante='lua'] { background: radial-gradient(130% 130% at 36% 26%, #1d2a58 0, #0f1a3c 42%, #080e24 100%); box-shadow: 0 0.125rem 0.25rem rgba(11,21,48,.22), 0 0.75rem 1.5rem -0.5rem rgba(11,21,48,.5); }
.assist[data-variante='lua'] .lv { --lv-t: 34; }
.presenca__rotulo { position: absolute; right: calc(100% + 0.625rem); top: 50%; display: inline-flex; align-items: center; height: 2.25rem; padding: 0 0.875rem; border-radius: 62.4375rem; background: var(--noite); color: var(--luar); font-size: max(0.875rem, 14px); font-weight: 600; line-height: 1; white-space: nowrap; box-shadow: var(--fio-noite), var(--sombra-2); opacity: 0; transform: translate(0.375rem, -50%); transition: opacity 200ms var(--ease-ui), transform 240ms var(--ease-ui); pointer-events: none; }
.presenca.is-rotulo .presenca__rotulo { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) { .presenca:not(.is-aberta) .assist.is-shown:hover ~ .presenca__rotulo { opacity: 1; transform: translate(0, -50%); } }
.presenca:not(.is-aberta) .assist.is-shown:focus-visible ~ .presenca__rotulo { opacity: 1; transform: translate(0, -50%); }

.presenca__painel { position: absolute; right: 0; bottom: calc(100% + 0.75rem); width: min(21rem, calc(100vw - 2rem)); max-height: calc(100svh - 6.5rem - env(safe-area-inset-bottom)); overflow: auto; overscroll-behavior: contain; padding: 1.5rem 1.25rem 1.125rem; border-radius: 1.5rem; background: radial-gradient(120% 70% at 50% 0, #1a2860 0, rgba(20,33,90,0) 70%), var(--noite); color: var(--luar); text-align: center; box-shadow: var(--fio-noite), 0 0.125rem 0.25rem rgba(2,6,20,.4), 0 1.75rem 3.5rem -1rem rgba(2,6,20,.6); pointer-events: auto; transform-origin: calc(100% - 1.875rem) 100%; opacity: 0; transform: translateY(0.5rem) scale(.96); transition: opacity 220ms var(--ease-ui), transform 320ms var(--ease-ui); }
.presenca.is-aberta .presenca__painel { opacity: 1; transform: none; }
.presenca__painel:focus { outline: none; }
.presenca__painel :focus-visible { outline-color: var(--escuro-link); }
.presenca__fechar { position: absolute; right: 0.375rem; top: 0.375rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--escuro-apagado); cursor: pointer; }
.presenca__fechar:hover { color: var(--luar); background: rgba(246,237,216,.06); }
.presenca__fechar svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.presenca__planeta { display: block; margin: 0.5rem auto 1.625rem; }
.presenca__oi { font-family: var(--font-serif); font-size: max(1.5rem, 14px); line-height: 1.15; letter-spacing: -.01em; color: var(--luar); }
.presenca__q { margin-top: 0.5rem; font-size: max(0.9375rem, 14px); line-height: 1.45; color: var(--escuro-apagado); text-wrap: balance; }
.presenca__chips { display: grid; gap: 0.5rem; margin-top: 1.125rem; }
.presenca__chip { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2.875rem; min-height: max(2.875rem, 44px); padding: 0 1rem 0 1.125rem; border-radius: 62.4375rem; background: rgba(246,237,216,.06); box-shadow: inset 0 0 0 1px rgba(246,237,216,.14); color: var(--luar); font-size: max(0.9375rem, 14px); font-weight: 600; line-height: 1; text-decoration: none; transition: background-color 150ms var(--ease-ui), transform 150ms var(--ease-ui); }
.presenca__chip::after { content: ''; width: 0.4375rem; height: 0.4375rem; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); opacity: .7; }
.presenca__chip:active { transform: scale(.98); }
@media (hover: hover) { .presenca__chip:hover { background: rgba(246,237,216,.12); } .presenca__chip--luar:hover { background: #fff8e6; } }
.presenca__chip--luar { background: var(--luar); color: var(--noite); box-shadow: none; }
.presenca__pausa { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 0.375rem; padding: 0 0.75rem; border: 0; background: none; color: var(--escuro-apagado); font-size: max(0.8125rem, 12px); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25rem; cursor: pointer; }
.presenca__pausa:hover { color: var(--luar); }
.is-still .presenca__pausa { display: none; }
/* a chegada do texto, um item a cada 50 ms */
.is-motion .presenca.is-aberta .presenca__painel > :not(.presenca__fechar), .is-motion .presenca.is-aberta .presenca__chips > * { animation: presenca-entra 420ms var(--ease-ui) both; }
.is-motion .presenca.is-aberta .presenca__oi { animation-delay: 60ms; }
.is-motion .presenca.is-aberta .presenca__q { animation-delay: 110ms; }
.is-motion .presenca.is-aberta .presenca__chips > :nth-child(1) { animation-delay: 160ms; }
.is-motion .presenca.is-aberta .presenca__chips > :nth-child(2) { animation-delay: 210ms; }
.is-motion .presenca.is-aberta .presenca__chips > :nth-child(3) { animation-delay: 260ms; }
.is-motion .presenca.is-aberta .presenca__pausa { animation-delay: 310ms; }
@keyframes presenca-entra { from { opacity: 0; transform: translateY(0.5rem); } }
@media (max-width: 767.98px) { .presenca { right: max(12px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); } }
@media (max-height: 480px) { .presenca__planeta { --lv-t: 72 !important; margin: 0 auto 1rem; } }

/* ---------------------------------------------------------------- bastidores (só existe com ?bastidores no endereço) */
.bastidores { position: fixed; left: 0.75rem; bottom: 0.75rem; z-index: 60; display: flex; align-items: center; gap: 0.25rem; padding: 0.25rem; border-radius: 62.4375rem; background: var(--noite); box-shadow: var(--fio-noite), var(--sombra-2); font-size: max(0.8125rem, 12px); }
.bastidores__nome { padding: 0 0.5rem 0 0.75rem; font-family: var(--font-mono); font-size: max(0.75rem, 12px); letter-spacing: .06em; text-transform: uppercase; color: var(--escuro-apagado); }
.bastidores button { min-width: 44px; min-height: 2.25rem; padding: 0 0.875rem; border: 0; border-radius: 62.4375rem; background: none; color: var(--luar); font-weight: 600; cursor: pointer; }
.bastidores button[aria-pressed='true'] { background: var(--luar); color: var(--noite); }
.bastidores :focus-visible { outline-color: var(--escuro-link); }
@media (max-width: 767.98px) { .bastidores__nome { display: none; } .bastidores button { min-height: 44px; } }

/* ---------------------------------------------------------------- quem ainda escreve o robô da versão B */
/* [data-robot] vira .lv pelo JS (o robô foi aposentado); estes tamanhos valem até cada seção trocar a marcação.  */
.robot { display: inline-block; flex: none; }
.robot--badge { --lv-t: 40; }
.robot--hello { --lv-t: 56; }
.robot--sig { --lv-t: 20; }
@media (forced-colors: active) { .lv__corpo, .lv__fase-corpo { forced-color-adjust: none; } .assist { border: 1px solid ButtonText; } }