/* ==========================================================================
   ATLA DIGITAL — styles.css
   --------------------------------------------------------------------------
   CSS nativo com os efeitos visuais do site: glow, blur, gradientes,
   keyframes e camadas de profundidade. Layout, espaçamento e tipografia
   ficam como classes Tailwind direto no index.html (arquivo tailwind.css).

   Tudo aqui está dentro de @layer base/components. Assim, uma classe
   Tailwind no HTML (camada "utilities") sempre vence estas regras.

   ÍNDICE (o mesmo código [Sxx] aparece no index.html e no script.js)
     [S00] Fundamentos ....... fontes, tokens da marca, base, acessibilidade
     [FX]  Componentes ....... botões, títulos, cards de vidro, blobs, reveal
     [S01] Preloader
     [S02] Navbar + menu mobile
     [S03] Hero .............. anel neon, horizonte, piso reflexivo
     [S04] Faixa de capacidades
     [S05] Manifesto
     [S06] Soluções .......... ilustrações dos cards
     [S07] Engenharia ........ medidor de performance
     [S08] Processo .......... linha de luz
     [S11] Rodapé ............ assinatura gigante
     [S12] WhatsApp flutuante
     [RM]  Movimento reduzido
   ========================================================================== */

@layer theme, base, components, utilities;


/* ==========================================================================
   [S00] FUNDAMENTOS
   ========================================================================== */

/* --- Fontes hospedadas no próprio site (sem requisições externas) -------- */
@font-face {
  font-family: "Syne";
  src: url("assets/fonts/syne-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Fallbacks com métricas ajustadas (medidas contra a Arial): evitam
   "pulos" de layout (CLS) enquanto as fontes reais carregam. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  ascent-override: 92.3%;
  descent-override: 22.8%;
  line-gap-override: 0%;
  size-adjust: 105%;
}

@font-face {
  font-family: "Syne Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial");
  font-weight: 400 800;
  ascent-override: 81.7%;
  descent-override: 24.6%;
  line-gap-override: 0%;
  size-adjust: 113.9%;
}

/* Permite animar o medidor de performance [S07] */
@property --gauge {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@layer base {
  /* --- Tokens da marca: EDITE AQUI para mudar cores/fontes do site todo -- */
  :root {
    /* Paleta extraída da logo oficial */
    --atla-void: #030007;     /* fundo base                         */
    --atla-abyss: #080025;    /* interior do anel / profundidade    */
    --atla-graphite: #121019; /* superfícies                        */
    --atla-violet: #9a06fa;   /* núcleo do neon                     */
    --atla-purple: #8a2be2;   /* acento de UI                       */
    --atla-indigo: #4602e9;   /* halo externo do brilho             */
    --atla-plasma: #cb45f1;   /* pontos quentes                     */
    --atla-lilac: #c9a8ff;    /* acento legível em textos pequenos  */
    --atla-ice: #f4f1ff;      /* títulos                            */
    --atla-mist: #c3bfd3;     /* texto corrido / textos de apoio    */

    --atla-font-display: "Syne", "Syne Fallback", ui-sans-serif, system-ui, sans-serif;
    --atla-font-sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Variações com transparência (derivadas dos tokens acima) */
    --violet-a10: color-mix(in srgb, var(--atla-violet) 10%, transparent);
    --violet-a20: color-mix(in srgb, var(--atla-violet) 20%, transparent);
    --violet-a35: color-mix(in srgb, var(--atla-violet) 35%, transparent);
    --violet-a50: color-mix(in srgb, var(--atla-violet) 50%, transparent);
    --violet-a70: color-mix(in srgb, var(--atla-violet) 70%, transparent);
    --indigo-a20: color-mix(in srgb, var(--atla-indigo) 20%, transparent);
    --indigo-a35: color-mix(in srgb, var(--atla-indigo) 35%, transparent);
    --indigo-a50: color-mix(in srgb, var(--atla-indigo) 50%, transparent);
    --plasma-a40: color-mix(in srgb, var(--atla-plasma) 40%, transparent);
    --plasma-a70: color-mix(in srgb, var(--atla-plasma) 70%, transparent);
    --plasma-a90: color-mix(in srgb, var(--atla-plasma) 90%, transparent);
    --purple-a20: color-mix(in srgb, var(--atla-purple) 20%, transparent);

    /* Glow em 3 camadas — núcleo quente → violeta → halo índigo (como na logo) */
    --glow-sm: 0 0 4px var(--plasma-a70), 0 0 12px var(--violet-a50), 0 0 28px var(--indigo-a35);
    --glow-md: 0 0 6px var(--plasma-a70), 0 0 22px var(--violet-a70), 0 0 52px var(--indigo-a50);

    /* Curvas de movimento */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

    /* Atraso das animações de entrada (espera o preloader) */
    --intro-delay: 0.95s;
  }

  /* Visita repetida na mesma sessão: sem preloader, entrada imediata */
  .no-intro {
    --intro-delay: 0.05s;
  }

  html {
    background-color: var(--atla-void);
    color-scheme: dark;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    background-color: var(--atla-void);
    text-rendering: optimizeLegibility;
  }

  /* Granulação de filme muito sutil sobre todo o site (textura "premium") */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  ::selection {
    background-color: var(--violet-a50);
    color: var(--atla-ice);
  }

  :focus-visible {
    outline: 2px solid var(--atla-plasma);
    outline-offset: 3px;
  }

  /* Trava a rolagem enquanto o menu mobile está aberto */
  html.menu-open {
    overflow: hidden;
  }

  /* Sprite de SVG (logo e ícones) — invisível, mas acessível por <use> */
  .svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
}


/* ==========================================================================
   [FX] COMPONENTES COMPARTILHADOS
   ========================================================================== */
@layer components {

  /* --- Logo vetorial (símbolo #atla-wordmark do sprite) ------------------- */
  .wm-glow {
    filter: var(--wm-filter, url(#fx-glow-wordmark));
  }
  .wm-ring {
    fill: none;
    stroke: var(--wm-ring, #f8eaff);
    stroke-width: 2.6;
  }
  .wm-flare {
    stroke: url(#g-flare-wordmark);
    stroke-width: 1.6;
    opacity: var(--wm-flare-opacity, 1);
  }
  .wm-letters {
    fill: var(--wm-fill, var(--atla-ice));
  }

  /* --- Botão principal com glow que expande no hover ---------------------- */
  .btn-glow {
    position: relative;
    isolation: isolate;
    background-image: linear-gradient(120deg, var(--atla-violet) 0%, #7417f0 45%, var(--atla-indigo) 100%);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.28),
      inset 0 0 0 1px rgb(255 255 255 / 0.1),
      0 0 0 1px var(--violet-a50),
      0 0 18px -2px var(--violet-a70),
      0 12px 32px -12px var(--indigo-a50);
    transition: transform 0.5s var(--ease);
  }

  /* Halo grande: fica numa camada própria e só anima opacidade/escala
     (propriedades da GPU) — o hover roda liso até em celulares simples. */
  .btn-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow:
      0 0 22px 4px var(--violet-a70),
      0 0 64px 18px var(--indigo-a50),
      0 0 120px 30px var(--violet-a20);
    opacity: 0;
    transform: scale(0.82);
    transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
  }

  /* Reflexo de luz que atravessa o botão no hover */
  .btn-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.28) 50%, transparent 65%) no-repeat;
    background-size: 250% 100%;
    background-position: 130% 0;
    transition: background-position 0.9s var(--ease);
    pointer-events: none;
  }

  .btn-glow:hover,
  .btn-glow:focus-visible {
    transform: translateY(-1px);
  }
  .btn-glow:hover::before,
  .btn-glow:focus-visible::before {
    opacity: 1;
    transform: scale(1);
  }
  .btn-glow:hover::after,
  .btn-glow:focus-visible::after {
    background-position: -30% 0;
  }

  /* --- Botão secundário (contorno) ---------------------------------------- */
  .btn-ghost {
    position: relative;
    background-color: rgb(255 255 255 / 0.03);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
    transition: box-shadow 0.5s var(--ease), background-color 0.5s var(--ease);
  }
  .btn-ghost:hover,
  .btn-ghost:focus-visible {
    background-color: var(--violet-a10);
    box-shadow: inset 0 0 0 1px var(--violet-a70), 0 0 24px -4px var(--violet-a50);
  }

  /* --- Link com sublinhado de luz animado --------------------------------- */
  .link-line {
    background-image: linear-gradient(90deg, var(--atla-plasma), var(--atla-violet));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    padding-bottom: 2px;
    transition: background-size 0.6s var(--ease), color 0.3s;
  }
  .link-line:hover,
  .link-line:focus-visible {
    background-size: 100% 1px;
  }

  /* --- Texto em gradiente neon -------------------------------------------- */
  .text-gradient-neon {
    background-image: linear-gradient(100deg, var(--atla-ice) 0%, var(--atla-lilac) 32%, color-mix(in srgb, var(--atla-violet) 55%, var(--atla-lilac)) 66%, var(--atla-purple) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 22px var(--violet-a35));
    /* espaço extra para descendentes (g, j, p) não perderem o gradiente */
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
  }

  /* --- Rótulo numerado das seções ("01 — Manifesto") ---------------------- */
  .section-index {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--atla-lilac);
  }
  .section-index::before {
    content: "";
    width: 2.25rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--atla-violet));
    box-shadow: 0 0 8px var(--violet-a70);
  }

  /* --- Ponto pulsante ("ao vivo") ----------------------------------------- */
  .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--atla-plasma);
    box-shadow: var(--glow-sm);
    animation: blink 2.6s ease-in-out infinite;
  }

  /* --- Card de vidro (glassmorphism) -------------------------------------- */
  .glass-card {
    position: relative;
    isolation: isolate;
    background-image: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.012));
    background-color: color-mix(in srgb, var(--atla-void) 55%, transparent);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.06),
      0 40px 80px -40px rgb(0 0 0 / 0.9);
    transition: translate 0.6s var(--ease);
  }

  /* Desfoque de vidro real só a partir do tablet: no celular o fundo
     translúcido já entrega o visual sem custo de GPU durante a rolagem. */
  @media (min-width: 768px) {
    .glass-card {
      -webkit-backdrop-filter: blur(16px) saturate(130%);
      backdrop-filter: blur(16px) saturate(130%);
    }
  }

  /* Borda fina brilhante em gradiente */
  .glass-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: linear-gradient(150deg, var(--plasma-a40), rgb(255 255 255 / 0.09) 26%, rgb(255 255 255 / 0.03) 55%, var(--indigo-a35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0.75;
    transition: opacity 0.5s var(--ease);
  }

  /* Holofote que segue o cursor (posição via script.js → --mx / --my) */
  .glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%), var(--violet-a20), transparent 62%);
    opacity: 0;
    transition: opacity 0.6s var(--ease);
  }

  .glass-card:hover::before,
  .glass-card:focus-within::before {
    opacity: 1;
  }
  .glass-card:hover::after,
  .glass-card:focus-within::after {
    opacity: 1;
  }

  @media (hover: hover) {
    .glass-card--lift:hover {
      translate: 0 -6px;
    }
  }

  /* Variante iluminada (destaque) */
  .glass-card--lit {
    background-image: linear-gradient(180deg, var(--violet-a10), rgb(255 255 255 / 0.015));
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.1),
      0 0 0 1px var(--violet-a20),
      0 30px 90px -30px var(--indigo-a50);
  }
  .glass-card--lit::after {
    background: linear-gradient(150deg, var(--atla-plasma), var(--violet-a35) 30%, rgb(255 255 255 / 0.05) 60%, var(--atla-indigo));
    opacity: 0.9;
  }

  /* --- Blobs de luz de fundo ---------------------------------------------- */
  /* Feitos com gradiente radial em vez de filter: blur() — mesmo visual
     de "neon desfocado", custo quase zero de GPU (crucial no iPhone). */
  .blob {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side, var(--blob, var(--violet-a35)) 0%, color-mix(in srgb, var(--blob, var(--violet-a35)) 45%, transparent) 45%, transparent 100%);
  }
  .blob--violet { --blob: var(--violet-a35); }
  .blob--indigo { --blob: var(--indigo-a50); }
  .blob--plasma { --blob: var(--plasma-a40); }

  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .blob--drift {
      animation: blob-drift 24s ease-in-out infinite alternate;
    }
  }

  /* --- Camada de luz com fade vertical (transição invisível) -------------- */
  /* Envolve blobs e halos de uma seção e os dissolve antes das bordas de
     cima e de baixo. Assim nenhuma luz é "cortada" pelo limite da seção e
     as seções vizinhas se fundem no mesmo fundo, sem linha visível.
     Ajuste a suavidade do fade com --fx-fade. */
  .section-fx {
    --fx-fade: 8rem;
    position: absolute;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--fx-fade), #000 calc(100% - var(--fx-fade)), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 var(--fx-fade), #000 calc(100% - var(--fx-fade)), transparent 100%);
  }

  /* Variante ancorada num bloco interno (ex.: título do [S10]): a camada
     começa exatamente na borda superior da seção (--pad-top acima do bloco)
     e o seu centro coincide com o centro do bloco. */
  .section-fx--anchored {
    inset: auto;
    left: 50%;
    top: calc(-1 * var(--pad-top));
    width: 100vw;
    height: calc(100% + 2 * var(--pad-top));
    translate: -50% 0;
  }

  /* --- Revelação ao rolar (script.js adiciona .is-in) ---------------------- */
  /* Só ativa com JS presente (.js no <html>); sem JS o conteúdo já aparece. */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 1s var(--ease), transform 1.1s var(--ease);
    transition-delay: var(--d, 0s);
  }
  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   [S01] PRELOADER
   Linha do tempo (≈1,25 s): anel se desenha → Λ surge → feixe de luz
   cruza a tela → pulso → tudo se dissolve revelando o site.
   É 100% CSS: some sozinho mesmo se o JavaScript falhar.
   ========================================================================== */
@layer components {
  .preloader {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    pointer-events: none;
    background: radial-gradient(60% 50% at 50% 50%, var(--atla-abyss), var(--atla-void) 72%);
    animation: preloader-out 0.45s var(--ease-io) 0.8s forwards;
  }

  .no-intro .preloader {
    display: none;
  }

  .preloader__beam {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--violet-a50) 22%, #fff 50%, var(--violet-a50) 78%, transparent 100%);
    box-shadow: 0 0 12px var(--violet-a70), 0 0 40px var(--indigo-a50);
    transform: scaleX(0);
    opacity: 0;
    animation: beam-sweep 0.9s var(--ease) 0.15s forwards;
  }

  .preloader__mark {
    position: relative;
    width: 6.5rem;
    height: 6.5rem;
    overflow: visible;
    filter: drop-shadow(0 0 18px var(--violet-a50));
    animation:
      mark-in 0.6s var(--ease) both,
      mark-pulse 0.5s var(--ease-io) 0.5s,
      mark-exit 0.45s var(--ease-io) 0.8s forwards;
  }

  .preloader__ring {
    fill: none;
    stroke: #f8eaff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: ring-draw 0.75s var(--ease) 0.05s forwards;
  }

  .preloader__flare {
    stroke: url(#g-flare-mark);
    stroke-width: 1.1;
    opacity: 0;
    animation: fade-in 0.4s ease 0.35s forwards;
  }

  .preloader__lambda {
    fill: var(--atla-ice);
    opacity: 0;
    transform: translateY(5px);
    animation: lambda-in 0.5s var(--ease) 0.25s forwards;
  }

  @media (min-width: 640px) {
    .preloader__mark {
      width: 7.5rem;
      height: 7.5rem;
    }
  }
}


/* ==========================================================================
   [S02] NAVBAR + MENU MOBILE
   ========================================================================== */
@layer components {
  /* Camada de vidro: começa invisível e surge suavemente ao rolar.
     Fica num pseudo-elemento para não "prender" o menu mobile (fixed). */
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--atla-void) 62%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid var(--purple-a20);
    opacity: 0;
    transition: opacity 0.6s var(--ease);
  }
  .site-header[data-scrolled="true"]::before {
    opacity: 1;
  }

  .js .site-header__bar {
    animation: drop-in 1s var(--ease) var(--intro-delay) backwards;
  }

  .brand-logo {
    filter: drop-shadow(0 0 10px var(--violet-a35));
  }

  .nav-link {
    position: relative;
    color: var(--atla-mist);
    transition: color 0.3s;
  }
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--atla-plasma), transparent);
    box-shadow: 0 0 8px var(--violet-a70);
    transform: scaleX(0);
    transition: transform 0.5s var(--ease);
  }
  .nav-link:hover,
  .nav-link:focus-visible {
    color: var(--atla-ice);
  }
  .nav-link:hover::after,
  .nav-link:focus-visible::after {
    transform: scaleX(1);
  }

  /* Ícone do menu: 2 linhas que viram um X */
  .menu-toggle__bar {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 1.5px;
    margin: -0.75px 0 0 -11px;
    border-radius: 2px;
    background-color: var(--atla-ice);
    transition: transform 0.5s var(--ease);
  }
  .menu-toggle__bar:first-child {
    transform: translateY(-4px);
  }
  .menu-toggle__bar:last-child {
    transform: translate(4.4px, 4px) scaleX(0.6);
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child {
    transform: rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child {
    transform: rotate(-45deg);
  }

  /* Menu mobile em tela cheia */
  .mobile-menu {
    background:
      radial-gradient(120% 70% at 100% 0%, var(--indigo-a35), transparent 55%),
      radial-gradient(90% 60% at 0% 100%, var(--violet-a20), transparent 60%),
      var(--atla-void);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
  }
  .mobile-menu[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s var(--ease), visibility 0s;
  }
  .mobile-menu__item {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ease), transform 0.8s var(--ease);
  }
  .mobile-menu[data-open="true"] .mobile-menu__item {
    opacity: 1;
    transform: none;
    transition-delay: calc(0.08s + var(--i, 0) * 0.06s);
  }
}


/* ==========================================================================
   [S03] HERO — composição "eclipse"
   Todos os elementos de cena partem do centro do título (.hero-scene):
   anel da logo, linha do horizonte (flare), piso reflexivo e reflexo.
   O tamanho do anel vem da variável --ring, definida com classes
   responsivas do Tailwind direto na <section id="hero">.
   ========================================================================== */
@layer components {
  .hero-scene {
    width: 0;
    height: 0;
  }
  .hero-scene > * {
    position: absolute;
    left: 0;
    top: 0;
  }

  /* Luz ambiente do eclipse: núcleo índigo profundo + halo externo */
  .hero-halo {
    width: calc(var(--ring) * 2.3);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side,
        var(--atla-abyss) 0%,
        color-mix(in srgb, var(--atla-abyss) 80%, transparent) 38%,
        var(--indigo-a35) 44%,
        var(--violet-a10) 66%,
        transparent 100%);
    animation: fade-in 1.6s var(--ease) var(--intro-delay) backwards;
  }

  /* Piso escuro e reflexivo, começando logo abaixo do anel */
  .hero-floor {
    top: calc(var(--ring) / 2 + var(--floor-gap));
    width: 100vw;
    height: 120svh;
    translate: -50% 0;
    background:
      radial-gradient(48% 38% at 50% 0%, var(--violet-a20), transparent 72%),
      linear-gradient(180deg, color-mix(in srgb, var(--atla-abyss) 82%, transparent) 0%, var(--atla-void) 50%);
  }
  /* Linha do horizonte */
  .hero-floor::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 8%, var(--violet-a35) 32%, var(--plasma-a70) 50%, var(--violet-a35) 68%, transparent 92%);
  }

  /* Reflexo do anel no piso: espelhado, achatado, desfocado e esmaecendo */
  .hero-reflection {
    top: calc(var(--ring) / 2 + var(--floor-gap) * 2);
    width: var(--ring);
    aspect-ratio: 1;
    translate: -50% 0;
    transform: scaleY(0.36);
    transform-origin: 50% 0;
    border-radius: 50%;
    border: 2px solid var(--plasma-a40);
    box-shadow: 0 0 26px 4px var(--violet-a35), inset 0 0 26px 4px var(--violet-a20);
    filter: blur(3px);
    opacity: 0.75;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.35) 38%, transparent 70%);
    mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0.35) 38%, transparent 70%);
    animation: fade-in 1.8s var(--ease) calc(var(--intro-delay) + 0.3s) backwards;
  }

  /* O anel neon da logo — 3 camadas de brilho, por fora e por dentro */
  .hero-ring {
    width: var(--ring);
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    border: 1.5px solid #f8eaff;
    box-shadow:
      0 0 2px #fff,
      0 0 10px 1px var(--plasma-a90),
      0 0 26px 4px var(--violet-a70),
      0 0 72px 14px var(--indigo-a50),
      inset 0 0 8px 1px var(--plasma-a70),
      inset 0 0 32px 4px var(--violet-a35);
    animation:
      ring-in 1.6s var(--ease) var(--intro-delay) backwards,
      ring-float 9s ease-in-out calc(var(--intro-delay) + 1.6s) infinite;
  }

  /* Flare horizontal da logo, atravessando a tela */
  .hero-beam {
    width: 100vw;
    height: 1px;
    translate: -50% -50%;
    background: linear-gradient(90deg, transparent 0%, var(--violet-a35) 18%, var(--plasma-a70) 50%, var(--violet-a35) 82%, transparent 100%);
    box-shadow: 0 0 10px var(--violet-a50);
    animation: beam-in 1.8s var(--ease) var(--intro-delay) backwards;
  }

  /* Pontos de luz onde o flare cruza o anel */
  .hero-spark {
    width: clamp(80px, 16vw, 180px);
    height: 9px;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(closest-side, #fff 0%, var(--plasma-a90) 22%, var(--violet-a35) 58%, transparent 100%);
    animation:
      fade-in 1.2s var(--ease) calc(var(--intro-delay) + 0.5s) backwards,
      spark 5s ease-in-out calc(var(--intro-delay) + 1.7s) infinite;
  }
  .hero-spark--l { left: calc(var(--ring) / -2); }
  .hero-spark--r { left: calc(var(--ring) / 2); animation-delay: calc(var(--intro-delay) + 0.5s), calc(var(--intro-delay) + 4.2s); }

  @media (min-width: 640px) {
    .hero-ring { border-width: 2px; }
  }

  /* --- Entrada do conteúdo do hero --------------------------------------- */
  /* O título NÃO começa invisível (sem opacity: 0): ele é pintado desde o
     primeiro quadro, por baixo do preloader, e o Google mede o LCP na hora. */
  .js .hero-line {
    animation: hero-focus 1.3s var(--ease) calc(var(--intro-delay) + var(--d, 0s)) backwards;
  }
  .js .hero-in {
    animation: rise-in 1.1s var(--ease) calc(var(--intro-delay) + var(--d, 0s)) backwards;
  }

  /* Indicador de rolagem */
  .scroll-cue__line {
    position: relative;
    width: 1px;
    height: 44px;
    overflow: hidden;
    background: linear-gradient(var(--violet-a50), transparent);
  }
  .scroll-cue__line::after {
    content: "";
    position: absolute;
    left: 0;
    top: -40%;
    width: 1px;
    height: 40%;
    background: linear-gradient(transparent, #fff);
    animation: cue 2.4s var(--ease-io) infinite;
  }
}


/* ==========================================================================
   [S04] FAIXA DE CAPACIDADES — rolagem infinita em CSS puro
   ========================================================================== */
@layer components {
  .marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
  .marquee.is-dragging { cursor: grabbing; }
  .marquee__track {
    display: flex;
    width: max-content;
    opacity: 0.8;
    will-change: transform;
    /* Fallback sem JS; com JS (.is-js) o script assume o movimento */
    animation: marquee 46s linear infinite;
  }
  .marquee.is-js .marquee__track { animation: none; }
  .marquee__mark {
    width: 0.9rem;
    height: 0.9rem;
    color: #8A2BE2;
    filter: drop-shadow(0 0 4px rgba(138, 43, 226, 0.9)) drop-shadow(0 0 10px rgba(138, 43, 226, 0.55));
  }
}


/* ==========================================================================
   [S05] MANIFESTO — o texto "acende" conforme a rolagem
   (scroll-driven animation nativa; navegadores sem suporte mostram
   o texto já aceso, sem perda nenhuma)
   ========================================================================== */
@layer components {
  .manifesto-em {
    font-style: normal;
    color: var(--atla-lilac);
    text-shadow: 0 0 28px var(--violet-a50);
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .manifesto-line {
        animation: manifesto-lit linear both;
        animation-timeline: view();
        animation-range: entry 15% cover 42%;
      }
    }
  }
}


/* ==========================================================================
   [S06] SOLUÇÕES — ilustrações vetoriais dos cards
   ========================================================================== */
@layer components {
  .card-art {
    transition: translate 0.7s var(--ease);
  }
  .glass-card:hover .card-art {
    translate: 0 -4px;
  }

  .art-frame {
    fill: rgb(255 255 255 / 0.02);
    stroke: rgb(255 255 255 / 0.1);
  }
  .art-soft {
    fill: rgb(255 255 255 / 0.09);
  }
  .art-line-soft {
    fill: none;
    stroke: rgb(255 255 255 / 0.12);
  }
  .art-accent {
    fill: var(--atla-violet);
  }
  .art-glow {
    filter: drop-shadow(0 0 6px var(--atla-violet)) drop-shadow(0 0 14px var(--indigo-a50));
  }

  /* Linhas que "se desenham" quando o card entra na tela */
  .art-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.8s var(--ease) 0.35s;
  }
  .is-in .art-draw,
  html:not(.js) .art-draw {
    stroke-dashoffset: 0;
  }

  /* Fluxo contínuo na órbita (ecossistemas globais) */
  .art-flow {
    animation: dash-flow 7s linear infinite;
  }
}


/* ==========================================================================
   [S07] ENGENHARIA — medidor estilo Google PageSpeed
   ========================================================================== */
@layer components {
  .gauge {
    --gauge: 0;
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: --gauge 2.2s var(--ease);
  }
  .gauge.is-in,
  html:not(.js) .gauge {
    --gauge: 100;
  }

  .gauge::before,
  .gauge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 200deg, var(--atla-indigo), var(--atla-violet) calc(var(--gauge) * 0.55%), var(--atla-plasma) calc(var(--gauge) * 1%), rgb(255 255 255 / 0.06) 0);
  }
  /* Anel nítido */
  .gauge::before {
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px));
  }
  /* Brilho desfocado do anel */
  .gauge::after {
    filter: blur(10px);
    opacity: 0.55;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 26px), #000 calc(100% - 14px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 26px), #000 calc(100% - 14px));
  }

  .code-panel {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;
  }
}


/* ==========================================================================
   [S08] PROCESSO — linha de luz que se acende ao entrar na tela
   ========================================================================== */
@layer components {
  .process::before,
  .process::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 1px;
  }
  .process::before {
    background-color: rgb(255 255 255 / 0.08);
  }
  .process::after {
    background: linear-gradient(180deg, var(--atla-plasma), var(--atla-violet) 50%, var(--atla-indigo));
    box-shadow: var(--glow-sm);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 2s var(--ease) 0.2s;
  }
  .process.is-in::after,
  html:not(.js) .process::after {
    transform: scaleY(1);
  }

  @media (min-width: 768px) {
    .process::before,
    .process::after {
      left: 0;
      right: 0;
      top: 7px;
      bottom: auto;
      width: auto;
      height: 1px;
    }
    .process::after {
      background: linear-gradient(90deg, var(--atla-plasma), var(--atla-violet) 50%, var(--atla-indigo));
      transform: scaleX(0);
      transform-origin: left;
    }
    .process.is-in::after,
    html:not(.js) .process::after {
      transform: scaleX(1);
    }
  }

  .process-node {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--atla-void);
    border: 1px solid var(--violet-a70);
    box-shadow: var(--glow-sm);
  }
  .process-node::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background-color: var(--atla-plasma);
  }
}


/* ==========================================================================
   [S11] RODAPÉ — assinatura gigante da marca
   ========================================================================== */
@layer components {
  .footer-wordmark {
    --wm-fill: url(#g-wordmark-fade);
    --wm-ring: var(--violet-a35);
    --wm-filter: none;
    --wm-flare-opacity: 0.35;
  }
}


/* ==========================================================================
   [S12] WHATSAPP FLUTUANTE — grafite + borda neon + pulso elegante
   ========================================================================== */
@layer components {
  .wa-float {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.08),
      0 0 0 1px var(--violet-a35),
      0 0 16px var(--violet-a50),
      0 0 42px var(--indigo-a35),
      0 12px 30px rgb(0 0 0 / 0.6);
    transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), translate 0.6s var(--ease);
    animation: rise-in 0.9s var(--ease) calc(var(--intro-delay) + 0.9s) backwards;
  }

  /* Onda de pulso: expande e some, com pausa longa entre os ciclos */
  .wa-float::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 1px solid var(--atla-violet);
    box-shadow: 0 0 14px var(--violet-a70);
    opacity: 0;
    animation: wa-pulse 3.6s var(--ease-io) 2.5s infinite;
    pointer-events: none;
  }

  /* Halo extra no hover */
  .wa-float::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 26px 6px var(--violet-a70), 0 0 70px 18px var(--indigo-a50);
    opacity: 0;
    transition: opacity 0.5s var(--ease);
    pointer-events: none;
  }

  .wa-float:hover,
  .wa-float:focus-visible {
    transform: scale(1.07);
  }
  .wa-float:hover::after,
  .wa-float:focus-visible::after {
    opacity: 1;
  }

  /* Rótulo que aparece no hover (desktop) */
  .wa-float__label {
    opacity: 0;
    translate: 8px 0;
    transition: opacity 0.4s var(--ease), translate 0.5s var(--ease);
  }
  .wa-float:hover .wa-float__label,
  .wa-float:focus-visible .wa-float__label {
    opacity: 1;
    translate: 0 0;
  }

  /* Esconde quando o CTA final está na tela ou o menu está aberto */
  .wa-float[data-hidden="true"],
  html.menu-open .wa-float {
    opacity: 0;
    translate: 0 16px;
    pointer-events: none;
  }
}


/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

/* Preloader */
@keyframes preloader-out { to { opacity: 0; visibility: hidden; } }
@keyframes beam-sweep {
  0% { transform: scaleX(0); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: scaleX(1); opacity: 0.85; }
}
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
@keyframes lambda-in { to { opacity: 1; transform: none; } }
@keyframes mark-in { from { opacity: 0; transform: scale(0.86); } }
@keyframes mark-pulse { 50% { transform: scale(1.06); } }
@keyframes mark-exit { to { transform: scale(1.22); opacity: 0; } }

/* Hero */
@keyframes ring-in { from { opacity: 0; scale: 0.9; } }
@keyframes ring-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes beam-in { from { opacity: 0; transform: scaleX(0.2); } }
@keyframes spark {
  0%, 100% { opacity: 0.75; transform: scaleX(0.9); }
  50% { opacity: 1; transform: scaleX(1.15); }
}
@keyframes hero-focus { from { transform: translateY(0.3em); filter: blur(12px); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-12px); } }
@keyframes cue { to { transform: translateY(350%); } }

/* Gerais */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0.35; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes manifesto-lit { from { opacity: 0.16; } to { opacity: 1; } }
@keyframes dash-flow { to { stroke-dashoffset: -80; } }
@keyframes blob-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(4%, 6%, 0) scale(1.08); }
}
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  50%, 100% { transform: scale(1.6); opacity: 0; }
}


/* ==========================================================================
   [ESP] ESPAÇAMENTO VERTICAL COMPACTO
   Fora de @layer de propósito: vence as utilitárias do Tailwind sem exigir
   novo build do tailwind.css. Para ajustar o ritmo, mexa só nestes valores.
   ========================================================================== */
#manifesto { padding-top: 5rem; padding-bottom: 4rem; }
#solucoes, #engenharia, #processo, #perfil { padding-block: 4rem; }
#contato { padding-bottom: 5rem; }
#manifesto > .shell.grid { margin-top: 3rem; }
#solucoes header, #engenharia header, #processo header, #perfil header { margin-bottom: 2.5rem; }
#engenharia dl { margin-top: 3rem; }
#solucoes article.glass-card { min-height: 24rem; }
footer.border-t { padding-top: 4rem; }
@media (min-width: 768px) {
  #manifesto { padding-top: 7rem; padding-bottom: 5rem; }
  #solucoes, #engenharia, #processo, #perfil { padding-block: 5rem; }
  #contato { padding-bottom: 6rem; }
  #solucoes header, #engenharia header, #processo header, #perfil header { margin-bottom: 3rem; }
}


/* ==========================================================================
   [BOT] Linha "bot automatizado integrado" nos cards de Soluções [S06]
   ========================================================================== */
.bot-tag {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.25rem;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #d9b8ff;
}
.bot-tag::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8A2BE2;
  box-shadow: 0 0 8px 2px rgba(138, 43, 226, 0.8);
}


/* ==========================================================================
   [RM] MOVIMENTO REDUZIDO — respeita a preferência do sistema do visitante
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .marquee__track {
    animation: none !important;
  }
}


/* ==========================================================================
   [FIX] CARD "100 PERFORMANCE" [S07] — sem contorno/halo de foco ou clique
   Escopo: só o card em destaque de #engenharia e o que há dentro dele, para
   não afetar o foco por teclado dos links e botões do resto do site.
   Fora de @layer de propósito (as !important vencem a regra global
   :focus-visible e as utilitárias do Tailwind).
   ========================================================================== */
#engenharia .glass-card--lit:focus,
#engenharia .glass-card--lit:focus-visible,
#engenharia .glass-card--lit:focus-within,
#engenharia .glass-card--lit:active,
#engenharia .glass-card--lit *:focus,
#engenharia .glass-card--lit *:focus-visible,
#engenharia .glass-card--lit *:active {
  outline: none !important;
}
/* Elementos internos: sem sombra/halo nesses estados (nenhum tem sombra própria) */
#engenharia .glass-card--lit *:focus,
#engenharia .glass-card--lit *:focus-visible,
#engenharia .glass-card--lit *:active {
  box-shadow: none !important;
}
/* O card em si repete a sombra original (profundidade escura + filete violeta),
   para o visual não "estalar" ao clicar — só nenhum anel extra aparece. */
#engenharia .glass-card--lit:focus,
#engenharia .glass-card--lit:focus-visible,
#engenharia .glass-card--lit:focus-within,
#engenharia .glass-card--lit:active {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.1),
    0 0 0 1px var(--violet-a20),
    0 30px 90px -30px var(--indigo-a50) !important;
}
/* Precaução: a borda em gradiente e o holofote do card ficam recortados nos
   cantos arredondados (1.5rem = rounded-3xl) mesmo se o navegador perder o
   border-radius durante a transição de hover. Sem efeito visual normal. */
#engenharia .glass-card--lit::before,
#engenharia .glass-card--lit::after {
  clip-path: inset(0 round 1.5rem);
}


/* ==========================================================================
   [PRM] COMPONENTES PREMIUM — grade cibernética, brilho de título, card
   premium e abas de "O Ecossistema" [S07b]
   Fora de @layer de propósito: vence as utilitárias sem novo build do Tailwind.
   ========================================================================== */

/* --- 1a. Grade cibernética de fundo ---------------------------------------
   Use dentro de uma seção com position:relative + isolation:isolate.
   A máscara radial dissolve as bordas; nenhuma animação (custo zero de GPU). */
.cyber-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(138 43 226 / 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgb(138 43 226 / 0.13) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 72% at 50% 46%, #000 0%, rgb(0 0 0 / 0.55) 45%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 72% at 50% 46%, #000 0%, rgb(0 0 0 / 0.55) 45%, transparent 80%);
}

/* --- 1b. Pulsação de brilho roxo em textos selecionados -------------------
   Uso: <span class="headline-glow" data-text="MESMO TEXTO">MESMO TEXTO</span>
   O halo é uma cópia borrada do texto; só a opacidade anima (compositor). */
.headline-glow {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: var(--atla-lilac);
}
.headline-glow::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--atla-purple);
  filter: blur(16px);
  opacity: 0.3;
  pointer-events: none;
  animation: headline-glow 3.8s ease-in-out infinite alternate;
}
@keyframes headline-glow {
  from { opacity: 0.22; }
  to { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .headline-glow::after { animation: none; opacity: 0.5; }
}

/* --- 1c. Card glassmorphism premium ---------------------------------------
   Coloque dentro de um wrapper [data-reveal] (como os cards do site): o
   data-reveal tem seu próprio "transition" e sobrescreveria o do card. */
.glass-card-premium {
  --r: 1.5rem;
  position: relative;
  isolation: isolate;
  border-radius: var(--r);
  background-color: rgb(5 5 5 / 0.75);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.01));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.07),
    0 40px 80px -40px rgb(0 0 0 / 0.9);
  transition: translate 0.7s var(--ease);
}
@media (min-width: 768px) {
  .glass-card-premium {
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
  }
}
/* Borda fina ultravioleta */
.glass-card-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  clip-path: inset(0 round var(--r));
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(150deg, rgb(138 43 226 / 0.8), rgb(255 255 255 / 0.08) 28%, rgb(255 255 255 / 0.03) 58%, rgb(70 2 233 / 0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.7;
  transition: opacity 0.7s var(--ease);
}
/* Halo que se expande no hover (só opacity + scale: barato) */
.glass-card-premium::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    0 0 0 1px rgb(138 43 226 / 0.45),
    0 0 56px -8px rgb(138 43 226 / 0.55),
    0 30px 90px -30px rgb(70 2 233 / 0.6);
  opacity: 0;
  scale: 0.97;
  transition: opacity 0.7s var(--ease), scale 0.7s var(--ease);
}
.glass-card-premium:focus-within::before { opacity: 1; }
@media (hover: hover) {
  .glass-card-premium:hover { translate: 0 -6px; }
  .glass-card-premium:hover::before { opacity: 1; }
  .glass-card-premium:hover::after { opacity: 1; scale: 1; }
}

/* --- 2. O ECOSSISTEMA [S07b] — seção, abas e painéis ---------------------- */
.eco {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.eco__head {
  max-width: 48rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Menu estilo dashboard: cápsula com 3 pílulas */
.eco__tabs {
  display: grid;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: 1.5rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  background-color: rgb(5 5 5 / 0.6);
}
@media (min-width: 768px) {
  .eco__tabs {
    grid-auto-flow: column;
    width: max-content;
    max-width: 100%;
    border-radius: 999px;
  }
}
.eco-tab {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--atla-mist);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: color 0.4s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
.eco-tab__n {
  color: var(--atla-lilac);
  letter-spacing: 0.08em;
  transition: color 0.4s var(--ease);
}
@media (hover: hover) {
  .eco-tab:hover {
    color: var(--atla-ice);
    background-color: rgb(255 255 255 / 0.04);
  }
}
.eco-tab[aria-selected="true"] {
  color: var(--atla-ice);
  border-color: rgb(138 43 226 / 0.6);
  background-image: linear-gradient(135deg, rgb(138 43 226 / 0.34), rgb(70 2 233 / 0.16));
  box-shadow:
    0 0 28px -8px rgb(138 43 226 / 0.85),
    inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.eco-tab[aria-selected="true"] .eco-tab__n { color: var(--atla-plasma); }

/* Palco: os 3 painéis dividem a mesma célula da grade, então a altura é a do
   maior painel — sem salto de layout ao trocar de aba. */
.eco__stage {
  display: grid;
  gap: 2.5rem;
  margin-top: 1.25rem;
  padding: clamp(1.5rem, 4vw, 3.25rem);
}
.eco-panel {
  position: relative;
  grid-area: 1 / 1;
  max-width: 44rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: 0 14px;
  /* saída: o visibility só some depois do fade */
  transition: opacity 0.22s ease-in, translate 0.22s ease-in, visibility 0s linear 0.22s;
}
.eco-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: 0 0;
  transition: opacity 0.6s var(--ease), translate 0.7s var(--ease), visibility 0s;
}
/* 1) clique: fade-out rápido + sobe levemente (220ms — igual ao OUT_MS do script.js) */
.eco-panel.is-active.is-leaving {
  opacity: 0;
  translate: 0 -10px;
  transition: opacity 0.22s ease-in, translate 0.22s ease-in;
}
/* 2) novo painel nasce 16px abaixo, invisível, sem transição; o script tira
   esta classe e ele sobe até a posição final com fade-in */
.eco-panel.is-active.is-entering {
  opacity: 0;
  translate: 0 16px;
  transition: none;
}

/* Cascata: kicker → título → texto → lista → link */
.eco-panel > * {
  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.eco-panel > :nth-child(2) { --i: 1; }
.eco-panel > :nth-child(3) { --i: 2; }
.eco-panel > :nth-child(4) { --i: 3; }
.eco-panel > :nth-child(5) { --i: 4; }
.eco-panel:not(.is-active) > *,
.eco-panel.is-entering > * {
  opacity: 0;
  translate: 0 12px;
  transition: none;
}

.eco-panel__kicker {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--atla-lilac);
}
.eco-panel__title {
  margin-top: 1rem;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.eco-panel__text {
  margin-top: 1.25rem;
  font-size: 1rem;
  line-height: 1.7;
}
.eco-panel__list {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: rgb(244 241 255 / 0.88);
}
.eco-panel__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eco-panel__list li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #8a2be2;
  box-shadow: 0 0 8px 2px rgb(138 43 226 / 0.8);
}
.eco-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--atla-ice);
}
/* Numeral gigante vazado, só em telas largas */
@media (min-width: 1024px) {
  .eco-panel::after {
    content: attr(data-index);
    content: attr(data-index) / "";
    position: absolute;
    top: -1.5rem;
    left: calc(100% + 2rem);
    font-family: var(--font-display, inherit);
    font-size: clamp(8rem, 14vw, 13rem);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgb(138 43 226 / 0.28);
    pointer-events: none;
  }
}

/* Sem JavaScript: todos os painéis aparecem empilhados e as abas somem */
html:not(.js) .eco__tabs { display: none; }
html:not(.js) .eco-panel,
html:not(.js) .eco-panel > * {
  grid-area: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  translate: none;
}


/* ==========================================================================
   [S07c] GRADE DE CURSOR — camadas da seção "O Ecossistema"
   O canvas (criado pelo script.js) fica em z-index:0, entre a grade estática
   (.cyber-grid, z-index:-1) e o conteúdo. O conteúdo sobe para z-index:1 para
   o brilho passar SEMPRE por trás de textos, abas e cards.
   ========================================================================== */
#ecossistema > .shell {
  position: relative;
  z-index: 1;
}
/* Puramente decorativo: nunca captura clique, seleção ou arraste */
#ecossistema > canvas.eco-cursor-grid {
  pointer-events: none;
}
@media print, (prefers-reduced-motion: reduce) {
  #ecossistema > canvas.eco-cursor-grid { display: none; }
}
/* Opcional — grade em repouso ainda mais discreta (hoje: 0.13 no bloco [PRM]):
#ecossistema .cyber-grid { opacity: 0.55; } */


/* ==========================================================================
   [S05] MANIFESTO — "True Focus": a frase no centro da tela ganha foco
   O script.js ([S05]) marca a frase central com .is-active + .headline-glow
   e liga [data-focus] no palco. Sem JavaScript, as 3 frases ficam acesas.
   Fora de @layer de propósito: vence as utilitárias sem novo build do Tailwind.
   ========================================================================== */

/* Título fixo à esquerda enquanto as frases passam (só desktop) */
@media (min-width: 1024px) {
  .manifesto-head {
    position: sticky;
    top: 30vh;
    align-self: start;
  }
}

.manifesto-stage {
  display: grid;
  gap: clamp(3.75rem, 12vh, 7.5rem);
}

/* Syne em tamanho de impacto: text-2xl (1.5rem) no celular → text-4xl (2.25rem) no desktop */
.manifesto-phrase {
  position: relative;
  isolation: isolate;
  max-width: 21em;
  color: var(--atla-ice);
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.25rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.02em;
  text-wrap: balance;
  transition: opacity 0.7s var(--ease), filter 0.7s var(--ease), color 0.7s var(--ease);
}

/* Desenho assimétrico: cada frase com recuo e largura próprios (tablet/desktop) */
@media (min-width: 768px) {
  .manifesto-phrase:nth-child(2) {
    margin-left: clamp(1.5rem, 7vw, 6rem);
    max-width: 19em;
  }
  .manifesto-phrase:nth-child(3) {
    margin-left: clamp(0.75rem, 3vw, 2.75rem);
    max-width: 20em;
  }
}

/* Fio de luz acima de cada frase: cresce e acende no foco */
.manifesto-phrase::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1.5rem;
  width: 2.25rem;
  height: 1px;
  background: linear-gradient(90deg, var(--atla-violet), transparent);
  opacity: 0.4;
  transition: width 0.9s var(--ease), opacity 0.9s var(--ease), box-shadow 0.9s var(--ease);
}

/* Halo ultravioleta: cópia borrada do texto (data-text é preenchido pelo script).
   Sempre existe, com opacidade 0 — assim o brilho aparece e some com fade suave. */
.manifesto-phrase::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  z-index: -1;
  color: #8a2be2;
  filter: blur(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s var(--ease);
}

/* Palavras-chave: sem cor própria; ganham brilho só quando a frase está em foco */
.manifesto-phrase .manifesto-em {
  color: inherit;
  text-shadow: none;
  transition: text-shadow 0.9s var(--ease);
}

/* --- Fora de foco (só quando o script está ativo) -------------------------- */
.manifesto-stage[data-focus] .manifesto-phrase {
  opacity: 0.3;
  filter: blur(1.5px);
}

/* --- Em foco ------------------------------------------------------------- */
.manifesto-phrase.headline-glow {
  display: block;
}
.manifesto-stage[data-focus] .manifesto-phrase.is-active {
  opacity: 1;
  filter: blur(0);
  color: #fff;
}
.manifesto-phrase.headline-glow::after {
  opacity: 0.5;
  animation: none;
}
.manifesto-phrase.is-active::before {
  width: 5rem;
  opacity: 1;
  box-shadow: 0 0 10px rgb(138 43 226 / 0.8);
}
.manifesto-phrase.is-active .manifesto-em {
  text-shadow: 0 0 0.55em rgb(138 43 226 / 0.85);
}