/* Sistema do Fechamento da liderança de TI (decisão 11B): as peças da LP.
   Tudo é medido em --u. Na LP, --u vale 1cqw do palco 16:9; nas telas, a página
   define o --u dela. Posição de cada peça fica em cada página, nunca aqui. */

@font-face {
  font-family: "Archivo"; src: url("archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; src: url("archivo-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens: o tema troca só aqui ---------- */
:root[data-tema="claro"] {
  --paper: #e3e2e0;     /* cinza metálico TMB, o papel */
  --ink: #092745;       /* azul escuro TMB: texto, réguas e a sala */
  --ink-2: #3f576e;     /* 5,8:1 sobre o papel, 7,4:1 sobre o branco */
  --accent: #3574ff;    /* azul médio no lugar do verde */
  --on-accent: #000000; /* 5,1:1 sobre o azul médio; o azul escuro daria 3,7:1 */
  --card: #ffffff;
  --on-card: #092745;
  --field: #ffffff;     /* campo: texto #092745 a 15:1 */
  --room: 0.16;
  --room-faint: 0.07;
  --flower: #ffffff;
  --shadow: color-mix(in srgb, #092745 30%, transparent);
  color-scheme: light;
}
:root[data-tema="escuro"] {
  --paper: #000000;
  --ink: #ffffff;
  --ink-2: #b6b5b3;     /* 10:1 sobre o preto */
  --accent: #00bbff;    /* ciano só sobre preto */
  --on-accent: #000000;
  --card: #ffffff;
  --on-card: #000000;
  --field: #000000;
  --room: 0.2;
  --room-faint: 0.09;
  --flower: #000000;
  --shadow: rgba(0, 187, 255, .28);
  color-scheme: dark;
}
:root { --ease-pop: cubic-bezier(.3, 1.6, .5, 1); --ease-draw: cubic-bezier(.6, 0, .2, 1); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); }
body {
  font-family: "Archivo", Arial, sans-serif;
  font-variation-settings: "wdth" 100, "wght" 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- a sala em perspectiva ---------- */
.room { position: absolute; inset: 0; width: 100%; height: 100%; display: block; color: var(--ink); pointer-events: none; }
.room line, .room path { vector-effect: non-scaling-stroke; }
.room-g { opacity: var(--room-op, var(--room)); }

/* ---------- a régua do topo ---------- */
.rule-top {
  display: grid; grid-template-columns: auto auto 1fr auto auto; align-items: center; column-gap: calc(2.4 * var(--u));
  font-size: calc(1.05 * var(--u)); line-height: 1.1; text-transform: uppercase; letter-spacing: .02em;
  font-variation-settings: "wdth" 100, "wght" 800;
}
.index { display: inline-flex; align-items: center; gap: .9em; border: calc(.12 * var(--u)) solid var(--ink); border-radius: 999px; padding: .12em .9em .12em .12em; font-size: .72em; }
.index b { background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: .3em 1.2em; font-weight: normal; font-variation-settings: "wdth" 100, "wght" 800; font-variant-numeric: tabular-nums; }
.tagline { font-size: 1.18em; font-variation-settings: "wdth" 100, "wght" 900; margin-left: calc(1 * var(--u)); }
.brace { grid-column: 4; font-size: 1.3em; font-variation-settings: "wdth" 100, "wght" 700; letter-spacing: .04em; margin-right: calc(2.6 * var(--u)); }
.reel { grid-column: 5; display: flex; align-items: center; gap: .8em; font-size: .8em; text-align: right; font-variant-numeric: tabular-nums; }
.reel i { display: block; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--accent); border: calc(.12 * var(--u)) solid var(--ink); flex: none; }

/* ---------- o título em caixa alta e os enfeites ---------- */
.h1 {
  margin: 0; font-weight: normal;
  font-variation-settings: "wdth" 125, "wght" 900; line-height: .95; letter-spacing: -.035em;
  text-transform: uppercase; color: var(--ink);
}
.line { display: block; width: max-content; white-space: nowrap; position: relative; }
.ch { display: inline-block; transition: transform .35s var(--ease-pop), color .2s; }
.ch:hover { transform: translateY(-.08em) rotate(-4deg); color: var(--accent); }
.arrow { display: inline-block; width: .6em; height: .6em; margin: 0 .08em 0 .12em; vertical-align: -.02em; }
.arrow path { stroke: currentColor; stroke-width: 15; fill: none; stroke-linecap: square; }
.badge {
  position: absolute; top: -.05em; left: calc(100% + .5em); white-space: nowrap;
  font-size: .21em; line-height: 1; letter-spacing: 0; text-transform: none; font-variation-settings: "wdth" 100, "wght" 800;
  border: calc(.13 * var(--u)) solid var(--ink); border-radius: 50%; padding: .8em 1.2em; transform: rotate(-9deg);
  transition: background .25s, color .25s, transform .4s var(--ease-pop); cursor: default;
}
.badge sup { font-size: .7em; margin-left: .1em; }
.badge:hover { background: var(--accent); color: var(--on-accent); transform: rotate(6deg) scale(1.08); }
.swash { position: relative; display: inline-block; }
.swash svg { position: absolute; left: -.24em; top: -.12em; width: 1.46em; height: 1.2em; overflow: visible; pointer-events: none; } /* centrado na tinta da letra, não na caixa */
.swash path { fill: none; stroke: var(--ink); stroke-width: 3; /* 0,03em: o traço acompanha a letra em qualquer tela */ stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: draw 1.6s .5s var(--ease-draw) both; }
.h1:hover .swash path { animation: draw 1.1s var(--ease-draw) both; }
.l3 { font-size: .86em; }
.l4 { font-size: 1.2em; letter-spacing: -.02em; margin-top: .04em; }
/* a etiqueta vertical é um módulo da barra da semana */
.vtag { display: inline-flex; flex-direction: column; align-items: stretch; vertical-align: -.02em; margin: 0 .1em 0 .06em; width: .2em; height: .95em; }
.vtag .vl { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; white-space: nowrap; background: var(--ink); color: var(--paper); writing-mode: vertical-rl; font-size: .085em; font-variation-settings: "wdth" 100, "wght" 800; letter-spacing: .12em; padding: .55em 0; text-align: center; }
.vtag .bars { flex: none; display: flex; flex-direction: column; gap: .016em; padding-top: .035em; }
.vtag .bars i { display: block; height: .016em; background: var(--ink); transform-origin: left; }
.vtag .bars i.n { height: .045em; }
.vtag .bars i.p { height: .045em; background: linear-gradient(var(--ink) 0 33%, transparent 33% 67%, var(--ink) 67%); }
.bracket { position: relative; display: inline-block; padding: 0 .08em; }
.bracket svg { position: absolute; left: -.02em; top: -.1em; width: calc(100% + .04em); height: calc(100% + .22em); overflow: visible; }
.bracket path { fill: none; stroke: var(--ink); stroke-width: calc(.62 * var(--u)); transition: transform .45s var(--ease-pop); }
.bracket:hover .arc-t { transform: translateY(-10px); }
.bracket:hover .arc-b { transform: translateY(10px); }
.star { display: inline-block; font-size: .66em; vertical-align: .5em; margin-left: .02em; transition: transform .6s var(--ease-pop); }
.l4:hover .star { transform: rotate(180deg) scale(1.2); }

/* ---------- a pílula dupla ---------- */
.pill { display: flex; align-items: stretch; font-size: calc(1.72 * var(--u)); line-height: 1; font-variation-settings: "wdth" 100, "wght" 800; }
.pill-a { position: relative; z-index: 1; background: var(--card); color: var(--on-card); border: calc(.16 * var(--u)) solid var(--ink); border-radius: 999px; padding: .72em 1.25em; white-space: nowrap; }
.pill-b {
  display: inline-flex; align-items: center; gap: .5em; margin-left: -1.4em; padding: .72em 3.4em .72em 3.1em;
  background: var(--accent); color: var(--on-accent); border: calc(.16 * var(--u)) solid var(--ink); border-radius: 0 999px 999px 0; text-decoration: none;
  font: inherit; cursor: pointer;
  transition: background .25s, color .25s, padding .35s cubic-bezier(.3, 1.4, .5, 1);
}
.pill-b em { font-style: normal; display: inline-block; width: 0; overflow: hidden; opacity: 0; transition: width .35s, opacity .25s; }
.pill-b:hover, .pill-b:focus-visible { background: var(--ink); color: var(--paper); padding-right: 2.4em; outline: none; }
.pill-b:focus-visible { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--accent); }
.pill-b:hover em, .pill-b:focus-visible em { width: 1em; opacity: 1; }

/* ---------- flor, laço solto e marcas de canto ---------- */
.flower { aspect-ratio: 1; animation: spin 22s linear infinite; cursor: grab; }
.flower svg { display: block; width: 100%; height: 100%; overflow: visible; transition: transform .5s cubic-bezier(.3, 1.8, .5, 1); }
.flower:hover svg { transform: scale(1.18) rotate(40deg); }
.flower path { fill: var(--flower); stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; }
.flower circle { fill: none; stroke: var(--ink); stroke-width: 2; }
.curl { aspect-ratio: 1; overflow: visible; pointer-events: none; }
.curl path { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: draw 1.4s 1s var(--ease-draw) both; }
.tick { position: absolute; width: 0; border-left: calc(.1 * var(--u)) solid var(--ink); }
.tick::after { content: ""; position: absolute; bottom: 0; left: calc(-.1 * var(--u)); width: calc(1.1 * var(--u)); border-top: calc(.1 * var(--u)) solid var(--ink); transform: rotate(28deg); transform-origin: left; }

/* ---------- a fileira das 4 áreas ---------- */
.services { display: flex; gap: calc(3.2 * var(--u)); margin: 0; padding: 0; list-style: none; font-size: calc(1.3 * var(--u)); font-variation-settings: "wdth" 100, "wght" 800; }
.services li { position: relative; cursor: default; padding-bottom: .25em; white-space: nowrap; }
.services li small { font-size: .78em; font-variation-settings: "wdth" 100, "wght" 500; color: var(--ink-2); margin-left: .35em; font-variant-numeric: tabular-nums; }
.services li.mine small { color: var(--ink); font-variation-settings: "wdth" 100, "wght" 800; }
.services li.miss { color: var(--ink-2); }
.services li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .18em; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-draw); }
.services li:hover::after, .services li.mine::after { transform: scaleX(1); }

/* ---------- o fantasma ---------- */
.ghost {
  position: absolute; aspect-ratio: 231 / 289;
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  border-radius: 50% 50% 14% 14%; font: inherit;
}
.g-shadow { position: absolute; left: 12%; right: 12%; top: 104%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, var(--shadow), transparent); transform-origin: 50% 50%; pointer-events: none; }
.ghost:focus-visible { outline: calc(.2 * var(--u)) dashed var(--ink); outline-offset: calc(.4 * var(--u)); }
.g-body { position: absolute; inset: 0; transform-origin: 50% 0; will-change: transform; }
.g-fill {
  position: absolute; inset: 0;
  -webkit-mask: var(--ghost) center / 100% 100% no-repeat; mask: var(--ghost) center / 100% 100% no-repeat;
  background:
    radial-gradient(60% 45% at 28% 18%, #bfeaff 0, transparent 70%),
    radial-gradient(55% 50% at 78% 32%, #00bbff 0, transparent 72%),
    radial-gradient(70% 55% at 35% 70%, #3574ff 0, transparent 75%),
    #092745;
  background-size: 160% 160%; background-position: 30% 20%;
  animation: gfloat 14s ease-in-out infinite alternate;
}
.ghost.is-still .g-fill { animation: none; }
.g-fill canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ghost svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-eye { fill: #ffffff; }
.g-happy { display: none; fill: none; stroke: #ffffff; stroke-width: 7; stroke-linecap: round; }
.ghost.is-happy .g-eye { display: none; }
.ghost.is-happy .g-happy { display: inline; }

/* ---------- o balão ---------- */
.bubble {
  position: absolute; max-width: 78%; width: max-content;
  background: var(--card); color: var(--on-card); border: calc(.16 * var(--u)) solid var(--ink);
  border-radius: 1.4em 1.4em 1.4em .2em; padding: .8em 1.1em; font-size: calc(1.3 * var(--u)); line-height: 1.2; text-align: left;
  font-variation-settings: "wdth" 100, "wght" 800; box-shadow: calc(.35 * var(--u)) calc(.35 * var(--u)) 0 var(--accent);
  transform-origin: 0 100%; transform: scale(0) rotate(-8deg); opacity: 0;
  transition: transform .45s var(--ease-pop), opacity .2s; pointer-events: none; z-index: 2;
}
.bubble[data-on="true"] { transform: scale(1) rotate(-4deg); opacity: 1; }

@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes gfloat { to { background-position: 70% 80%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}