/* Identidade nova da IMT Academy (12/10/2026) — a base COMPARTILHADA
 * Cópia das partes genéricas de /agencia/assets/agencia.css v6 (a /agencia/ no ar desde 12/10/2026, 8d08bd8),
 * com os MESMOS nomes de classe, para a /agencia/ poder carregar este arquivo depois sem mexer no HTML.
 * Quem usa hoje: a home (vitrine.php). A /agencia/ ainda tem a própria cópia: até ela passar a carregar este
 * arquivo (subida SEPARADA, com foto antes/depois da /agencia/), mudança aqui NÃO chega lá, e vice-versa.
 *
 * Linhas copiadas do agencia.css v6: 12–57 (tokens, molas, temas palco/papel; sem o .dobra--verde),
 * 62–81 (base), 83–84 + 86–93 (tipografia, sem .anton), 96–99 (faixa), 102–105 (estrela), 110–114 (anéis, sem
 * as posições por seção), 123–125 (rasgado), 137–152 (pílula, botão), 157–185 (topo fixo, @israelmeira, Entrar),
 * 686–696 (rodapé), 720–723 + 726 + 728–741 (revelar à prova de falha, faixa, serifada, estrela, anéis) e o
 * prefers-reduced-motion (só os seletores genéricos). Acrescentados aqui: --mola-estalo e html.parado (o
 * lp.js usa para cortar transições onde não há getAnimations()).
 *
 * Paleta da IMT Academy: lime #D8FF00 como a única cor herói; palco (preto em radial) e papel (off-white em
 * radial) alternando. Grotesca fina (Bricolage, opsz 96) + Bodoni Moda Black Italic (opsz 11) na palavra-chave.
 * Lime NUNCA é fundo de dobra nem texto/fio fino sobre o papel (1,02:1).
 * Revelar à prova de falha: todo estado escondido vive só em html.anima …:not(.ok).
 */

:root {
  --lime: #D8FF00; --preto: #000; --branco: #FCFCFC; --tinta: #0A0B07;
  --palco-base: #101010;
  --palco: radial-gradient(120% 90% at 50% 28%, #1C1C1C 0%, #101010 48%, #060606 100%);
  --papel-base: #F2F1EC;
  --papel: radial-gradient(140% 100% at 50% 46%, #F5F4F0 0%, #F2F1EC 50%, #E3E2DD 100%);
  --rasgado: #FBFBF8; --fibra: #E6E4DE;
  --cartao-palco: #141414; --campo: #151515;
  --apoio-papel: #2B2B2B; --nota-papel: #555555; --apoio-palco: #B9B9B9; --nota-palco: #9A9A9A;
  --cromo-palco: linear-gradient(172deg, #FFFFFF 0%, #D9D9D9 35%, #8E8E8E 52%, #F2F2F2 70%, #6E6E6E 100%);
  --cromo-papel: linear-gradient(172deg, #000 0%, #3C3C3C 38%, #050505 55%, #2A2A2A 78%, #000 100%);
  --f: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-serif: 'Bodoni Moda', 'Bodoni 72', Didot, Georgia, serif;
  --f-esp: 'Montserrat', system-ui, sans-serif;
  --larg: 1180px; --gutter: 20px;
  --raio-cartao: 28px; --raio-peca: 12px;
  --dobra-y: clamp(48px, 2rem + 4vw, 120px);
  --topo-h: 64px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-seno: cubic-bezier(.37, 0, .63, 1);
  --mola-suave: cubic-bezier(.25, .24, .14, 1.18);
  --mola: cubic-bezier(.27, .29, .11, 1.21);
  --mola-viva: cubic-bezier(.30, .36, .11, 1.28);
  --mola-estalo: cubic-bezier(.40, 1.07, 0, 1.17);   /* (do lp.css) a seta do botão quando o card ativa */
  /* lidos pelo player de som, pelo cupom e pelas parcelas (compartilhados) */
  --acento: var(--lime); --acento-tx: #000; --tx-fraco: var(--apoio-palco);   /* --acento-escuro fica indefinido: parcelas/cupom/oferta caem no lime (o checkout é escuro) */
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --mola-suave: linear(0, 0.005 1.5%, 0.021 3%, 0.053 5%, 0.095 7%, 0.187 10.5%, 0.521 22%, 0.611 25.5%, 0.691 29%, 0.75 32%, 0.81 35.5%, 0.859 39%, 0.899 42.5%, 0.938 47%, 0.966 51.5%, 0.987 56.5%, 1.002 62.5%, 1.011 77.5%, 1.005 99.5%, 1);
    --mola: linear(0, 0.006 1.5%, 0.021 3%, 0.055 5%, 0.1 7%, 0.196 10.5%, 0.533 21.5%, 0.628 25%, 0.712 28.5%, 0.774 31.5%, 0.835 35%, 0.885 38.5%, 0.925 42%, 0.959 46%, 0.986 50.5%, 1.003 55%, 1.015 60.5%, 1.019 73.5%, 1.005 99.5%, 1);
    --mola-viva: linear(0, 0.005 1.5%, 0.027 3.5%, 0.063 5.5%, 0.109 7.5%, 0.223 11.5%, 0.572 22.5%, 0.671 26%, 0.758 29.5%, 0.822 32.5%, 0.886 36%, 0.93 39%, 0.971 42.5%, 1.005 46.5%, 1.027 50.5%, 1.042 55%, 1.048 59.5%, 1.044 68.5%, 1);
  }
}
@media (min-width: 900px) { :root { --gutter: 40px; --topo-h: 76px; } }

/* temas por dobra: os componentes leem só estas variáveis */
.dobra--palco { background: var(--palco-base); background-image: var(--palco); color: var(--branco);
  --tx: var(--branco); --tx-fraco: var(--apoio-palco); --nota: var(--nota-palco); --fio: rgba(255,255,255,.12);
  --contorno: rgba(255,255,255,.55); --fx-bg: var(--lime); --fx-tx: #000; --estrela: var(--lime); --serif-cor: var(--lime);
  --acento: var(--lime); --acento-tx: #000; --cromo: var(--cromo-palco); --foco: var(--lime); }
.dobra--papel { background: var(--papel-base); background-image: var(--papel); color: #000;
  --tx: #000; --tx-fraco: var(--apoio-papel); --nota: var(--nota-papel); --fio: rgba(0,0,0,.09);
  --contorno: rgba(0,0,0,.45); --fx-bg: #000; --fx-tx: var(--lime); --estrela: #000; --serif-cor: #000;
  --acento: #000; --acento-tx: var(--lime); --cromo: var(--cromo-papel); --foco: #000; }

/* ── base ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 8px); scroll-padding-bottom: 104px; overflow-x: clip; }
body { margin: 0; font: 400 1.0625rem/1.5 var(--f); color: #000; background: var(--palco-base); overflow-x: clip; -webkit-font-smoothing: antialiased; letter-spacing: -.005em; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
b, strong { font-weight: 650; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--foco, var(--lime)); outline-offset: 3px; border-radius: 6px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sem-quebra { white-space: nowrap; }
.dobra { position: relative; padding: var(--dobra-y) 0; overflow: clip; }
.dentro { position: relative; z-index: 1; width: 100%; max-width: calc(var(--larg) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.dentro--estreito { max-width: calc(820px + 2 * var(--gutter)); }

.grao { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .06;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── tipografia da identidade ───────────────────────────────────────────── */
.esp { font: 600 clamp(.75rem, .7rem + .2vw, .8125rem)/1.6 var(--f-esp); letter-spacing: .42em; text-transform: uppercase; color: var(--tx-fraco); text-wrap: balance; }
.esp--centro { text-align: center; padding-left: .42em; }
.fina { font: 250 clamp(2rem, 1.15rem + 3.6vw, 3.75rem)/1.04 var(--f); font-variation-settings: 'opsz' 96; letter-spacing: -.045em; text-wrap: balance; max-width: 20ch; color: var(--tx); }
@media (max-width: 599px) { .fina { font-weight: 300; } }
.serif { font-family: var(--f-serif); font-style: italic; font-weight: 900; font-variation-settings: 'wght' 900, 'opsz' 11; letter-spacing: -.03em; font-size: 1.12em; line-height: 1; color: var(--serif-cor); }
.misto .serif--g { display: block; margin-top: .08em; font-size: clamp(3.25rem, 1.4rem + 7.6vw, 8.5rem); letter-spacing: -.04em; white-space: nowrap; }
.lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.45; letter-spacing: -.01em; color: var(--tx-fraco); max-width: 52ch; }
.nota { font-size: .875rem; line-height: 1.45; color: var(--nota); max-width: 70ch; }
.nota--centro { text-align: center; margin-left: auto; margin-right: auto; }
.num, .num-m, .numero { font-family: var(--f-serif); font-style: italic; font-weight: 900; font-variation-settings: 'wght' 900, 'opsz' 6; letter-spacing: -.05em; line-height: .9; font-variant-numeric: lining-nums; }

/* faixa: o destaque de cantos retos (lime no palco; preta com texto lime no papel e no verde) */
.faixa { background: linear-gradient(var(--fx-bg), var(--fx-bg)) no-repeat 0 0 / 100% 100%; color: var(--fx-tx);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.serif.faixa { display: inline-block; line-height: .92; padding: .04em .14em .12em .10em; color: var(--fx-tx); }

.estrela { fill: var(--estrela); flex: none; display: inline-block; vertical-align: top; }
.estrela--g { width: clamp(56px, 4vw + 30px, 96px); rotate: 12deg; }
.estrela--p { width: clamp(28px, 1.5vw + 20px, 44px); rotate: 6deg; }
.estrela--hero { width: clamp(30px, 2vw + 18px, 50px); rotate: 12deg; margin: -.2em 0 0 .08em; }

/* anéis concêntricos: divs (pulso no compositor), cortados pela borda da dobra */
.aneis { position: absolute; left: var(--ax, 50%); top: var(--ay, 50%); width: 0; height: 0; pointer-events: none; z-index: 0; --k: .5; }
@media (min-width: 600px) { .aneis { --k: .75; } } @media (min-width: 1100px) { .aneis { --k: 1; } }
.aneis i { position: absolute; left: 0; top: 0; width: calc(var(--r) * 2 * var(--k)); aspect-ratio: 1; translate: -50% -50%; border: 1.5px solid var(--fio); border-radius: 50%; }
.aneis i:nth-child(1) { --r: 250px; --n: 0; } .aneis i:nth-child(2) { --r: 372px; --n: 1; } .aneis i:nth-child(3) { --r: 500px; --n: 2; }
.aneis i:nth-child(4) { --r: 640px; --n: 3; } .aneis i:nth-child(5) { --r: 800px; --n: 4; }

/* papel rasgado: o rasgo só em cima e embaixo; o filtro fica nos pseudos, nunca no texto */
.rasgado { position: relative; isolation: isolate; color: #111; }
.rasgado::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--rasgado); filter: url(#rasgo); box-shadow: 0 16px 22px var(--sombra-rasgo, rgba(0,0,0,.2)); }
.rasgado::after { content: ""; position: absolute; inset: -5px 0; z-index: -2; background: var(--fibra); filter: url(#rasgo); }

/* pílula (links secundários) e botão cheio */
.pilula { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 24px;
  border: 1.5px solid var(--contorno); color: var(--tx); font: 500 1rem/1.15 var(--f); text-decoration: none; text-align: center;
  transition: background-color .2s, color .2s, border-color .2s; }
@media (hover: hover) { .pilula:hover { background: var(--tx); color: var(--fundo-pilula, #000); border-color: var(--tx); } .dobra--papel .pilula:hover, .dobra--verde .pilula:hover { --fundo-pilula: var(--lime); } }
.ic { width: 20px; height: 20px; flex: none; }
.cta { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 0 30px; border: 0; border-radius: 999px;
  font: 600 1.0625rem/1.15 var(--f); letter-spacing: -.01em; text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .2s var(--ease-out), box-shadow .3s var(--ease-out); }
.cta:active { transform: scale(.97); transition-duration: .09s; }
.cta--preto { background: #000; color: var(--lime); box-shadow: 0 14px 34px -14px rgba(0,0,0,.55); }
.cta--lime { background: var(--lime); color: #000; box-shadow: 0 0 34px rgba(216,255,0,.26); }
@media (hover: hover) { .cta--preto:hover { box-shadow: 0 18px 44px -12px rgba(0,0,0,.7), 0 0 0 3px rgba(0,0,0,.12); } .cta--lime:hover { box-shadow: 0 0 52px rgba(216,255,0,.42); } }
.cta--brilho { overflow: hidden; isolation: isolate; }
.cta--brilho::after { content: ""; position: absolute; top: 0; left: 0; width: 30%; height: 100%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg) translateX(-150%); animation: brilho 3.5s linear infinite; }
@keyframes brilho { 0% { transform: skewX(-20deg) translateX(-150%); } 71.5%, 100% { transform: skewX(-20deg) translateX(420%); } }

/* ═══ TOPO FIXO: logo + @israelmeira à esquerda, "Já comprei" discreto ═══
 * Nasce sobre o escuro do hero (logo lime, Instagram em pílula de contorno);
 * depois do hero ganha o fundo de vidro escuro. */
.topo { position: absolute; top: 0; left: 0; right: 0; z-index: 70; height: var(--topo-h); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 max(16px, calc((100% - var(--larg)) / 2)); color: var(--branco); transition: background-color .3s, box-shadow .3s; }
@media (min-width: 900px) { .topo { padding: 0 max(40px, calc((100% - var(--larg)) / 2)); } }
html.js .topo { position: fixed; }
.topo__esq { display: flex; align-items: center; gap: 12px; min-width: 0; }
@media (min-width: 900px) { .topo__esq { gap: 18px; } }
.topo .logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.topo .logo img { height: 26px; width: auto; }
@media (min-width: 900px) { .topo .logo img { height: 30px; } }
/* o Instagram: pílula de contorno, branca; não é botão de compra (sem lime) */
.ig { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; min-width: 44px; padding: 0 16px 0 13px; border-radius: 999px; text-decoration: none;
  font: 500 .95rem/1 var(--f); letter-spacing: -.005em; }
.ig b { font-weight: 650; }
.ig--topo { padding: 0; width: 44px; justify-content: center; color: var(--branco); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.24);
  font-size: .875rem; transition: background-color .2s, color .2s, border-color .2s; }
.ig--topo .ig__tx { display: none; }
.ig--topo .ic { width: 18px; height: 18px; }
@media (min-width: 430px) { .ig--topo { width: auto; padding: 0 15px 0 12px; } .ig--topo .ig__tx { display: inline; } }
@media (hover: hover) { .ig--topo:hover { background: var(--branco); color: #000; border-color: var(--branco); } }
/* "Já comprei · Entrar": vidro escuro, legível sobre o escuro e sobre o verde da foto */
.hero__entrar { display: inline-flex; align-items: center; gap: .32em; min-height: 44px; padding: 0 16px; border-radius: 999px; flex: none;
  border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font: 500 .875rem/1 var(--f); text-decoration: none; color: rgba(252,252,252,.86); white-space: nowrap; transition: color .2s, border-color .2s; }
.hero__entrar b { font-weight: 650; color: var(--branco); }
@media (hover: hover) { .hero__entrar:hover { color: var(--branco); border-color: rgba(255,255,255,.5); } }
.so-largo { display: none; }
@media (min-width: 600px) { .so-largo { display: inline; } }
.topo.topo--solido { background: rgba(8,8,8,.86); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.topo :focus-visible { outline-color: var(--lime); }

/* ═══ RODAPÉ (palco) ═════════════════════════════════════════════════════ */
.rodape { padding: 56px 0 120px; background: var(--palco-base); color: var(--branco); }
.rodape__grade { display: grid; gap: 22px; justify-items: start; }
.rodape .logo { display: inline-flex; align-items: center; min-height: 44px; }
.rodape .logo img { height: 30px; width: auto; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.rodape nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 .95rem/1 var(--f); text-decoration: none; color: var(--apoio-palco); }
.rodape nav a:first-child { color: var(--lime); }
.ig--rodape { border: 1.5px solid rgba(255,255,255,.55); color: var(--branco); }
@media (hover: hover) { .ig--rodape:hover { background: var(--branco); color: #000; } }
.rodape__assina { color: #8A8A8A; font-size: .6875rem; }
@media (min-width: 900px) { .rodape { padding: 64px 0; } .rodape__grade { grid-template-columns: auto 1fr auto; align-items: center; gap: 24px 40px; } .rodape nav { justify-content: center; } .rodape__assina { grid-column: 1 / -1; } }

/* ═══ ANIMAÇÃO — revelar à prova de falha ═════════════════════════════════
 * Nada aqui esconde nada sem html.anima (que o JS só põe depois de confirmar
 * que consegue animar). Tirar .anima mostra o estado final.                  */
html.anima .anim { transition: opacity .14s var(--ease-out) var(--d, 0ms), transform .5s var(--mola) var(--d, 0ms); }
html.anima .anim:not(.ok) { opacity: 0; transform: translateY(26px) scale(.975); }
html.anima .d1 { --d: 60ms; } html.anima .d2 { --d: 120ms; } html.anima .d3 { --d: 180ms; } html.anima .d4 { --d: 240ms; }
html.anima .d5 { --d: 300ms; } html.anima .d6 { --d: 360ms; } html.anima .d7 { --d: 420ms; }
html.anima .hero .d1 { --d: 100ms; } html.anima .hero .d2 { --d: 220ms; } html.anima .hero .d3 { --d: 700ms; } html.anima .hero .d4 { --d: 900ms; } html.anima .hero .d5 { --d: 1100ms; }
/* a faixa varre da esquerda; o texto aparece depois */
html.anima .faixa { transition: background-size .26s var(--ease-out) calc(var(--d, 0ms) + 120ms), color .2s var(--ease-out) calc(var(--d, 0ms) + 240ms); }
html.anima .anim:not(.ok) .faixa { background-size: 0% 100%; color: transparent; }
html.anima .hero h1 .faixa { transition-delay: calc(var(--d, 0ms) + 500ms), calc(var(--d, 0ms) + 620ms); }
/* a serifada entra 120 ms depois da linha */
html.anima .anim .serif:not(.faixa) { display: inline-block; transition: transform .52s var(--mola-viva) calc(var(--d, 0ms) + 120ms), opacity .2s var(--ease-out) calc(var(--d, 0ms) + 120ms); }
html.anima .misto .serif--g { display: block; }
html.anima .anim:not(.ok) .serif:not(.faixa) { transform: scale(1.08); opacity: 0; }
/* estrelas giram até o ângulo final */
html.anima .anim .estrela { transition: transform .6s var(--mola-viva) calc(var(--d, 0ms) + 260ms); }
html.anima .anim:not(.ok) .estrela { transform: rotate(-20deg) scale(.6); }
/* anéis pulsando (só na tela) */
html.anima .aneis i { animation: pulsa 8s var(--ease-seno) calc(var(--n) * .5s) infinite; }
.aneis.parada i { animation-play-state: paused; }
@keyframes pulsa { 0%, 100% { opacity: .55; transform: scale(.99); } 50% { opacity: 1; transform: scale(1.01); } }
/* reserva do lp.js para cortar transições em curso onde não há getAnimations() */
html.parado *, html.parado *::before, html.parado *::after { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta--brilho::after, .aneis i { animation: none !important; }
  *, *::before, *::after { transition-duration: .001ms !important; transition-delay: 0ms !important; }
}