/* Webfonts da Iluminer Creators — arquivos .woff2 copiados de 01 - Site/manual-de-marca/fonts.
   Syne = display/títulos · Outfit = corpo/UI.
   Manrope (UI do AgencyPanel) é carregada pelo Google Fonts a partir de styles.css,
   exatamente como no código-fonte do painel (resources/css/app.css). */

@font-face{font-family:Syne;src:url("./fonts/syne-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Syne;src:url("./fonts/syne-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Syne;src:url("./fonts/syne-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url("./fonts/outfit-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url("./fonts/outfit-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url("./fonts/outfit-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Outfit;src:url("./fonts/outfit-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ── Cores da Iluminer Creators ─────────────────────────────────────────────
   Base extraída do logo (manual-de-marca/index.html) e do CSS do site
   (assets/css/home.css · assets/css/site.css) e do AgencyPanel
   (resources/css/app.css · tailwind.config.js).
   Regra de uso do manual: 70% preto · 25% magenta+roxo · 5% ouro.        */

:root{
  color-scheme:dark;

  /* Marca — valores literais do manual */
  --ilu-magenta:#D81B8A;        /* cor-âncora */
  --ilu-magenta-live:#E91E9C;   /* hover, glow, destaque */
  --ilu-purple:#7B1FA2;         /* roxo profundo — par do gradiente */
  --ilu-purple-mid:#9C27B0;
  --ilu-purple-light:#BA68C8;   /* "Creators", labels */
  --ilu-violet:#7C3AED;
  --ilu-violet-light:#A855F7;
  --ilu-gold:#FBBF24;           /* conquistas, diamantes, placas — 5% */
  --ilu-gold-deep:#f59e0b;

  /* Pretos e superfícies */
  --ilu-black:#000000;          /* base dos cards sociais */
  --ilu-black-soft:#0A0A0A;
  --ilu-black-3:#111111;
  --ilu-bg:#050505;             /* base das páginas do site */
  --ilu-surface:#0d0d0f;
  --ilu-surface-2:#151519;

  /* Tinta */
  --ilu-white:#FFFFFF;
  --ilu-soft:#e8e8ee;
  --ilu-gray-light:#DDDDDD;
  --ilu-muted:#b8b8c2;
  --ilu-gray:#AAAAAA;

  /* Semânticas de estado */
  --ilu-green:#40d978;
  --ilu-green-soft:#4ade80;
  --ilu-danger:#f87171;
  --ilu-warning:#FBBF24;

  /* Linhas */
  --ilu-line:rgba(255,255,255,.1);
  --ilu-line-faint:rgba(255,255,255,.06);
  --ilu-line-brand:rgba(216,27,138,.18);
  --ilu-line-brand-strong:rgba(216,27,138,.42);
  --ilu-line-gold:rgba(251,191,36,.22);

  /* ── Aliases semânticos (use estes ao construir) ── */
  --surface-page:var(--ilu-bg);
  --surface-card:var(--ilu-surface);
  --surface-card-2:var(--ilu-surface-2);
  --surface-inverse:var(--ilu-white);

  --text-heading:var(--ilu-white);
  --text-body:var(--ilu-soft);
  --text-muted:var(--ilu-muted);
  --text-faint:var(--ilu-gray);
  --text-accent:var(--ilu-magenta-live);
  --text-award:var(--ilu-gold);
  --text-on-brand:#ffffff;

  --border-default:var(--ilu-line);
  --border-faint:var(--ilu-line-faint);
  --border-brand:var(--ilu-line-brand);
  --border-brand-strong:var(--ilu-line-brand-strong);

  --brand-primary:var(--ilu-magenta);
  --brand-primary-hover:var(--ilu-magenta-live);
  --brand-secondary:var(--ilu-purple);
  --brand-award:var(--ilu-gold);

  --link-color:var(--ilu-white);
  --link-color-hover:var(--ilu-magenta-live);
  --link-underline:rgba(216,27,138,.75);
}

/* ── AgencyPanel (produto SaaS interno) ───────────────────────────────────
   Canais RGB para permitir opacidade (rgb(var(--ap-brand)/.25)), como no
   tailwind.config.js original. Tema padrão = roxo/rosa da Iluminer.        */
:root{
  --ap-brand:139 47 217;/* @kind color */          /* #8B2FD9 */
  --ap-accent:255 79 168;/* @kind color */         /* #FF4FA8 */
  --ap-brand-deep:#7F2175;
  --ap-surface:10 7 13;/* @kind color */           /* #0a070d */
  --ap-surface-card:21 17 28;/* @kind color */
  --ap-surface-card2:28 23 38;/* @kind color */
  --ap-surface-border:44 37 54;/* @kind color */
  --ap-ink:247 243 248;/* @kind color */           /* #F7F3F8 */
  --ap-ink-muted:166 160 174;/* @kind color */
  --ap-ink-faint:125 119 132;/* @kind color */
  --ap-divider:43 36 51;/* @kind color */
  --ap-divider-strong:66 56 75;/* @kind color */
  --ap-overlay-soft:17 14 20;/* @kind color */
  --ap-overlay:31 26 36;/* @kind color */
  --ap-overlay-strong:43 36 49;/* @kind color */
  --ap-body-glow-brand:.18;/* @kind other */
  --ap-body-glow-accent:.12;/* @kind other */
  --ap-shadow-color:0 0 0;/* @kind color */
}

[data-appearance="light"]{
  color-scheme:light;
  --ap-surface:247 245 248;/* @kind color */
  --ap-surface-card:255 255 255;/* @kind color */
  --ap-surface-card2:250 248 251;/* @kind color */
  --ap-surface-border:220 213 224;/* @kind color */
  --ap-ink:37 28 42;/* @kind color */
  --ap-ink-muted:100 89 108;/* @kind color */
  --ap-ink-faint:130 118 138;/* @kind color */
  --ap-divider:226 220 229;/* @kind color */
  --ap-divider-strong:205 196 211;/* @kind color */
  --ap-overlay-soft:250 248 251;/* @kind color */
  --ap-overlay:243 239 245;/* @kind color */
  --ap-overlay-strong:234 228 238;/* @kind color */
  --ap-body-glow-brand:.08;/* @kind other */
  --ap-body-glow-accent:.06;/* @kind other */
  --ap-shadow-color:61 45 68;/* @kind color */
}

/* ── Tipografia Iluminer Creators ───────────────────────────────────────────
   Syne (700/800) para títulos e números grandes · Outfit (400/500/600/700)
   para corpo e UI · Manrope para o AgencyPanel.
   Regra do manual: "Syne nos títulos, sempre." Nunca Arial/Roboto/Inter.   */

:root{
  --font-display:Syne,Outfit,sans-serif;
  --font-body:Outfit,Arial,sans-serif;
  --font-panel:Manrope,Figtree,"Segoe UI",system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --weight-regular:400;/* @kind other */
  --weight-medium:500;/* @kind other */
  --weight-semibold:600;/* @kind other */
  --weight-bold:700;/* @kind other */
  --weight-extrabold:800;/* @kind other */

  /* Escala do site (home.css) */
  --text-hero:clamp(34px,5vw,60px);/* @kind font */
  --text-h2:clamp(30px,5vw,44px);/* @kind font */
  --text-h3:24px;/* @kind font */
  --text-h4:18px;/* @kind font */
  --text-lead:18px;/* @kind font */
  --text-body-lg:18.5px;/* @kind font */
  --text-body:16px;/* @kind font */
  --text-body-sm:15px;/* @kind font */
  --text-caption:14px;/* @kind font */
  --text-label:13px;/* @kind font */
  --text-eyebrow:13px;/* @kind font */
  --text-tag:12px;/* @kind font */
  --text-micro:11px;/* @kind font */

  /* Números-vitrine (proof-num, step-n, big-num) */
  --text-stat-xl:54px;/* @kind font */
  --text-stat-lg:42px;/* @kind font */
  --text-stat-md:24px;/* @kind font */

  --leading-display:1.04;/* @kind other */   /* headlines */
  --leading-tight:1.05;/* @kind other */     /* h2 */
  --leading-snug:1.2;/* @kind other */
  --leading-body:1.7;/* @kind other */       /* corpo do site */
  --leading-loose:1.8;/* @kind other */

  --tracking-display:-.02em;/* @kind other */   /* Syne em títulos */
  --tracking-normal:0;/* @kind other */
  --tracking-wide:.04em;/* @kind other */       /* botões */
  --tracking-eyebrow:.18em;/* @kind other */    /* section-label do site */
  --tracking-pill:.1em;/* @kind other */        /* pills e tags maiúsculas */
  --tracking-caps:.14em;/* @kind other */       /* eyebrow do AgencyPanel */
}

/* ── Espaçamento, raios e larguras ──────────────────────────────────────────
   Valores literais do site (home.css / site.css) e do AgencyPanel.        */

:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:10px;
  --space-4:12px;
  --space-5:14px;
  --space-6:16px;
  --space-7:20px;
  --space-8:24px;
  --space-9:28px;
  --space-10:32px;
  --space-11:40px;
  --space-12:48px;
  --space-14:56px;
  --space-16:64px;
  --space-20:90px;   /* padding vertical de seção no site */

  /* Ritmo recorrente */
  --gap-grid:20px;/* @kind spacing */         /* cards3, proof-grid, tst-grid */
  --gap-grid-tight:14px;/* @kind spacing */
  --section-padding-y:90px;/* @kind spacing */
  --section-padding-x:40px;/* @kind spacing */

  /* Raios — o site usa 8px em superfícies utilitárias e 14-20px em cards */
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:12px;
  --radius-card:18px;
  --radius-card-lg:20px;
  --radius-panel:16px;
  --radius-pill:100px;
  --radius-round:50%;

  /* AgencyPanel (Tailwind rounded-xl / rounded-2xl) */
  --radius-ap-control:12px;
  --radius-ap-card:16px;

  /* Larguras */
  --container-site:1200px;/* @kind spacing */
  --container-narrow:1120px;/* @kind spacing */
  --container-app:1400px;/* @kind spacing */
  --measure-lead:640px;/* @kind spacing */
  --measure-prose:780px;/* @kind spacing */

  /* Alvos de toque — mínimo 44px (min-h-11 no painel, 50-52px nos botões) */
  --control-height-sm:42px;/* @kind spacing */
  --control-height:48px;/* @kind spacing */
  --control-height-lg:52px;/* @kind spacing */

  --nav-height:72px;/* @kind spacing */
  --topbar-height:37px;/* @kind spacing */
}

/* ── Gradientes, sombras, brilhos e movimento ───────────────────────────────
   A "iluminação" do nome é literal: glow magenta em tudo que é protagonista. */

:root{
  /* Gradiente oficial: magenta → roxo, 135° */
  --gradient-brand:linear-gradient(135deg,#D81B8A,#7B1FA2);/* @kind color */
  --gradient-brand-90:linear-gradient(90deg,#D81B8A,#7B1FA2);/* @kind color */
  --gradient-text:linear-gradient(135deg,#D81B8A,#BA68C8);/* @kind color */
  --gradient-text-white:linear-gradient(135deg,#fff,#E91E9C 52%,#A855F7);/* @kind color */
  --gradient-gold:linear-gradient(135deg,#FBBF24,#f59e0b);/* @kind color */
  --gradient-btn:radial-gradient(circle at 50% 0,rgba(255,255,255,.18),transparent 34%),linear-gradient(135deg,#D81B8A,#7B1FA2);/* @kind color */
  --gradient-btn-hover:radial-gradient(circle at 50% 45%,rgba(255,255,255,.28),transparent 48%),linear-gradient(135deg,#D81B8A,#7B1FA2);/* @kind color */
  --gradient-ap-brand:linear-gradient(135deg,rgb(var(--ap-accent)),rgb(var(--ap-brand)));/* @kind color */

  /* Halos de fundo (hero-glow, cta-glow) */
  --glow-hero:radial-gradient(circle,rgba(216,27,138,.22) 0%,transparent 65%);/* @kind color */
  --glow-hero-alt:radial-gradient(circle,rgba(123,31,162,.18) 0%,transparent 65%);/* @kind color */
  --glow-corner:radial-gradient(circle,rgba(216,27,138,.18),transparent 70%);/* @kind color */

  /* Gradientes de proteção sobre foto (sempre antes de texto) */
  --scrim-bottom:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 55%,#000 100%);/* @kind color */
  --scrim-side:linear-gradient(90deg,#000 0%,rgba(0,0,0,.82) 16%,rgba(0,0,0,.2) 46%,transparent 74%);/* @kind color */

  /* Sombras */
  --shadow-btn:0 10px 32px rgba(216,27,138,.4),inset 0 1px 0 rgba(255,255,255,.22);
  --shadow-btn-hover:0 18px 46px rgba(216,27,138,.5),0 0 0 1px rgba(255,255,255,.14),inset 0 0 22px rgba(255,255,255,.2),inset 0 0 38px rgba(251,191,36,.14);
  --shadow-card:0 20px 60px rgba(216,27,138,.12);
  --shadow-card-hover:0 24px 80px rgba(216,27,138,.25);
  --shadow-photo:0 24px 70px rgba(0,0,0,.55);
  --shadow-float:0 12px 40px rgba(0,0,0,.5);
  --shadow-glow-ap:0 10px 30px -10px rgb(var(--ap-accent) / .45);
  --glow-icon:drop-shadow(0 0 10px rgba(216,27,138,.6));/* @kind color */
  --glow-icon-gold:drop-shadow(0 0 16px rgba(251,191,36,.6));/* @kind color */

  /* Vidro */
  --blur-nav:blur(20px);/* @kind other */
  --blur-glass:blur(12px);/* @kind other */
  --glass-bg:rgba(0,0,0,.55);/* @kind color */
  --nav-bg:rgba(0,0,0,.9);/* @kind color */

  /* Movimento — o site só usa ease e durações curtas */
  --ease:cubic-bezier(.4,0,.2,1);/* @kind other */
  --duration-fast:.2s;/* @kind other */
  --duration:.22s;/* @kind other */
  --duration-slow:.25s;/* @kind other */
  --transition-hover:transform .22s ease,box-shadow .22s ease,filter .22s ease;/* @kind other */
  --lift-hover:translateY(-4px);/* @kind other */
  --lift-hover-btn:translateY(-2px);/* @kind other */
  --press-scale:.95;/* @kind other */
}

@keyframes ilu-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes ilu-blink{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes ilu-fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes ilu-kenburns{0%{transform:scale(1.06)}100%{transform:scale(1.15)}}

/* ── Tema claro do site Iluminer Creators ───────────────────────────────────
   Direção pedida pelo cliente (set/2026): layout claro usando as cores da marca.
   O manual de marca v1.0 especifica fundo preto; este tema é uma extensão
   aprovada, não uma substituição — os cards sociais 9:16 seguem em #000.

   Regra do tema claro: o magenta continua sendo a única cor saturada em texto
   e CTA; o restante é papel, tinta e linha. Ouro segue reservado a conquista.  */

[data-theme="light"]{
  color-scheme:light;

  /* Papel — brancos com fundo levemente magenta, nunca cinza neutro */
  --paper:#FFFFFF;             /* @kind color */
  --paper-2:#FBF7FA;           /* @kind color */
  --paper-3:#F5EDF3;           /* @kind color */
  --paper-brand:#FDF0F8;       /* @kind color */

  /* Tinta — preto com sub-tom magenta, herdado do tema claro do AgencyPanel */
  --ink:#1B1017;               /* @kind color */
  --ink-2:#4A3B45;             /* @kind color */
  --ink-muted:#6F5F6A;         /* @kind color */
  --ink-faint:#8E7F8A;         /* @kind color */

  /* Linhas */
  --rule:#EBDFE8;              /* @kind color */
  --rule-strong:#D9C7D5;       /* @kind color */
  --rule-brand:rgba(216,27,138,.22); /* @kind color */

  /* Marca — magenta escurece um passo para garantir 4.5:1 sobre papel */
  --brand-ink:#C2157C;         /* @kind color */
  --brand-fill:#D81B8A;        /* @kind color */
  --brand-deep:#7B1FA2;        /* @kind color */
  --award-ink:#9A6100;         /* @kind color */
  --award-fill:#FBBF24;        /* @kind color */

  /* Aliases semânticos sobrescritos */
  --surface-page:var(--paper);
  --surface-card:var(--paper);
  --surface-card-2:var(--paper-2);
  --text-heading:var(--ink);
  --text-body:var(--ink-2);
  --text-muted:var(--ink-muted);
  --text-faint:var(--ink-faint);
  --text-accent:var(--brand-ink);
  --text-award:var(--award-ink);
  --border-default:var(--rule);
  --border-faint:var(--rule);
  --border-brand:var(--rule-brand);
  --link-color:var(--ink);
  --link-color-hover:var(--brand-ink);

  /* Sombras: no claro a elevação é sutil e fria de contorno, não glow */
  --shadow-card-light:0 1px 2px rgba(27,16,23,.04),0 8px 24px rgba(27,16,23,.05); /* @kind shadow */
  --shadow-card-light-hover:0 2px 4px rgba(27,16,23,.05),0 18px 44px rgba(216,27,138,.12); /* @kind shadow */
  --shadow-btn-light:0 8px 24px rgba(216,27,138,.28); /* @kind shadow */

  /* Respiro maior que o do tema escuro — pedido explícito do cliente */
  --section-padding-y:120px;   /* @kind spacing */
  --gap-grid:28px;             /* @kind spacing */
}

/* Reset e padrões de documento da Iluminer Creators. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-heading);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern" 1,"liga" 1}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);line-height:var(--leading-tight);margin:0}
p{margin:0;text-wrap:pretty}
a{color:var(--link-color);text-decoration:none;transition:color var(--duration-fast) ease}
a:hover{color:var(--link-color-hover)}
:focus-visible{outline:2px solid var(--brand-primary-hover);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}

/* Adaptação do design original para navegação pública e telas menores. */
html{scroll-padding-top:100px}body{background:var(--paper)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;padding:12px;background:white;z-index:100}
.light-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-bottom:1px solid var(--rule)}
.light-nav{max-width:1120px;margin:auto;padding:0 40px;min-height:76px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.light-nav>a{flex-shrink:0}.light-nav img{height:38px;width:auto}
.light-menu{display:flex;gap:24px;align-items:center;font-size:15px;font-weight:500;color:var(--ink-muted)}
.light-menu a[aria-current=page]{color:var(--brand-ink);font-weight:700}
.light-nav-cta{padding:13px 22px;border-radius:10px;color:white!important;background:linear-gradient(135deg,#D81B8A,#7B1FA2);box-shadow:var(--shadow-btn-light);font-weight:700}
.light-menu-button{display:none;border:1px solid var(--rule);background:var(--paper);border-radius:8px;font-size:24px;width:44px;height:44px}
.light-footer{background:var(--paper-2);border-top:1px solid var(--rule)}.light-footer>div{max-width:1120px;margin:auto;padding:56px 40px}.light-footer img{height:34px;width:auto;margin-bottom:12px}.light-footer p{font-size:14px;color:var(--ink-muted)}.light-footer nav{display:flex;flex-wrap:wrap;gap:24px;margin-top:28px;font-size:14px;font-weight:600}
.light-faq{margin-top:48px}.light-faq details{border-top:1px solid var(--rule-strong);padding:24px 0}.light-faq summary{cursor:pointer;font-family:var(--font-display);font-weight:700;font-size:18px}.light-faq p{margin-top:18px;line-height:1.75;color:var(--ink-muted)}
section{scroll-margin-top:90px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--brand-ink);outline-offset:4px}
/* Os grids preservam a composição original no desktop. */
@media(max-width:1050px){.light-nav{padding:0 24px}.light-menu{gap:15px;font-size:14px}.light-nav-cta{padding:12px 15px}}
@media(max-width:900px){
 .light-nav{padding:14px 24px;min-height:76px;flex-wrap:wrap}.light-nav img{height:32px}.light-menu-button{display:block}.light-menu{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px 0 12px}.light-menu.open{display:flex}.light-menu a{padding:12px}.light-nav-cta{text-align:center;margin-top:10px}
 #root section>div[style*="max-width: 1120"],#root section>div[style*="max-width:1120"]{padding:64px 24px!important}
 #root [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;gap:32px!important}
 #root section[style*="border-block"]>div[style*="grid-template-columns"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #root [style*="white-space: nowrap"],#root [style*="white-space:nowrap"]{white-space:normal!important}
 #root [style*="scroll-snap-align"]{flex-basis:calc((100% - 28px)/2)!important;min-width:0}
 #root [style*="right: -26px"],#root [style*="right:-26px"]{right:12px!important;bottom:12px!important}
 .light-footer>div{padding:48px 24px}
}
@media(max-width:540px){
 #root section>div[style*="max-width: 1120"],#root section>div[style*="max-width:1120"]{padding:52px 20px!important}
 #root [style*="scroll-snap-align"]{flex-basis:86%!important}
 #root section[style*="border-block"]>div>div{padding:12px!important;border-left:0!important}
 #root [style*="padding:44px"],#root [style*="padding:48px 52px"],#root [style*="padding: 44px"],#root [style*="padding: 48px 52px"]{padding:28px 22px!important}
 #root h1{font-size:40px!important;overflow-wrap:break-word}
 #root [style*="white-space: nowrap"],#root [style*="white-space:nowrap"]{white-space:normal!important}
 .light-footer nav{gap:16px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}