/* ==========================================================
   Calendoctor - landing
   ----------------------------------------------------------
   Fonte de verdade da identidade: lib/core/theme/calendoctor_tokens.dart
   e lib/core/widgets/{glass_surface,calendoctor_backdrop,page_header}.dart.
   O site é o mesmo sistema do app traduzido para CSS: fundo claro com
   brilhos, superfícies de vidro tingidas pelo módulo dono da seção, e a
   paleta da marca - a mesma que pinta as células do logo.
   ========================================================== */

@font-face{
  font-family:"Outfit";
  src:url("../assets/fonts/Outfit-VariableFont_wght.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ---- Paleta oficial da marca (CalendoctorTokens) ----
     Estes hexes pintam: fundo, tingimento, gradiente, preenchimento.
     Nenhum deles é tinta de texto. Para texto existe a versão rebaixada. */
  --brand-teal:#45B7A0;
  --brand-blue:#00C0F8;
  --brand-purple:#C792DF;
  --brand-orange:#FFA45F;
  --brand-pink:#F194B4;
  --brand-yellow:#E7C438;
  --brand-red:#DB504A;
  --brand-beige:#D7B49E;
  --brand-green:#00AC86;
  --brand-navy:#3D5A80;

  /* As 3 primeiras cores de `CalendoctorTokens.eventColors`, na mesma ordem:
     é o que os cartões de demonstração usam para colorir um evento sem
     precisar de um local real por trás. */
  --event-1:var(--brand-teal);
  --event-2:var(--brand-blue);
  --event-3:var(--brand-green);

  /* O teal da marca com luz removida até virar texto (5,3:1 no branco). */
  --seed:#2D7768;

  /* ---- Superfícies ---- */
  --scaffold:#F3F7FD;
  --scaffold-warm:#F8F6FC;
  --dark:#121725;
  --dark-surface:#1D2536;
  --dark-raised:#2A3448;

  /* ---- Tinta ---- */
  --ink:#111827;
  --ink-soft:#4F5F78;
  --ink-muted:#6E7C91;
  --hairline:#D7E1EF;
  --hairline-strong:#E9F0FA;

  /* ---- Situação: -ink escreve, -fill pinta ---- */
  --success:#007A5F;   --success-fill:#00AC86;
  --warning:#B64F02;   --warning-fill:#E7C438;
  --danger:#BB2B25;    --danger-fill:#DB504A;

  /* ---- Identidade por módulo ----
     `--x` é o token puro (moduleAccent no app pinta com ele);
     `--x-ink` é a versão que passa em AA como texto sobre branco. */
  --agenda:#00C0F8;    --agenda-ink:#006B8A;
  --fin:#FFA45F;       --fin-ink:#A34600;
  --rest:#3D5A80;      --rest-ink:#354E6E;
  --hist:#00AC86;      --hist-ink:#007A5F;
  --goal:#9A5E8B;      --goal-ink:#653E5B;
  --brand-ink:var(--seed);

  /* Gradiente da marca: o mesmo `brandGradient` do app. */
  --brand-gradient:linear-gradient(135deg,var(--brand-blue) 0%,var(--seed) 52%,var(--brand-teal) 100%);

  /* ---- Vidro (GlassSurface) ----
     `--tint` é a cor do módulo dono do elemento; tudo abaixo reage a ela. */
  --tint:var(--brand-navy);
  --tint-ink:var(--seed);
  --glass-border:rgba(255,255,255,.76);
  --glass-inner:rgba(255,255,255,.42);
  --glass-highlight:rgba(255,255,255,.72);

  /* ---- Raios (tokens rCard/rTactile/rField/rChip/rSheet/rHero) ---- */
  --r-card:24px;
  --r-tactile:20px;
  --r-field:18px;
  --r-chip:14px;
  --r-sheet:28px;
  --r-hero:32px;

  /* ---- Movimento (motion tokens) ---- */
  --ease-enter:cubic-bezier(.16,1,.3,1);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-transform:cubic-bezier(.65,0,.35,1);

  --container:1180px;
  --font:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* O tingimento por módulo é herdado: marcar a seção repinta vidro, sombra,
   brilho, selo e texto de acento de tudo que estiver dentro dela. */
[data-mod="agenda"]{--tint:var(--agenda);--tint-ink:var(--agenda-ink)}
[data-mod="fin"]   {--tint:var(--fin);   --tint-ink:var(--fin-ink)}
[data-mod="rest"]  {--tint:var(--rest);  --tint-ink:var(--rest-ink)}
[data-mod="hist"]  {--tint:var(--hist);  --tint-ink:var(--hist-ink)}
[data-mod="goal"]  {--tint:var(--goal);  --tint-ink:var(--goal-ink)}
[data-mod="brand"] {--tint:var(--brand-teal);--tint-ink:var(--seed)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;scrollbar-gutter:stable}
body{
  margin:0;min-width:320px;overflow-x:clip;
  color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;
  background:var(--scaffold);
  -webkit-font-smoothing:antialiased;
}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

.container{width:min(var(--container),calc(100% - 48px));margin-inline:auto}
.skip{position:fixed;z-index:999;top:-80px;left:16px;padding:12px 18px;border-radius:var(--r-chip);background:var(--ink);color:#fff;font-weight:700;transition:top .2s}
.skip:focus{top:16px}
:focus-visible{outline:3px solid var(--seed);outline-offset:3px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ---------------------------------------------------------
   Fundo do app (CalendoctorBackdrop)
   Gradiente diagonal + três brilhos radiais + as cruzinhas.
   --------------------------------------------------------- */
.backdrop{
  /* Os brilhos passam da borda de propósito; sem recorte aqui eles esticavam
     a área rolável e só o `overflow-x:clip` do body escondia o estrago. */
  position:fixed;z-index:-1;inset:0;overflow:hidden;pointer-events:none;
  background:linear-gradient(135deg,#FBFDFF 0%,var(--scaffold) 52%,#F0F5FD 100%);
}
.backdrop::before,
.backdrop::after,
.backdrop i{
  content:"";position:absolute;border-radius:50%;
}
/* periwinkle no alto à direita - o mesmo brilho dominante do app */
.backdrop::before{
  top:-16vw;right:-12vw;width:56vw;height:56vw;
  background:radial-gradient(circle,rgba(61,90,128,.30),rgba(61,90,128,0) 70%);
}
/* blush à esquerda */
.backdrop::after{
  top:34vh;left:-18vw;width:46vw;height:46vw;
  background:radial-gradient(circle,rgba(241,148,180,.16),rgba(241,148,180,0) 70%);
}
/* mint embaixo à direita */
.backdrop i{
  right:-10vw;bottom:-14vw;width:42vw;height:42vw;
  background:radial-gradient(circle,rgba(0,172,134,.18),rgba(0,172,134,0) 70%);
}
/* As cruzes de fundo: a marca médica que o app desenha no canto. */
.backdrop b{
  position:absolute;display:block;
  background:
    linear-gradient(var(--cross,rgba(199,146,223,.16)) 0 0) center/100% 22% no-repeat,
    linear-gradient(var(--cross,rgba(199,146,223,.16)) 0 0) center/22% 100% no-repeat;
}
.backdrop b:nth-of-type(1){top:14vh;right:6vw;width:34px;height:34px}
.backdrop b:nth-of-type(2){top:19vh;right:11vw;width:18px;height:18px;--cross:rgba(255,164,95,.26)}
.backdrop b:nth-of-type(3){top:74vh;left:7vw;width:24px;height:24px;--cross:rgba(69,183,160,.20)}

/* ---------------------------------------------------------
   Movimento
   --------------------------------------------------------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes floatSoft{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(1deg)}}
@keyframes scalePop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* O par de brilhos do GlassSurface, que deriva em seno/cosseno. */
@keyframes glowDriftA{0%,100%{transform:translate(0,0)}50%{transform:translate(32px,14px)}}
@keyframes glowDriftB{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,-14px)}}
/* A célula do calendário que acende - o logo virando produto. */
@keyframes cellInk{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}

.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-enter),transform .85s var(--ease-enter)}
.reveal.is-visible{opacity:1;transform:none}
.delay-1{transition-delay:.07s}.delay-2{transition-delay:.14s}.delay-3{transition-delay:.21s}.delay-4{transition-delay:.28s}

/* ---------------------------------------------------------
   Vidro (GlassSurface)
   Gradiente que acumula a cor do módulo para baixo, borda branca,
   borda interna, brilho de canto e sombra tingida.
   --------------------------------------------------------- */
.glass{
  position:relative;isolation:isolate;
  border:1px solid var(--glass-border);
  border-radius:var(--r-card);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.98) 0%,
      color-mix(in srgb,var(--tint) 5%,#fff) 45%,
      color-mix(in srgb,var(--tint) 13%,#fff) 100%);
  /* A luz de cima fica aqui. A sombra do app mistura a cor do módulo a 34%
     e cai a 12% de alfa - como `color-mix` não resolve cor e alfa no mesmo
     passo, ela vive no `::before`. */
  box-shadow:0 -1px 1px rgba(255,255,255,.55);
}
.glass::before{
  content:"";position:absolute;z-index:-1;inset:-1px;border-radius:inherit;
  box-shadow:0 16px 32px color-mix(in srgb,var(--tint) 34%,#3568A8);
  opacity:.12;
}
/* Brilho branco no canto superior direito. */
.glass::after{
  content:"";position:absolute;z-index:0;top:-90px;right:-64px;
  width:210px;height:210px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--glass-highlight),rgba(255,255,255,0) 70%);
}
.glass>*{position:relative;z-index:1}
/* Os dois brilhos tingidos que derivam no rodapé do cartão. */
.glass-glow{position:absolute;z-index:0;border-radius:50%;pointer-events:none}
.glass-glow-a{
  left:-40px;bottom:-100px;width:320px;height:320px;
  background:radial-gradient(circle,color-mix(in srgb,var(--tint) 16%,transparent),transparent 70%);
  animation:glowDriftA 9s ease-in-out infinite;
}
.glass-glow-b{
  right:-40px;bottom:-70px;width:270px;height:270px;
  background:radial-gradient(circle,color-mix(in srgb,color-mix(in srgb,var(--tint) 62%,#fff) 11%,transparent),transparent 70%);
  animation:glowDriftB 11s ease-in-out infinite;
}
/* Borda interna clara - a segunda linha do vidro do app. */
.glass-inset{position:absolute;z-index:0;inset:0;border:1px solid var(--glass-inner);border-radius:inherit;pointer-events:none}

/* Selo de módulo (ModuleIconBadge): vidro tingido, ícone na cor do módulo. */
.mod-badge{
  display:grid;place-items:center;flex:none;
  width:48px;height:48px;border-radius:17px;
  border:1px solid var(--hairline);
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--tint-ink) 12%,#fff));
  box-shadow:0 10px 22px rgba(53,104,168,.13),0 -1px 1px rgba(255,255,255,.6);
  color:var(--tint-ink);
}
.mod-badge svg{width:24px;height:24px}

/* ---------------------------------------------------------
   Botões
   --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:11px 21px;border:0;border-radius:999px;
  font-size:.9rem;font-weight:700;white-space:nowrap;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.985)}
.btn-lg{min-height:54px;padding:15px 26px;font-size:.96rem}

/* O botão principal é o gradiente da marca - o mesmo do app. */
.btn-brand{
  position:relative;isolation:isolate;color:#fff;
  background:var(--seed);
  box-shadow:0 10px 24px rgba(45,119,104,.30);
}
.btn-brand::before{
  content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;
  background:var(--brand-gradient);opacity:0;transition:opacity .35s var(--ease);
}
.btn-brand:hover{box-shadow:0 16px 32px rgba(45,119,104,.34)}
.btn-brand:hover::before{opacity:1}

/* O secundário é vidro: mesma superfície dos cartões. */
.btn-glass{
  border:1px solid var(--glass-border);
  background:rgba(255,255,255,.72);
  color:var(--ink);
  box-shadow:0 8px 20px rgba(53,104,168,.10);
  backdrop-filter:blur(14px);
}
.btn-glass:hover{background:rgba(255,255,255,.94);box-shadow:0 14px 28px rgba(53,104,168,.14)}

.btn-ink{background:var(--ink);color:#fff;box-shadow:0 10px 24px rgba(17,24,39,.22)}
.btn-ink:hover{background:#1F2937}

.text-link{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--tint-ink);font-size:.92rem;font-weight:750;
  transition:gap .25s var(--ease)
}
.text-link:hover{gap:13px}

/* ---------------------------------------------------------
   Navegação - pílula de vidro flutuante
   --------------------------------------------------------- */
.page-progress{position:fixed;z-index:200;top:0;right:0;left:0;height:2px;background:transparent}
.page-progress span{display:block;height:100%;background:var(--brand-gradient);transform:scaleX(0);transform-origin:left;transition:transform .1s linear}

.nav{position:sticky;z-index:150;top:14px;margin:14px auto 0;width:min(var(--container),calc(100% - 32px))}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:66px;padding:0 12px 0 16px;
  border:1px solid var(--glass-border);border-radius:999px;
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 30px rgba(53,104,168,.10),0 -1px 1px rgba(255,255,255,.6);
  backdrop-filter:blur(18px);
  transition:background .3s,box-shadow .3s;
}
.nav.scrolled .nav-inner{background:rgba(255,255,255,.93);box-shadow:0 14px 36px rgba(53,104,168,.14)}
.brand{display:inline-flex;align-items:center;gap:11px;font-size:1.04rem;font-weight:800;letter-spacing:-.03em}
.brand img{width:36px;height:36px;border-radius:11px}
.nav-links{display:flex;align-items:center;gap:26px;color:var(--ink-soft);font-size:.88rem;font-weight:650}
.nav-links a{position:relative;padding:4px 0;transition:color .25s}
/* O sublinhado de cada link é a cor do módulo daquela seção. */
.nav-links a::after{
  content:"";position:absolute;right:0;bottom:-2px;left:0;height:2px;border-radius:2px;
  background:var(--link-mod,var(--seed));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a[href="#como-funciona"]{--link-mod:var(--brand-teal)}
.nav-links a[href="#financeiro"]{--link-mod:var(--fin)}
.nav-links a[href="#metas"]{--link-mod:var(--goal)}
.nav-links a[href="#descanso"]{--link-mod:var(--rest)}
.nav-links a[href="#seguranca"]{--link-mod:var(--brand-blue)}
.nav-side{display:flex;align-items:center;gap:10px}
.nav-cta{min-height:42px;padding:10px 19px;font-size:.84rem}
.menu-toggle{
  display:none;flex-direction:column;gap:5px;place-items:center;
  width:44px;height:44px;border:1px solid var(--hairline);border-radius:14px;
  background:#fff;cursor:pointer;
}
.menu-toggle span{width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s,opacity .25s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{display:none}

/* ---------------------------------------------------------
   Seções
   --------------------------------------------------------- */
.section{position:relative;padding:clamp(72px,8vw,124px) 0}
.section-head{max-width:720px;margin:0 auto clamp(38px,4.4vw,62px);text-align:center}
.section-head.is-left{margin-inline:0;text-align:left}
.chapter{
  display:inline-flex;align-items:center;gap:11px;margin-bottom:16px;
  color:var(--ink-muted);font-size:.71rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.chapter span{color:var(--tint-ink)}
.chapter i{width:34px;height:1px;background:currentColor;opacity:.45}
.kicker{display:block;margin-bottom:12px;color:var(--tint-ink);font-size:.73rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
h2,.h2{font-size:clamp(2.1rem,4.4vw,3.35rem);font-weight:780;line-height:1.06;letter-spacing:-.045em}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:1.04rem}
.section-head em,h2 em{font-style:normal;color:var(--tint-ink)}
/* O acento da marca: o gradiente do app escrito em texto. */
.grad{
  background:var(--brand-gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.section-note{margin-top:26px;color:var(--ink-muted);font-size:.78rem;text-align:center}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
/* A seção é full-width, então os cartões que pendem para fora do container
   continuam visíveis no desktop; `clip` só impede que a decoração estique a
   área rolável no mobile. `clip` e não `hidden`: não cria contexto de rolagem
   e não quebra o `scroll-padding` das âncoras. */
.hero{position:relative;overflow-x:clip;padding:clamp(48px,6vw,86px) 0 clamp(64px,7vw,104px)}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  align-items:center;gap:clamp(32px,5vw,72px);
}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;
  padding:8px 16px 8px 10px;border:1px solid var(--glass-border);border-radius:999px;
  background:rgba(255,255,255,.7);color:var(--seed);
  font-size:.76rem;font-weight:800;letter-spacing:.02em;
  box-shadow:0 6px 16px rgba(53,104,168,.09);
  animation:fadeUp .8s var(--ease-enter) both;
}
/* O ponto do selo é o gradiente da marca. */
.eyebrow i{width:20px;height:20px;border-radius:7px;background:var(--brand-gradient)}

.hero h1{
  font-size:clamp(2.3rem,4vw,3.5rem);font-weight:800;line-height:1.04;letter-spacing:-.05em;
  animation:fadeUp .9s .08s var(--ease-enter) both;
}
.hero h1 em{display:block;font-style:normal}
/* A quebra é decidida aqui, não pela largura da coluna: "do resto." é o
   desfecho da frase e sempre cai sozinho na terceira linha. */
.hero h1 .grad{display:block}
.hero-sub{
  max-width:470px;margin-top:22px;color:var(--ink-soft);font-size:1.1rem;
  animation:fadeUp .9s .16s var(--ease-enter) both;
}
.hero-sub strong{color:var(--ink);font-weight:750}
.hero-actions{
  display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;
  animation:fadeUp .9s .24s var(--ease-enter) both;
}
.hero-proof{
  display:flex;gap:10px 20px;flex-wrap:wrap;margin-top:30px;
  color:var(--ink);font-size:.83rem;font-weight:700;
  animation:fadeUp .9s .32s var(--ease-enter) both;
}
.hero-proof li{display:flex;align-items:center;gap:8px}
/* O tique herda a cor do módulo - aqui, o verde de situação do app. */
.hero-proof li::before{
  content:"";flex:none;width:17px;height:17px;border-radius:50%;
  background:color-mix(in srgb,var(--success-fill) 24%,#fff)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007A5F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ---------------------------------------------------------
   Palco da hero
   O logo do Calendoctor é um calendário de células coloridas com um
   plantonista. Aqui essa grade vira o palco: as células da marca acendem
   atrás do aparelho, e cada cor é um local - o mesmo sistema que pinta a
   agenda de verdade (CalendoctorTokens.eventColors).
   --------------------------------------------------------- */
.hero-stage{position:relative;display:grid;place-items:center;min-height:min(620px,88vw)}

/* As células coloridas do logo, como o app as usa: uma cor por local.
   Legenda pequena e deliberada - a grade cheia atrás do aparelho virava
   ruído e disputava a leitura com a agenda de verdade. */
.locals-card{
  position:absolute;z-index:4;left:-11%;bottom:16%;
  width:min(186px,52vw);padding:16px 17px;border-radius:var(--r-tactile);
  animation:floatY 7.4s .8s ease-in-out infinite;
}
.locals-card small{display:block;margin-bottom:11px;color:var(--seed);font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.locals-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.locals-grid i{
  aspect-ratio:1;border-radius:9px;background:var(--c);
  box-shadow:0 6px 14px color-mix(in srgb,var(--c) 42%,transparent);
  animation:cellInk .6s var(--ease-enter) both;animation-delay:var(--d,0s);
}
.locals-grid i:nth-child(1){--c:var(--brand-teal);  --d:.10s}
.locals-grid i:nth-child(2){--c:var(--brand-blue);  --d:.18s}
.locals-grid i:nth-child(3){--c:var(--brand-green); --d:.26s}
.locals-grid i:nth-child(4){--c:var(--brand-purple);--d:.34s}
.locals-grid i:nth-child(5){--c:var(--brand-pink);  --d:.42s}
.locals-grid i:nth-child(6){--c:var(--brand-orange);--d:.50s}
.locals-card p{margin-top:11px;color:var(--ink-muted);font-size:.68rem;line-height:1.35}

/* O aparelho como o app se mostra: moldura branca, não lasca preta. */
.device{
  position:relative;z-index:3;width:min(288px,72vw);
  padding:9px;border-radius:52px;background:#fff;
  box-shadow:0 38px 90px rgba(37,71,108,.20),0 4px 12px rgba(37,71,108,.06);
  animation:floatSoft 7s ease-in-out infinite;
}
.device-screen{
  position:relative;overflow:hidden;
  height:min(560px,132vw);border-radius:44px;
  background:linear-gradient(155deg,#F8FCFF 0%,#F5F9FF 45%,#ECFAF9 100%);
  display:flex;flex-direction:column;
}
/* A ilha do aparelho, desenhada como o app desenha. */
.device-notch{
  position:absolute;z-index:6;top:11px;left:50%;
  width:88px;height:22px;border-radius:999px;background:#111827;
  transform:translateX(-50%);
}

/* Cartões que orbitam o aparelho, cada um na cor do seu módulo. */
.orbit{
  position:absolute;z-index:4;width:min(206px,58vw);padding:15px 16px;
  border-radius:var(--r-tactile);
}
.orbit-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.orbit-head .mod-badge{width:36px;height:36px;border-radius:13px}
.orbit-head .mod-badge svg{width:18px;height:18px}
.orbit-head small{color:var(--tint-ink);font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.orbit strong{display:block;font-size:1.42rem;font-weight:800;letter-spacing:-.04em}
.orbit p{margin-top:4px;color:var(--ink-muted);font-size:.7rem;line-height:1.4}
.orbit-fin{top:4%;left:-13%;animation:floatY 6s ease-in-out infinite}
.orbit-rest{right:-13%;bottom:7%;animation:floatY 6.8s .4s ease-in-out infinite}

/* A régua de situação: as três cores de preenchimento do app. */
.status{display:inline-flex;align-items:center;gap:6px;margin-top:9px;padding:5px 10px;border-radius:999px;font-size:.65rem;font-weight:800}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status-paid{background:color-mix(in srgb,var(--success-fill) 13%,#fff);color:var(--success)}
.status-pend{background:color-mix(in srgb,var(--warning-fill) 20%,#fff);color:var(--warning)}
.status-late{background:color-mix(in srgb,var(--danger-fill) 13%,#fff);color:var(--danger)}

.data-note{margin-top:22px;color:var(--ink-muted);font-size:.72rem;text-align:center}

/* ---------------------------------------------------------
   Tela do hero - a Agenda real, não uma ilustração livre.
   Reproduz a composição de agenda_screen.dart: o resumo do dia
   (DailyCockpit), o alternador Mês/Semana com as setas de período
   (AgendaPeriodBar) e o mês em anéis (CalendarPanel + CalendarDayCell,
   estilo "rings" - o padrão do app). Cada anel é a mesma conta do app:
   uma volta são 24h, o arco começa no horário do plantão com meia-noite
   no topo, a cor é a do local.
   --------------------------------------------------------- */
.agenda-mock{flex:1;display:flex;flex-direction:column;gap:12px;min-height:0;padding:40px 12px 14px;overflow:hidden}

.am-cockpit{--tint:var(--agenda);padding:13px 15px 14px;border-radius:18px}
.am-cockpit-head{display:flex;align-items:center;gap:8px}
.am-kicker{color:var(--agenda-ink);font-size:.5rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.am-chip{margin-left:auto;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--agenda) 16%,#fff);color:var(--agenda-ink);font-size:.52rem;font-weight:800;white-space:nowrap}
.am-date{margin-top:3px;font-size:.82rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.am-bar{position:relative;height:14px;margin-top:11px}
.am-bar-track{position:absolute;top:4px;left:0;right:0;height:6px;border-radius:99px;background:var(--hairline-strong)}
.am-bar-block{position:absolute;top:4px;height:6px;border-radius:99px}
.am-marker{position:absolute;top:-1px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--ink)}
.am-ticks{display:flex;justify-content:space-between;margin-top:3px;color:var(--ink-muted);font-size:.48rem;font-weight:700}
.am-metrics{display:flex;align-items:center;margin-top:11px;padding-top:10px;border-top:1px solid var(--hairline-strong)}
.am-metric{flex:1;text-align:center}
.am-metric small{display:block;color:var(--ink-muted);font-size:.48rem;font-weight:750;letter-spacing:.03em;text-transform:uppercase}
.am-metric b{display:block;margin-top:2px;font-size:.72rem;font-weight:800;letter-spacing:-.02em}
.am-metric-divider{width:1px;height:20px;background:var(--hairline-strong)}

.am-toggle{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border:1px solid var(--hairline);border-radius:12px;background:rgba(255,255,255,.7)}
.am-toggle span{display:block;padding:6px 0;border-radius:9px;text-align:center;color:var(--ink-muted);font-size:.56rem;font-weight:750}
.am-toggle span.is-active{background:var(--brand-gradient);color:#fff;box-shadow:0 6px 14px rgba(45,119,104,.24)}
.am-nav{display:flex;align-items:center;gap:8px;margin-top:9px}
.am-nav i{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid var(--hairline);border-radius:9px;color:var(--ink-soft)}
.am-nav i svg{width:13px;height:13px}
.am-nav b{flex:1;text-align:center;font-size:.74rem;font-weight:800;letter-spacing:-.02em}

.am-calendar{--tint:var(--agenda);flex:1;min-height:0;padding:13px 12px;border-radius:18px}
.am-week{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:6px}
.am-week span{text-align:center;color:var(--ink-muted);font-size:.46rem;font-weight:800;letter-spacing:.03em}
.am-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px}
.am-day{position:relative;display:grid;place-items:center;aspect-ratio:1;opacity:1}
.am-day.is-out{opacity:.34}
.am-ring{position:absolute;inset:8%}
.am-ring circle{fill:none}
.am-ring .am-track{stroke:var(--hairline);stroke-width:2.6}
.am-ring .am-arc{stroke-width:2.6;stroke-linecap:butt}
.am-disc{position:relative;display:grid;place-items:center;width:62%;height:62%;border-radius:50%;color:var(--ink);font-size:.58rem;font-weight:700}
.am-day.is-today .am-disc{background:color-mix(in srgb,var(--agenda) 14%,transparent);border:1.2px solid var(--agenda-ink);color:var(--agenda-ink);font-weight:800}
.am-day.is-selected .am-disc{background:var(--agenda-ink);color:#fff;font-weight:800;box-shadow:0 4px 10px color-mix(in srgb,var(--agenda-ink) 45%,transparent)}

/* ---------------------------------------------------------
   01 · O problema
   Usa a paleta de atenção do app (attentionBg/attentionBorder/attentionIcon):
   o mesmo tom quente com que o Calendoctor avisa que algo precisa de olho.
   --------------------------------------------------------- */
.problem{position:relative;padding:clamp(72px,8vw,116px) 0}
.problem-panel{
  position:relative;overflow:hidden;
  padding:clamp(34px,5vw,72px);
  border:1px solid color-mix(in srgb,var(--brand-orange) 42%,#fff);
  border-radius:var(--r-hero);
  background:linear-gradient(165deg,#FFF3E8 0%,#FFF9F4 52%,rgba(255,255,255,.9) 100%);
  box-shadow:0 20px 48px rgba(182,79,2,.09);
}
.problem-panel .chapter span{color:var(--warning)}
/* Os ruídos da rotina, soltos atrás do texto. */
.chaos{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.chaos span{
  position:absolute;padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.72);
  color:var(--ink-muted);font-size:.72rem;font-weight:650;white-space:nowrap;
  box-shadow:0 8px 20px rgba(182,79,2,.08);
  animation:floatY 7s ease-in-out infinite;
}
.chaos span:nth-child(1){top:12%;right:6%;animation-delay:.0s}
.chaos span:nth-child(2){top:32%;right:14%;animation-delay:.6s}
.chaos span:nth-child(3){top:58%;right:5%;animation-delay:1.2s}
.chaos span:nth-child(4){top:76%;right:18%;animation-delay:1.8s}
.chaos span:nth-child(5){top:44%;right:28%;animation-delay:2.4s}
.problem h2{position:relative;max-width:16ch}
.problem h2 span{display:block}
.problem h2 .is-dim{color:var(--ink-muted)}
.problem-turn{
  position:relative;display:grid;gap:6px;max-width:560px;margin-top:clamp(28px,3.4vw,44px);
  padding-left:20px;border-left:3px solid var(--brand-orange);
}
.problem-turn p{color:var(--ink-soft);font-size:1.02rem}
.problem-turn strong{font-size:1.24rem;font-weight:780;letter-spacing:-.03em}
.problem-turn .text-link{margin-top:10px;color:var(--warning)}

/* ---------------------------------------------------------
   02 · Uma informação → quatro respostas
   Cada resposta é um módulo, e cada cartão é o vidro daquele módulo.
   --------------------------------------------------------- */
.flow-input{display:grid;justify-items:center}
.flow-input-tag{
  margin-bottom:14px;padding:8px 16px;border-radius:999px;
  background:var(--brand-gradient);color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.flow-input-card{
  display:flex;align-items:center;gap:14px;
  width:min(440px,100%);padding:18px 22px;border-radius:var(--r-tactile);
}
.flow-input-card .scr-dot{width:11px;height:11px}
.flow-input-main{flex:1;min-width:0}
.flow-input-main b{display:block;font-size:1rem;letter-spacing:-.02em}
.flow-input-main small{display:block;margin-top:2px;color:var(--ink-muted);font-size:.76rem}
.flow-input-meta{text-align:right}
.flow-input-meta b{display:block;font-size:.92rem;letter-spacing:-.02em}
.flow-input-meta small{display:block;margin-top:2px;color:var(--seed);font-size:.78rem;font-weight:750}

/* O conector desce do cartão de entrada até o centro de cada resposta.
   As posições saem da mesma conta do grid: meia coluna é
   (100% - 3*gap)/8. O SVG anterior tinha coordenada fixa (125, 375, 625,
   875), que só bate num grid sem gap - com os 18px reais os dois cartões
   das pontas erravam o alvo por ~8px. Em CSS o traço acompanha qualquer
   largura e qualquer gap sozinho. */
.flow-diagram{--flow-gap:18px}
.flow-branch{
  position:relative;width:100%;height:88px;
  --half-col:calc((100% - 3*var(--flow-gap))/8);
}
.flow-branch span{position:absolute;border-radius:2px}
.flow-stem{top:0;left:50%;width:2px;height:28px;margin-left:-1px;background:var(--seed);transform-origin:top}
.flow-bar{
  top:27px;left:var(--half-col);right:var(--half-col);height:2px;transform-origin:center;
  background:linear-gradient(90deg,var(--agenda),var(--fin),var(--rest),var(--goal));
}
.flow-drop{top:28px;bottom:0;width:2px;margin-left:-1px;transform-origin:top}
.drop-1{left:var(--half-col);background:var(--agenda)}
.drop-2{left:calc(3*var(--half-col) + var(--flow-gap));background:var(--fin)}
.drop-3{left:calc(5*var(--half-col) + 2*var(--flow-gap));background:var(--rest)}
.drop-4{left:calc(7*var(--half-col) + 3*var(--flow-gap));background:var(--goal)}
.js .flow-stem,.js .flow-drop{transform:scaleY(0)}
.js .flow-bar{transform:scaleX(0)}
.flow-diagram.is-visible .flow-stem{animation:growY .5s var(--ease-enter) forwards}
.flow-diagram.is-visible .flow-bar{animation:growX .6s .32s var(--ease-enter) forwards}
.flow-diagram.is-visible .drop-1{animation:growY .45s .78s var(--ease-enter) forwards}
.flow-diagram.is-visible .drop-2{animation:growY .45s .88s var(--ease-enter) forwards}
.flow-diagram.is-visible .drop-3{animation:growY .45s .98s var(--ease-enter) forwards}
.flow-diagram.is-visible .drop-4{animation:growY .45s 1.08s var(--ease-enter) forwards}

.flow-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--flow-gap)}
.flow-card{display:flex;flex-direction:column;gap:10px;padding:24px 22px;border-radius:var(--r-card);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.flow-card:hover{transform:translateY(-6px)}
.flow-badge{display:inline-flex;align-items:center;gap:9px;color:var(--tint-ink);font-size:.74rem;font-weight:800;letter-spacing:.04em}
.flow-badge .dot{width:9px;height:9px;border-radius:50%;background:var(--tint);box-shadow:0 0 0 4px color-mix(in srgb,var(--tint) 18%,transparent)}
.flow-card h3{font-size:1.1rem;font-weight:760;line-height:1.22;letter-spacing:-.025em}
.flow-card p{color:var(--ink-soft);font-size:.86rem;line-height:1.5}
/* A resposta que o app devolve, no tom do módulo. */
.flow-answer{
  margin-top:auto;padding:11px 13px;border-radius:var(--r-chip);
  border:1px solid color-mix(in srgb,var(--tint) 28%,#fff);
  background:color-mix(in srgb,var(--tint) 9%,#fff);
  color:var(--tint-ink);font-size:.78rem;font-weight:700;
}
.flow-answer em{font-style:normal;font-weight:850}

/* ---------------------------------------------------------
   03 · O choque de horários
   A prova aqui é geométrica: duas barras no mesmo eixo de tempo e a
   faixa listrada onde elas se cruzam. Não há aparelho ao lado nem
   lista de passos - quem move o controle vê o conflito nascer e
   sumir, que é exatamente o que o app faz antes de confirmar.
   --------------------------------------------------------- */
.clash{padding:clamp(24px,3.2vw,40px);border-radius:var(--r-hero)}
.clash-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.clash-head small{display:block;color:var(--ink-muted);font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.clash-head strong{display:block;margin-top:4px;font-size:1.32rem;font-weight:780;letter-spacing:-.03em}
/* O selo troca de cor com a situação, no mesmo par do app. */
.clash-flag{
  padding:10px 17px;border-radius:999px;font-size:.83rem;font-weight:800;white-space:nowrap;
  background:color-mix(in srgb,var(--success-fill) 15%,#fff);color:var(--success);
  transition:background .3s,color .3s;
}
.clash.has-clash .clash-flag{background:color-mix(in srgb,var(--warning-fill) 26%,#fff);color:var(--warning)}

.clash-hours{display:flex;justify-content:space-between;margin-bottom:8px;color:var(--ink-muted);font-size:.72rem;font-weight:750}
.clash-hours i{font-style:normal}
.clash-lanes{position:relative;display:grid;gap:10px}
.clash-lane{
  position:relative;height:56px;border-radius:var(--r-chip);
  border:1px solid var(--hairline-strong);background:color-mix(in srgb,var(--agenda) 5%,#fff);
}
.clash-block{
  position:absolute;top:5px;bottom:5px;left:var(--from);width:var(--size);
  border-radius:calc(var(--r-chip) - 4px);
  transition:left .28s var(--ease),width .28s var(--ease);
}
/* As duas tintas, num lugar só: a barra e o quadradinho da legenda
   precisam ser reconhecidos como a mesma coisa. */
.clash{--ink-consulta:linear-gradient(135deg,var(--brand-teal),var(--seed));--ink-plantao:linear-gradient(135deg,var(--brand-blue),#0072A3)}
.clash-block.is-fixed{background:var(--ink-consulta)}
.clash-block.is-shift{background:var(--ink-plantao)}
/* A faixa atravessa as duas pistas: o cruzamento é o argumento. */
.clash-overlap{
  position:absolute;top:0;bottom:0;left:var(--from);width:var(--size);
  border-radius:8px;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(45deg,
    color-mix(in srgb,var(--warning-fill) 62%,transparent) 0 7px,
    transparent 7px 14px);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--warning-fill) 78%,transparent);
  transition:opacity .28s,left .28s var(--ease),width .28s var(--ease);
}
.clash.has-clash .clash-overlap{opacity:1}

.clash-legend{display:flex;gap:clamp(18px,3vw,38px);flex-wrap:wrap;margin-top:18px}
.clash-legend li{display:flex;align-items:flex-start;gap:10px}
.clash-legend i{width:13px;height:13px;flex:none;margin-top:3px;border-radius:4px}
.clash-legend li.is-fixed i{background:var(--ink-consulta)}
.clash-legend li.is-shift i{background:var(--ink-plantao)}
.clash-legend b{display:block;font-size:.9rem;font-weight:760;letter-spacing:-.015em}
.clash-legend small{display:block;margin-top:2px;color:var(--ink-soft);font-size:.79rem}

.clash-foot{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;gap:clamp(18px,3vw,44px);
  margin-top:26px;padding-top:22px;border-top:1px solid var(--hairline);
}
.clash-control{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px}
.clash-control>span{color:var(--ink-soft);font-size:.86rem;font-weight:750}
.clash-control input[type="range"]{width:100%;accent-color:var(--agenda-ink);cursor:pointer}
.clash-control output{min-width:62px;text-align:right;color:var(--agenda-ink);font-size:1.02rem;font-weight:850;letter-spacing:-.02em}
.clash-note{color:var(--ink-soft);font-size:.9rem;line-height:1.55}

/* ---------------------------------------------------------
   04 · Financeiro (bento)
   --------------------------------------------------------- */
.split-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:clamp(24px,4vw,56px);margin-bottom:clamp(32px,4vw,54px)}
.split-head h2 .dim{color:var(--ink-muted)}
.split-head-side{color:var(--ink-soft);font-size:1.02rem}
.split-head-side strong{color:var(--ink);font-weight:750}

.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.bento-card{
  display:flex;flex-direction:column;gap:15px;min-width:0;
  padding:26px;border-radius:var(--r-card);
  transition:transform .45s var(--ease);
}
.bento-card:hover{transform:translateY(-4px)}
/* home.js marca o cartão que acabou de recalcular; sem isto a troca de
   período mudava os números sem nada indicar que foram eles que mudaram. */
.bento-card.is-updating{animation:scalePop .42s var(--ease-enter)}
.bento-hero{grid-column:span 4}
.bento-figure{grid-column:span 2;justify-content:center}
.bento-receivables{grid-column:span 3}
.bento-payment{grid-column:span 3}
.bento-net{grid-column:span 3}
.bento-report{grid-column:span 3}

.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.card-kicker{display:block;margin-bottom:5px;color:var(--tint-ink);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.card-head h3{font-size:1.06rem;font-weight:760;line-height:1.24;letter-spacing:-.028em}
.card-foot{margin-top:auto;color:var(--ink-muted);font-size:.76rem}

/* Segmentos: o mesmo seletor de período do app. */
.seg{display:inline-flex;gap:3px;flex:none;padding:4px;border-radius:999px;border:1px solid var(--hairline);background:rgba(255,255,255,.7)}
.seg button{
  padding:7px 13px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  color:var(--ink-muted);font-size:.75rem;font-weight:750;transition:background .25s,color .25s;
}
.seg button[aria-pressed="true"]{background:var(--tint-ink);color:#fff}
.seg-sm button{padding:6px 11px;font-size:.72rem}

.overview-body{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:26px}
.overview-total span{display:block;color:var(--ink-muted);font-size:.76rem;font-weight:700}
.overview-total strong{display:block;margin-top:4px;font-size:clamp(2rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.05em}
.overview-total small{display:block;margin-top:4px;color:var(--ink-muted);font-size:.74rem}
/* A tendência do período: barras na cor do Financeiro. */
.bars{display:flex;align-items:flex-end;gap:8px;height:96px}
.bars i{
  flex:1;height:var(--bar);border-radius:8px 8px 4px 4px;
  background:color-mix(in srgb,var(--fin) 34%,#fff);
  transition:height .6s var(--ease-enter);
}
.bars i.is-current{background:linear-gradient(180deg,var(--fin),color-mix(in srgb,var(--fin) 72%,var(--warning)))}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.metrics div{padding:14px 15px;border:1px solid var(--hairline);border-radius:var(--r-field);background:rgba(255,255,255,.66)}
.metrics small{display:block;margin-top:7px;color:var(--ink-muted);font-size:.7rem;font-weight:700}
.metrics strong{display:block;margin-top:3px;font-size:1.02rem;font-weight:800;letter-spacing:-.032em}
.metric-mark{display:block;width:22px;height:5px;border-radius:99px}
/* As cores de preenchimento de situação do app: verde, amarelo, azul, laranja. */
.metric-mark.is-received{background:var(--success-fill)}
.metric-mark.is-open{background:var(--warning-fill)}
.metric-mark.is-hours{background:var(--agenda)}
.metric-mark.is-rate{background:var(--fin)}

/* O número que resume a promessa do módulo. */
.big-number{
  display:block;font-size:clamp(2.6rem,5vw,3.9rem);font-weight:850;line-height:.92;letter-spacing:-.06em;
  background:linear-gradient(135deg,var(--fin-ink),var(--fin));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.big-number sup{font-size:.42em;font-weight:800;vertical-align:super}
.big-number-label{display:block;margin-top:8px;color:var(--tint-ink);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.bento-figure p{margin-top:12px;color:var(--ink-soft);font-size:.88rem;line-height:1.5}

.count-chip{flex:none;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--tint) 13%,#fff);color:var(--tint-ink);font-size:.7rem;font-weight:800}
.receivable-list{display:grid;gap:8px}
.receivable-row{
  display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;text-align:left;cursor:pointer;
  border:1px solid var(--hairline);border-radius:var(--r-field);background:rgba(255,255,255,.62);
  transition:border-color .25s,background .25s,transform .25s var(--ease);
}
.receivable-row:hover{transform:translateX(3px);background:rgba(255,255,255,.9)}
.receivable-row.is-hidden{display:none}
.receivable-row.is-active{border-color:color-mix(in srgb,var(--fin) 40%,#fff);background:color-mix(in srgb,var(--fin) 8%,#fff)}
/* A sigla do pagador usa a cor do local, como as pastas do Histórico. */
.receivable-logo{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:13px;background:var(--brand-orange);color:#3A1D00;font-size:.72rem;font-weight:850}
.receivable-logo.is-blue{background:var(--brand-blue);color:#04303D}
.receivable-logo.is-green{background:var(--brand-green);color:#00281E}
.receivable-row b{display:block;font-size:.85rem}
.receivable-row small{display:block;margin-top:2px;color:var(--ink-muted);font-size:.72rem}
.receivable-row>strong{margin-left:auto;font-size:.92rem;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.receivable-action{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--hairline)}
.receivable-action small{display:block;color:var(--ink-muted);font-size:.7rem;font-weight:700}
.receivable-action b{display:block;margin-top:2px;font-size:.84rem}
.charge-chip{padding:8px 14px;border-radius:999px;background:var(--tint-ink);color:#fff;font-size:.72rem;font-weight:750}

.payment-shift{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid var(--hairline);border-radius:var(--r-field);background:rgba(255,255,255,.66)}
.payment-date{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:15px;background:color-mix(in srgb,var(--agenda) 15%,#fff);color:var(--agenda-ink)}
.payment-date b{font-size:1.02rem;font-weight:850;letter-spacing:-.04em}
.payment-date small{font-size:.56rem;font-weight:800;letter-spacing:.08em}
.payment-shift b{display:block;font-size:.86rem}
.payment-shift small{display:block;margin-top:2px;color:var(--ink-muted);font-size:.72rem}
.payment-shift>strong{margin-left:auto;color:var(--warning);font-size:.8rem;font-weight:800}
.payment-progress{height:9px;border-radius:99px;background:color-mix(in srgb,var(--warning-fill) 18%,#fff);overflow:hidden}
.payment-progress span{display:block;width:var(--paid);height:100%;border-radius:99px;background:var(--success-fill);transition:width .55s var(--ease-enter)}
.payment-values{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.payment-values small{display:block;color:var(--ink-muted);font-size:.72rem;font-weight:700}
.payment-values b{display:block;margin-top:3px;font-size:1rem;font-weight:800;letter-spacing:-.03em}

.net-result{padding:18px;border-radius:var(--r-field);background:linear-gradient(160deg,color-mix(in srgb,var(--success-fill) 12%,#fff),rgba(255,255,255,.7))}
.net-result span{display:block;color:var(--ink-muted);font-size:.74rem;font-weight:700}
.net-result strong{display:block;margin-top:4px;color:var(--success);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:850;letter-spacing:-.05em}
.net-result small{display:block;margin-top:3px;color:var(--ink-muted);font-size:.73rem}
.net-control span{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.net-control b{font-size:.85rem}
.net-control output{color:var(--fin-ink);font-size:.85rem;font-weight:800}
.net-control input[type="range"]{width:100%;accent-color:var(--fin-ink);cursor:pointer}
.net-tax{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto}
.net-tax>span{color:var(--ink-soft);font-size:.82rem;font-weight:700}

/* O relatório: uma folha com a marca, como o PDF que o app exporta. */
.report-sheet{
  position:relative;overflow:hidden;padding:20px;border-radius:var(--r-field);
  border:1px solid var(--hairline);background:#fff;box-shadow:0 12px 26px rgba(53,104,168,.08);
}
.report-fold{position:absolute;top:0;right:0;width:34px;height:34px;background:linear-gradient(225deg,var(--scaffold) 50%,transparent 50%);border-left:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.report-brand{display:flex;align-items:center;gap:7px;margin-bottom:12px;color:var(--seed);font-size:.72rem;font-weight:850}
.report-brand i{width:16px;height:16px;border-radius:5px;background:var(--brand-gradient)}
.report-sheet strong{display:block;font-size:.94rem;letter-spacing:-.02em}
.report-sheet>small{display:block;margin-top:2px;color:var(--ink-muted);font-size:.74rem}
.report-line{display:block;height:7px;margin-top:9px;border-radius:99px;background:var(--hairline-strong);width:62%}
.report-line.is-long{width:100%}
.report-line.is-short{width:38%}
.report-format{position:absolute;right:18px;bottom:18px;padding:6px 12px;border-radius:999px;background:var(--tint-ink);color:#fff;font-size:.72rem;font-weight:850}
.report-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.report-options button{
  padding:13px;border:1px solid var(--hairline);border-radius:var(--r-field);
  background:rgba(255,255,255,.66);cursor:pointer;text-align:left;
  transition:border-color .25s,background .25s;
}
.report-options button[aria-pressed="true"]{border-color:color-mix(in srgb,var(--fin) 40%,#fff);background:color-mix(in srgb,var(--fin) 9%,#fff)}
.report-options b{display:block;font-size:.88rem;font-weight:850}
.report-options small{display:block;margin-top:2px;color:var(--ink-muted);font-size:.7rem}

.assurance{display:flex;gap:12px 26px;flex-wrap:wrap;justify-content:center;margin-top:26px;color:var(--ink-soft);font-size:.82rem;font-weight:650}
.assurance span{display:flex;align-items:center;gap:9px}
.assurance i{width:8px;height:8px;border-radius:50%;background:var(--tint);box-shadow:0 0 0 4px color-mix(in srgb,var(--tint) 16%,transparent)}

/* ---------------------------------------------------------
   05 · Metas
   --------------------------------------------------------- */
.goal-experience{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;align-items:start}
.goal-form-card{display:grid;gap:17px;padding:28px;border-radius:var(--r-card)}
.goal-form-head{display:flex;align-items:center;gap:13px}
.goal-form-head small{display:block;color:var(--tint-ink);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.goal-form-head strong{display:block;margin-top:3px;font-size:1.06rem;font-weight:760;letter-spacing:-.025em}
.goal-panel-icon{
  display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:17px;
  border:1px solid var(--hairline);
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--goal) 14%,#fff));
  box-shadow:0 10px 22px rgba(53,104,168,.13);
  color:var(--goal-ink);
}
.goal-panel-icon svg{width:24px;height:24px}
.goal-field>span:first-child{display:block;margin-bottom:8px;color:var(--ink-soft);font-size:.82rem;font-weight:700}
.goal-input{
  display:flex;align-items:center;gap:9px;padding:14px 17px;
  border:1px solid var(--hairline);border-radius:var(--r-field);background:#fff;
  transition:border-color .25s,box-shadow .25s;
}
.goal-input:focus-within{border-color:var(--goal);box-shadow:0 0 0 4px color-mix(in srgb,var(--goal) 18%,transparent)}
.goal-input b{color:var(--ink-muted);font-size:1rem;font-weight:800}
.goal-input input{width:100%;border:0;background:transparent;font-size:1.32rem;font-weight:800;letter-spacing:-.04em;outline:0}
.goal-form-error{color:var(--danger);font-size:.78rem;font-weight:700}
.goal-form-error:empty{display:none}
.goal-submit{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;border:0;border-radius:999px;cursor:pointer;
  background:var(--goal-ink);color:#fff;font-size:.94rem;font-weight:750;
  box-shadow:0 12px 26px color-mix(in srgb,var(--goal) 40%,transparent);
  transition:transform .3s var(--ease),background .3s,box-shadow .3s;
}
.goal-submit:hover:not(:disabled){transform:translateY(-2px);background:var(--goal)}
.goal-submit:disabled{opacity:.6;cursor:progress}
.goal-form-note{color:var(--ink-muted);font-size:.76rem}

.goal-result{position:relative;overflow:hidden;min-height:430px;padding:28px;border-radius:var(--r-card)}
.goal-orb{position:absolute;z-index:0;border-radius:50%;pointer-events:none}
.goal-orb-one{top:-70px;right:-50px;width:230px;height:230px;background:radial-gradient(circle,color-mix(in srgb,var(--goal) 20%,transparent),transparent 70%);animation:glowDriftB 11s ease-in-out infinite}
.goal-orb-two{bottom:-90px;left:-60px;width:270px;height:270px;background:radial-gradient(circle,color-mix(in srgb,var(--brand-teal) 16%,transparent),transparent 70%);animation:glowDriftA 9s ease-in-out infinite}
.goal-result>div{position:relative;z-index:1}
.goal-empty,.goal-analysis,.goal-plan{display:none}
.goal-result.is-empty .goal-empty{display:grid;place-items:center;gap:9px;min-height:374px;text-align:center}
.goal-result.is-analyzing .goal-analysis{display:grid;gap:14px;align-content:center;min-height:374px}
.goal-result.is-ready .goal-plan{display:grid;gap:15px;animation:scalePop .5s var(--ease-enter) both}
.goal-empty-icon{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:22px;background:color-mix(in srgb,var(--goal) 12%,#fff);color:var(--goal-ink)}
.goal-empty-icon svg{width:30px;height:30px}
.goal-empty-icon i{position:absolute;right:-5px;bottom:-5px;width:20px;height:20px;border-radius:50%;background:var(--brand-gradient);box-shadow:0 0 0 4px #fff}
.goal-empty-kicker{color:var(--goal-ink);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.goal-empty h3{font-size:1.3rem;font-weight:770;letter-spacing:-.03em}
.goal-empty p{max-width:34ch;color:var(--ink-soft);font-size:.9rem}

.goal-analysis-kicker{display:inline-flex;align-items:center;gap:9px;color:var(--goal-ink);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.goal-analysis-kicker i{width:9px;height:9px;border-radius:50%;background:var(--goal);animation:floatY 1.4s ease-in-out infinite}
.goal-analysis h3{font-size:1.2rem;font-weight:760;letter-spacing:-.03em}
.goal-analysis-list{display:grid;gap:10px}
.goal-analysis-list li{display:flex;align-items:center;gap:11px;color:var(--ink-muted);font-size:.88rem;transition:color .3s}
.goal-analysis-list li i{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--hairline);transition:border-color .3s,background .3s}
/* O passo corrente: anel na cor do módulo, antes de virar tique. */
.goal-analysis-list li.is-active{color:var(--ink)}
.goal-analysis-list li.is-active i{border-color:var(--goal);box-shadow:0 0 0 4px color-mix(in srgb,var(--goal) 16%,transparent)}
.goal-analysis-list li.is-done{color:var(--ink)}
.goal-analysis-list li.is-done i{border-color:var(--goal-ink);background:var(--goal-ink)}
.goal-analysis-list li.is-done i::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.goal-analysis-progress{height:7px;border-radius:99px;background:color-mix(in srgb,var(--goal) 14%,#fff);overflow:hidden}
.goal-analysis-progress span{display:block;width:0;height:100%;border-radius:99px;background:var(--goal-ink);transition:width .4s var(--ease-enter)}
.goal-analysis>small{color:var(--ink-muted);font-size:.76rem}

.goal-plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.goal-result-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:color-mix(in srgb,var(--success-fill) 14%,#fff);color:var(--success);font-size:.74rem;font-weight:800}
.goal-result-pill svg{width:15px;height:15px}
.goal-result-check{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--success);color:#fff;font-size:.86rem;font-weight:800}
.goal-plan-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.goal-plan-hero small{display:block;color:var(--ink-muted);font-size:.74rem;font-weight:700}
.goal-plan-hero strong{display:block;margin-top:3px;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:850;letter-spacing:-.05em}
.goal-plan-status{padding:7px 14px;border-radius:999px;background:color-mix(in srgb,var(--goal) 13%,#fff);color:var(--goal-ink);font-size:.75rem;font-weight:800}
.goal-plan h3{font-size:1.24rem;font-weight:770;letter-spacing:-.03em}
.goal-plan>p{color:var(--ink-soft);font-size:.9rem}
.goal-plan-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.goal-plan-stats span{padding:13px 14px;border:1px solid var(--hairline);border-radius:var(--r-field);background:rgba(255,255,255,.66)}
.goal-plan-stats small{display:block;color:var(--ink-muted);font-size:.7rem;font-weight:700}
.goal-plan-stats b{display:block;margin-top:3px;font-size:1rem;font-weight:800;letter-spacing:-.032em}
.goal-plan-stats .is-money b{color:var(--warning)}
.goal-plan-stats .is-calendar b{color:var(--agenda-ink)}
.goal-plan-stats .is-target b{color:var(--success)}
.goal-schedule-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:6px}
.goal-schedule-head strong{display:block;font-size:.94rem;letter-spacing:-.02em}
.goal-schedule-head small{display:block;margin-top:2px;color:var(--ink-muted);font-size:.74rem}
.goal-schedule-head>b{flex:none;color:var(--goal-ink);font-size:.8rem;font-weight:800}
.goal-shifts{display:grid;gap:8px;max-height:250px;overflow-y:auto;padding-right:4px}
/* Cartão de plantão sugerido - injetado por home.js. */
.goal-shift{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--hairline);border-radius:var(--r-field);background:rgba(255,255,255,.72);animation:fadeUp .5s var(--ease-enter) both}
.goal-shift time{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px}
.goal-shift time b{font-size:1rem;font-weight:850;letter-spacing:-.04em}
.goal-shift time small{font-size:.55rem;font-weight:800;letter-spacing:.08em}
.goal-shift-main{flex:1;min-width:0}
.goal-shift-main b{display:block;font-size:.83rem}
.goal-shift-main small{display:block;margin-top:2px;color:var(--ink-muted);font-size:.72rem}
.goal-shift-side{text-align:right}
.goal-shift-side b{display:block;color:var(--success);font-size:.84rem;font-weight:800}
.goal-shift-side small{display:block;margin-top:2px;color:var(--ink-muted);font-size:.68rem}
.goal-plan-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:13px;border-top:1px solid var(--hairline)}
.goal-plan-footer>span{display:flex;align-items:center;gap:9px}
.goal-plan-footer i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--success);color:#fff;font-size:.7rem;font-style:normal;font-weight:800}
.goal-plan-footer b{font-size:.84rem}
.goal-plan-footer small{color:var(--ink-muted);font-size:.72rem}

/* ---------------------------------------------------------
   06 · Divide Descanso
   --------------------------------------------------------- */
.rest-card{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:clamp(24px,3.4vw,46px);padding:clamp(26px,3.4vw,42px);border-radius:var(--r-hero)}
.rest-controls{display:grid;gap:16px;align-content:start}
.rest-control-head{display:flex;align-items:center;gap:12px}
.rest-control-head small{display:block;color:var(--rest-ink);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.rest-control-head strong{display:block;margin-top:3px;font-size:1.04rem;font-weight:760;letter-spacing:-.025em}
.rest-control-icon{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:16px;border:1px solid var(--hairline);background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--rest) 15%,#fff));color:var(--rest-ink);font-size:1.2rem;box-shadow:0 10px 22px rgba(53,104,168,.13)}
.rest-fixed-shift{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--hairline);border-radius:var(--r-field);background:rgba(255,255,255,.7)}
.rest-fixed-shift small{display:block;color:var(--ink-muted);font-size:.7rem;font-weight:700}
.rest-fixed-shift strong{display:block;margin-top:2px;font-size:1.02rem;font-weight:800;letter-spacing:-.035em}
.rest-fixed-shift b{color:var(--rest-ink);font-size:.72rem;font-weight:750}
.rest-field{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rest-field label{color:var(--ink-soft);font-size:.86rem;font-weight:700}
.stepper{display:inline-flex;align-items:center;gap:3px;padding:4px;border:1px solid var(--hairline);border-radius:999px;background:rgba(255,255,255,.8)}
.stepper button{
  display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:color-mix(in srgb,var(--rest) 12%,#fff);color:var(--rest-ink);font-size:1.02rem;font-weight:800;
  transition:background .25s,transform .2s var(--ease);
}
.stepper button:hover{background:var(--rest-ink);color:#fff}
.stepper button:active{transform:scale(.92)}
.stepper output{min-width:30px;text-align:center;font-size:1rem;font-weight:850}
.rest-control-summary{color:var(--ink-soft);font-size:.82rem;line-height:1.5}

.rest-orbit-workspace{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(20px,2.6vw,34px)}
/* O relógio do rodízio: a noite dividida entre a equipe. */
.rest-orbit-stage{position:relative;width:min(300px,54vw);aspect-ratio:1}
.rest-orbit-stage svg{width:100%;height:100%;transform:rotate(-90deg)}
.rest-orbit-base{fill:none;stroke:color-mix(in srgb,var(--rest) 14%,#fff);stroke-width:14}
.rest-orbit-progress{fill:none;stroke:var(--rest-ink);stroke-width:14;stroke-linecap:round;transition:stroke-dasharray .55s var(--ease-enter)}
.rest-orbit-core{position:absolute;inset:26%;display:grid;place-items:center;gap:2px;text-align:center}
.rest-orbit-core span{font-size:1.4rem}
.rest-orbit-core small{color:var(--ink-muted);font-size:.62rem;font-weight:700}
.rest-orbit-core b{font-size:.94rem;font-weight:850;letter-spacing:-.035em}
.rest-orbit-core em{color:var(--rest-ink);font-size:.66rem;font-style:normal;font-weight:750}
.rest-orbit-person{
  position:absolute;top:50%;left:50%;display:grid;place-items:center;
  width:56px;height:56px;border-radius:19px;
  border:1px solid var(--glass-border);background:rgba(255,255,255,.9);
  box-shadow:0 10px 22px rgba(53,104,168,.13);
  transform:translate(-50%,-50%) rotate(var(--person-angle,0deg)) translateY(-140px) rotate(var(--person-counter-angle,0deg));
  transition:opacity .35s,transform .55s var(--ease-enter),background .35s,color .35s;
}
.rest-orbit-person span{font-size:.82rem;font-weight:850}
.rest-orbit-person small{color:var(--ink-muted);font-size:.5rem;font-weight:700}
.rest-orbit-person.is-covering{background:var(--rest-ink);color:#fff}
.rest-orbit-person.is-covering small{color:rgba(255,255,255,.7)}
.rest-orbit-person.is-hidden{opacity:0;pointer-events:none}
.rest-result{display:grid;gap:13px;align-content:start}
.rest-output-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.rest-output-head small{display:block;color:var(--ink-muted);font-size:.72rem;font-weight:700}
.rest-output-head strong{display:block;margin-top:2px;font-size:1.06rem;font-weight:800;letter-spacing:-.03em}
.rest-output-head>b{flex:none;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--rest) 13%,#fff);color:var(--rest-ink);font-size:.72rem;font-weight:800}
.rest-blocks{display:grid;gap:7px}
.coverage-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--hairline);border-radius:var(--r-field);background:rgba(255,255,255,.72);animation:fadeUp .45s var(--ease-enter) both}
.coverage-time{flex:none;text-align:center}
.coverage-time b{display:block;font-size:.86rem;font-weight:850;letter-spacing:-.035em}
.coverage-time small{display:block;color:var(--ink-muted);font-size:.6rem;font-weight:700}
.coverage-people{flex:1;min-width:0}
.coverage-people small{display:block;color:var(--ink-muted);font-size:.66rem;font-weight:700}
.coverage-people b{display:block;margin-top:2px;font-size:.82rem}
.coverage-count{flex:none;padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--rest) 12%,#fff);color:var(--rest-ink);font-size:.68rem;font-weight:800}
.rest-output-note{display:flex;align-items:center;gap:9px;color:var(--ink-soft);font-size:.78rem}
.rest-output-note i{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--success);color:#fff;font-size:.64rem;font-style:normal;font-weight:800}
.rest-apply{display:grid;gap:8px;padding-top:12px;border-top:1px solid var(--hairline)}
.rest-apply-button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;border:0;border-radius:999px;cursor:pointer;
  background:var(--rest-ink);color:#fff;font-size:.92rem;font-weight:750;
  box-shadow:0 12px 26px color-mix(in srgb,var(--rest) 46%,transparent);
  transition:transform .3s var(--ease),background .3s;
}
.rest-apply-button:hover:not(:disabled){transform:translateY(-2px);background:var(--rest)}
.rest-apply-button:disabled{opacity:.6;cursor:progress}
.rest-apply small{color:var(--ink-muted);font-size:.74rem}
.rest-apply-feedback{color:var(--success);font-size:.8rem;font-weight:750}
.rest-apply-feedback:empty{display:none}

/* ---------------------------------------------------------
   Segurança
   --------------------------------------------------------- */
.security-panel{padding:clamp(30px,4vw,54px);border-radius:var(--r-hero)}
.security-head{display:flex;align-items:flex-start;gap:20px}
.security-head h2{margin-top:4px;font-size:clamp(1.7rem,3.2vw,2.5rem)}
.security-head>div>p{max-width:62ch;margin-top:14px;color:var(--ink-soft);font-size:.98rem}
.lock{
  display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:19px;
  border:1px solid var(--hairline);
  background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--brand-blue) 14%,#fff));
  color:var(--agenda-ink);box-shadow:0 12px 26px rgba(53,104,168,.14);
}
.lock svg{width:26px;height:26px}
.security-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(26px,3vw,40px)}
.security-list li{padding:20px;border:1px solid var(--hairline);border-radius:var(--r-tactile);background:rgba(255,255,255,.62)}
.security-list b{display:block;font-size:.95rem;font-weight:760}
.security-list span{display:block;margin-top:6px;color:var(--ink-soft);font-size:.84rem;line-height:1.5}
.security-link{margin-top:22px}

/* ---------------------------------------------------------
   07 · Widgets
   Os mesmos 5 widgets do WidgetKit (iOS) e do RemoteViews (Android):
   CardHead (glifo + rótulo em caixa alta) → número herói → frase →
   legenda, cada um na cor do módulo que ele resume. O painel escuro por
   trás é a tela de início, para o cartão ler como widget e não como
   mais um card do site.
   --------------------------------------------------------- */
.widgets-stage{
  position:relative;overflow:hidden;padding:clamp(28px,4vw,46px);border-radius:var(--r-hero);
  background:
    radial-gradient(circle at 85% 0%,color-mix(in srgb,var(--brand-teal) 20%,transparent),transparent 46%),
    radial-gradient(circle at 5% 100%,color-mix(in srgb,var(--brand-blue) 16%,transparent),transparent 42%),
    var(--dark);
  box-shadow:var(--shadow-lg);
}
.widgets-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.widget-card{
  --tint:var(--seed);
  display:flex;flex-direction:column;gap:2px;
  padding:16px 17px;border-radius:26px;
  background:linear-gradient(165deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
}
.widget-card[data-mod="agenda"]{--tint:var(--brand-blue)}
.widget-card[data-mod="rest"]{--tint:#7FA8D9}
.widget-card[data-mod="fin"]{--tint:var(--brand-orange)}
.widget-card[data-mod="hist"]{--tint:var(--brand-teal)}
.widget-card.is-wide{grid-column:span 2}
.widget-head{display:flex;align-items:center;gap:6px;margin-bottom:8px;color:var(--tint)}
.widget-head i{display:grid;place-items:center;width:15px;height:15px}
.widget-head svg{width:13px;height:13px}
.widget-head span{color:rgba(255,255,255,.62);font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.widget-num{color:#fff;font-size:1.5rem;font-weight:850;letter-spacing:-.03em;line-height:1.05}
.widget-num em{font-style:normal;font-size:.62em;font-weight:700;color:rgba(255,255,255,.62)}
.widget-sub{margin:1px 0 0;color:rgba(255,255,255,.72);font-size:.78rem;font-weight:600}
.widget-caption{margin-top:auto;padding-top:8px;color:rgba(255,255,255,.44);font-size:.68rem;font-weight:650}
.widget-caption.is-danger{color:#FF8A80}
.widget-bar{margin-top:9px;height:4px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.widget-bar i{display:block;height:100%;border-radius:inherit;background:var(--tint)}

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.faq-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,64px);align-items:start}
.faq-intro p{margin-top:14px;color:var(--ink-soft);font-size:.98rem}
.faq-intro .text-link{margin-top:18px}
.faq-list{display:grid;gap:10px}
.faq-list details{
  padding:4px 20px;border:1px solid var(--hairline);border-radius:var(--r-tactile);
  background:rgba(255,255,255,.66);transition:border-color .25s,background .25s,box-shadow .25s;
}
.faq-list details[open]{border-color:color-mix(in srgb,var(--brand-teal) 34%,#fff);background:rgba(255,255,255,.94);box-shadow:0 12px 28px rgba(53,104,168,.09)}
.faq-list summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 0;cursor:pointer;list-style:none;font-size:.96rem;font-weight:730;letter-spacing:-.015em;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";flex:none;width:11px;height:11px;
  border-right:2px solid var(--tint-ink);border-bottom:2px solid var(--tint-ink);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease);
}
.faq-list details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq-list details p{padding:0 0 18px;color:var(--ink-soft);font-size:.9rem;line-height:1.55}

/* ---------------------------------------------------------
   Download
   --------------------------------------------------------- */
.download-card{
  position:relative;overflow:hidden;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;
  gap:clamp(28px,4vw,56px);border-radius:var(--r-hero);
}
.download-copy{padding:clamp(30px,4.4vw,58px)}
.download-copy h2{margin-top:6px}
.download-copy>p{margin-top:18px;color:var(--ink-soft);font-size:1.04rem}
.download-copy>p strong{color:var(--ink);font-weight:750}
.download-action{display:grid;gap:11px;justify-items:start;margin-top:28px}
.download-action small{color:var(--ink-muted);font-size:.78rem}
.download-human{position:relative;align-self:stretch;min-height:320px}
.download-human img{width:100%;height:100%;object-fit:cover}
/* A foto entra por baixo do vidro, não colada nele. */
.download-human::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(243,247,253,.9),rgba(243,247,253,0) 42%)}

/* ---------------------------------------------------------
   Rodapé
   --------------------------------------------------------- */
.footer{position:relative;margin-top:clamp(40px,6vw,90px);padding-bottom:36px;color:var(--ink)}
.footer-top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--hairline)}
.footer-lead{font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:780;letter-spacing:-.04em}
.footer-mail{color:var(--seed);font-size:clamp(1.05rem,2.2vw,1.7rem);font-weight:700;letter-spacing:-.03em;transition:color .25s}
.footer-mail:hover{color:var(--brand-teal)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:28px;padding:34px 0}
.footer-brand p{margin-top:12px;max-width:30ch;color:var(--ink-soft);font-size:.86rem}
.footer-links{display:grid;gap:9px;align-content:start;font-size:.86rem}
.footer-links strong{margin-bottom:3px;font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.footer-links a{color:var(--ink-soft);transition:color .22s}
.footer-links a:hover{color:var(--seed)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--hairline);color:var(--ink-muted);font-size:.8rem}
/* A assinatura grande: o nome desenhado com o gradiente da marca. */
.footer-wordmark{
  margin-top:26px;font-size:clamp(3rem,13vw,9rem);font-weight:850;line-height:.86;letter-spacing:-.06em;
  background:var(--brand-gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  opacity:.22;user-select:none;
}

/* ---------------------------------------------------------
   Responsivo
   --------------------------------------------------------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-copy{text-align:center;justify-items:center}
  .hero-sub{margin-inline:auto}
  .hero-actions,.hero-proof{justify-content:center}
  .hero-stage{min-height:min(560px,120vw)}
  .bento-hero,.bento-figure{grid-column:span 6}
  .bento-receivables,.bento-payment,.bento-net,.bento-report{grid-column:span 3}
  .flow-grid{grid-template-columns:repeat(2,1fr)}
  .flow-branch{display:none}
  .flow-input{margin-bottom:26px}
  .goal-experience{grid-template-columns:1fr}
  .rest-card{grid-template-columns:1fr}
  .rest-orbit-workspace{grid-template-columns:1fr;justify-items:center}
  .clash-foot{grid-template-columns:1fr;gap:18px}
  .split-head{grid-template-columns:1fr;align-items:start}
  .faq-layout{grid-template-columns:1fr}
  .download-card{grid-template-columns:1fr}
  .download-human{order:-1;min-height:240px}
  .download-human::after{background:linear-gradient(0deg,rgba(243,247,253,.92),rgba(243,247,253,0) 55%)}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:980px){
  .nav-links{display:none}
  .menu-toggle{display:inline-flex}
  .nav-mobile{
    display:grid;gap:2px;overflow:hidden;
    max-height:0;margin:0 4px;padding:0 12px;
    border-radius:var(--r-card);background:rgba(255,255,255,.97);
    box-shadow:0 20px 44px rgba(53,104,168,.16);
    opacity:0;transition:max-height .4s var(--ease),opacity .3s,padding .4s var(--ease),margin .4s var(--ease);
  }
  .nav-mobile.is-open{max-height:440px;margin-top:10px;padding:12px;opacity:1}
  .nav-mobile a{padding:13px 14px;border-radius:var(--r-field);font-size:.95rem;font-weight:700;transition:background .2s}
  .nav-mobile a:hover{background:var(--scaffold)}
  .nav-mobile a:last-child{margin-top:6px;background:var(--seed);color:#fff;text-align:center}
  .security-list{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  .container{width:calc(100% - 32px)}
  .nav{width:calc(100% - 24px)}
  .hero h1{font-size:clamp(2.2rem,9vw,3rem)}
  .bento{grid-template-columns:1fr;gap:14px}
  .bento-hero,.bento-figure,.bento-receivables,.bento-payment,.bento-net,.bento-report{grid-column:auto}
  .flow-grid{grid-template-columns:1fr}
  /* No celular a régua fica curta demais para o rótulo ao lado do
     controle: o horário sobe para a própria linha. */
  .clash-control{grid-template-columns:auto minmax(0,1fr);gap:10px}
  .clash-control output{grid-column:2;text-align:left}
  .clash-lane{height:46px}
  .clash-legend{gap:14px}
  .overview-body{grid-template-columns:1fr;gap:18px}
  .goal-plan-stats{grid-template-columns:1fr}
  .report-options{grid-template-columns:1fr}
  .chaos{display:none}
  .locals-card{position:static;width:100%;margin-top:14px;animation:none}
  .orbit{position:static;width:100%;margin-top:14px;animation:none}
  .hero-stage{min-height:auto;gap:14px}
  .device{margin-inline:auto}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{justify-content:flex-start}
  .widgets-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------------------------------------------------------
   Movimento reduzido - a mesma promessa do app: nada se move,
   mas nada some (`motionReduced` / `MediaQuery.disableAnimationsOf`).
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1;transform:none}
}

/* ---------------------------------------------------------
   O vidro aplicado aos componentes
   Em vez de exigir `class="glass"` e três <span> em cada cartão, os
   componentes herdam a superfície aqui. Um lugar só decide como é um
   cartão do Calendoctor - igual ao `GlassSurface` no app.
   --------------------------------------------------------- */
.bento-card,
.flow-card,
.flow-input-card,
.goal-form-card,
.goal-result,
.rest-card,
.security-panel,
.download-card,
.am-cockpit,
.am-calendar{
  position:relative;isolation:isolate;
  border:1px solid var(--glass-border);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.98) 0%,
      color-mix(in srgb,var(--tint) 5%,#fff) 45%,
      color-mix(in srgb,var(--tint) 13%,#fff) 100%);
  box-shadow:0 -1px 1px rgba(255,255,255,.55);
}
.bento-card::before,
.flow-card::before,
.flow-input-card::before,
.goal-form-card::before,
.goal-result::before,
.rest-card::before,
.security-panel::before,
.download-card::before,
.orbit::before,
.locals-card::before,
.am-cockpit::before,
.am-calendar::before{
  content:"";position:absolute;z-index:-1;inset:-1px;border-radius:inherit;
  box-shadow:0 16px 32px color-mix(in srgb,var(--tint) 34%,#3568A8);
  opacity:.12;
}
/* O brilho branco de canto e a borda interna. */
.bento-card::after,
.flow-card::after,
.goal-form-card::after,
.rest-card::after,
.security-panel::after,
.orbit::after,
.am-cockpit::after,
.am-calendar::after{
  content:"";position:absolute;z-index:0;top:-90px;right:-64px;
  width:210px;height:210px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--glass-highlight),rgba(255,255,255,0) 70%);
}
.bento-card>*,
.flow-card>*,
.flow-input-card>*,
.goal-form-card>*,
.rest-card>*,
.security-panel>*,
.orbit>*,
.locals-card>*,
.am-cockpit>*,
.am-calendar>*{position:relative;z-index:1}
/* O cartão que precisa cortar o brilho no próprio raio. */
.bento-card,.flow-card,.goal-form-card,.rest-card,.security-panel,.download-card,.orbit,.goal-result,.am-cockpit,.am-calendar{overflow:hidden}

/* Mesma superfície, sem declarar `position`: os cartões que orbitam já são
   `absolute` na regra própria (e viram `static` no mobile). Declarar
   `relative` aqui, no fim do arquivo, anulava a media query. */
.orbit,
.locals-card{
  isolation:isolate;
  border:1px solid var(--glass-border);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.98) 0%,
      color-mix(in srgb,var(--tint) 5%,#fff) 45%,
      color-mix(in srgb,var(--tint) 13%,#fff) 100%);
  box-shadow:0 -1px 1px rgba(255,255,255,.55);
}