/* style.css */

/* ==========================================================================
   Variáveis CSS (Design System & Theming)
   ========================================================================== */
:root {
    /* Cores Primárias (Azul Degrade) */
    --color-primary: #0bd6fb;
    --color-primary-light: #60e7ff;
    --gradient-primary: linear-gradient(135deg, #0bd6fb, #60e7ff);
    
    /* Cores de Fundo (Dark Mode - Preto Absoluto) */
    --color-bg-main: #000000;
    --color-bg-secondary: #050505;
    --color-bg-card: #0a0a0a;
    
    /* Texto */
    --color-text-main: #ffffff;
    --color-text-muted: #a0a0a0;
    
    /* Borders & Shadows */
    --border-light: 1px solid rgba(11, 214, 251, 0.2);
    --shadow-glow: 0 0 20px rgba(11, 214, 251, 0.3);
    
    /* Tipografia */
    --font-primary: 'Inter', sans-serif;
    
    /* Espaçamentos e Medidas */
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 4rem;
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    
    /* Transições */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ==========================================================================
   Reset e Base
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    overflow-x: clip; /* Modern way to prevent horizontal scroll without breaking sticky */
    max-width: 100vw;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
    line-height: 1.6;
}

/* ==========================================================================
   (Ruído removido a pedido do usuário)
   ========================================================================== */

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.text-center {
    text-align: center;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xl);
    line-height: 1.2;
}

section {
    padding: var(--spacing-xl) 0;
}

/* ==========================================================================
   Botões (CTAs)
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: var(--border-radius-md);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.btn-primary {
    background-color: var(--color-primary);
    color: #000000;
    background: var(--gradient-primary);
    font-weight: 700;
    border: none;
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-glow);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    background: var(--gradient-primary);
    color: #000;
}

.btn-large {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   Botão Futurista (Uiverse.io) - Ver Mais/Menos
   ========================================================================== */
.btn-wrapper {
  position: relative;
  display: inline-block;
}

.btn-uiverse {
  --border-radius: 24px;
  --padding: 4px;
  --transition: 0.4s;
  --button-color: #040814; /* Fundo do site */
  --highlight-color-hue: 190deg;
  position: relative;

  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.8rem 2.2rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 2px;

  background-color: var(--button-color);

  box-shadow:
    /* inset */
    inset 0px 1px 1px rgba(255, 255, 255, 0.2),
    inset 0px 2px 2px rgba(255, 255, 255, 0.15),
    inset 0px 4px 4px rgba(255, 255, 255, 0.1),
    inset 0px 8px 8px rgba(255, 255, 255, 0.05),
    inset 0px 16px 16px rgba(255, 255, 255, 0.05),
    /* drop */ 0px -1px 1px rgba(0, 0, 0, 0.02),
    0px -2px 2px rgba(0, 0, 0, 0.03),
    0px -4px 4px rgba(0, 0, 0, 0.05),
    0px -8px 8px rgba(0, 0, 0, 0.06),
    0px -16px 16px rgba(0, 0, 0, 0.08);

  border: solid 1px rgba(255, 255, 255, 0.13);
  border-radius: var(--border-radius);
  cursor: pointer;

  transition:
    box-shadow var(--transition),
    border var(--transition),
    background-color var(--transition);
}
.btn-uiverse::before {
  content: "";
  position: absolute;
  top: calc(0px - var(--padding));
  left: calc(0px - var(--padding));
  width: calc(100% + var(--padding) * 2);
  height: calc(100% + var(--padding) * 2);
  border-radius: calc(var(--border-radius) + var(--padding));
  pointer-events: none;
  background-image: linear-gradient(0deg, rgba(0,0,0,0.26), rgba(0,0,0,0.66));

  z-index: -1;
  transition:
    box-shadow var(--transition),
    filter var(--transition);
  box-shadow:
    0 -8px 8px -6px #0000 inset,
    0 -16px 16px -8px #00000000 inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}
.btn-uiverse::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    0deg,
    #fff,
    hsl(var(--highlight-color-hue), 100%, 70%),
    hsla(var(--highlight-color-hue), 100%, 70%, 50%),
    8%,
    transparent
  );
  background-position: 0 0;
  opacity: 0;
  transition:
    opacity var(--transition),
    filter var(--transition);
}

.btn-letter {
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, 0.33);
  animation: letter-anim 2s ease-in-out infinite;
  transition:
    color var(--transition),
    text-shadow var(--transition),
    opacity var(--transition);
}

@keyframes letter-anim {
  50% {
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.53);
    color: #fff;
  }
}

.btn-svg {
  flex-grow: 1;
  height: 24px;
  margin-right: 0.5rem;
  fill: #e8e8e8;
  animation: flicker 2s linear infinite;
  animation-delay: 0.5s;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
  transition:
    fill var(--transition),
    filter var(--transition),
    opacity var(--transition);
}
@keyframes flicker {
  50% {
    opacity: 0.3;
  }
}

.txt-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 6.4em;
  justify-content: center;
}
.txt-1 {
  display: flex;
}

/* Hover e Click (Focado) states do Uiverse */
.btn-uiverse:active, .btn-uiverse:focus {
  border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%);
  background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5);
}
.btn-uiverse:active::before, .btn-uiverse:focus::before {
  box-shadow:
    0 -8px 12px -6px #fffa inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset,
    1px 1px 1px #fff4,
    2px 2px 2px #fff2,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}
.btn-uiverse:active::after, .btn-uiverse:focus::after {
  opacity: 1;
  mask-image: linear-gradient(0deg, #fff, transparent);
  filter: brightness(200%);
}
.btn-uiverse:active .btn-letter, .btn-uiverse:focus .btn-letter {
  text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%);
  animation: none;
  color: #fff;
}

.btn-uiverse:hover {
  border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%);
}
.btn-uiverse:hover::before {
  box-shadow:
    0 -8px 8px -6px #fffa inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}
.btn-uiverse:hover::after {
  opacity: 1;
  mask-image: linear-gradient(0deg, #fff, transparent);
}
.btn-uiverse:hover .btn-svg {
  fill: #fff;
  filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%))
    drop-shadow(0 -4px 6px #0009);
  animation: none;
}
.btn-uiverse:hover .btn-letter {
  font-family: 'Badbrush', cursive !important;
  color: var(--color-primary) !important;
  animation: none;
  text-shadow: 0 0 8px var(--color-primary);
  font-size: 1.4rem; /* Um pouco maior pra Badbrush ficar perfeitamente legível */
}

/* Delays para as letras animadas pulsarem em onda */
.btn-letter:nth-child(1) { animation-delay: 0s; }
.btn-letter:nth-child(2) { animation-delay: 0.08s; }
.btn-letter:nth-child(3) { animation-delay: 0.16s; }
.btn-letter:nth-child(4) { animation-delay: 0.24s; }
.btn-letter:nth-child(5) { animation-delay: 0.32s; }
.btn-letter:nth-child(6) { animation-delay: 0.4s; }
.btn-letter:nth-child(7) { animation-delay: 0.48s; }
.btn-letter:nth-child(8) { animation-delay: 0.56s; }
.btn-letter:nth-child(9) { animation-delay: 0.64s; }

/* Efeito Pulse original do site global */
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(11, 214, 251, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(11, 214, 251, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(11, 214, 251, 0); }
}

.btn-pulse {
    animation: pulse 2.5s infinite;
}

.btn-pulse:hover {
    animation: none; /* Pausa o pulse no hover pra não ficar estranho */
}

/* ==========================================================================
   Header / Topo Flutuante (Ilha)
   ========================================================================== */

/* Registro das variáveis para animação fluida no CSS Moderno */
@property --border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0turn;
}

@property --bg-alpha {
    syntax: "<number>";
    inherits: false;
    initial-value: 0.4;
}

@keyframes border-spin {
    from { --border-angle: 0turn; }
    to { --border-angle: 1turn; }
}

.floating-header {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content; /* A pílula agora abraça o conteúdo, em vez de se esticar */
    max-width: 95vw;
    
    /* EFEITO VIDRO TEXTURIZADO (Sem ruído) */
    --bg-alpha: 0.4; /* Transparência base */
    background-color: rgba(4, 21, 39, var(--bg-alpha));
    
    backdrop-filter: blur(25px) saturate(120%);
    -webkit-backdrop-filter: blur(25px) saturate(120%);
    
    border-radius: 50px;
    z-index: 1000;
    
    /* Sombra de profundidade + Filete de luz estático de base */
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.6),
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        inset 0 -1px 1px rgba(0, 0, 0, 0.5);
        
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1), --bg-alpha 0.4s ease;
}

/* O Feixe de luz correndo APENAS na borda externa (Isolado) */
.floating-header::before {
    content: '';
    position: absolute;
    inset: -1px; /* Expande 1px para fora da pílula */
    border-radius: 51px; /* Raio um pouco maior para acompanhar a curva externa */
    padding: 1px; /* Espessura da borda de luz */
    
    background: conic-gradient(from var(--border-angle), transparent 0%, transparent 65%, var(--color-primary) 95%, #ffffff 100%);
    
    /* Máscara mágica: recorta 100% do miolo e deixa APENAS o "padding" visível */
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    
    pointer-events: none;
    z-index: -1;
    animation: border-spin 4s linear infinite;
}

.floating-header.scrolled {
    top: 15px; /* Sobe um pouquinho quando rola a tela */
    --bg-alpha: 0.75; /* Fica mais opaco suavemente */
    box-shadow: 
        0 15px 30px rgba(0, 0, 0, 0.8),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.floating-header.header-hidden {
    transform: translate(-50%, -150%); /* Joga a pílula para cima da tela, mantendo o eixo X centralizado */
    opacity: 0;
    pointer-events: none;
}

.floating-header-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 10px 25px;
    gap: 50px;
}

.nav-group {
    display: flex;
    gap: 10px;
}
.floating-header-container > .nav-group:first-child {
    justify-content: flex-end;
}
.floating-header-container > .nav-group:last-child {
    justify-content: flex-start;
}

.nav-pill {
    background-color: rgba(0, 0, 0, 0.35); /* Botões mais escuros afundados */
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 2px;
    
    /* Trava o tamanho do botão para evitar o Bug de Flicker no hover */
    width: 140px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    border-radius: 30px;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.05);
    transition: all 0.3s ease;
    
    /* Configuração para o brilho Neon interno */
    position: relative;
    overflow: hidden;
    isolation: isolate; /* Garante que o brilho fique acima do fundo, mas atrás do texto */
}

/* O "feixe de luz" neon invisível */
.nav-pill::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(
        circle 50px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(11, 214, 251, 0.5), /* Cor primária Ciano brilhante */
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: -1;
}

.nav-pill:hover {
    background-color: rgba(255, 255, 255, 0.02);
    box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 4px 15px rgba(0,0,0,0.4);
    color: var(--color-primary);
    transform: translateY(-2px);
    
    font-family: 'Badbrush', cursive;
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 1px;
}

/* Revela a luz Neon no Hover */
.nav-pill:hover::before {
    opacity: 1;
}

.logo img, .header-logo-img {
    height: 85px;
    width: auto;
    max-height: 95px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.5));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.header-logo-link:hover .desktop-logo-img {
    transform: scale(1.08);
    filter: drop-shadow(0 0 12px rgba(0, 210, 255, 0.8));
}

/* ==========================================================================
   Hero Banner (Imagem 100%)
   ========================================================================== */
/* ==========================================================================
   SEÇÃO HERO (Novo Design - WebGL + Text Box)
   ========================================================================== */

/* SCROLL TRACK: Define a altura total da rolagem travada (300vh = Fase 1 + Fase 2) */
.hero-scroll-track {
    width: 100%;
    height: 300vh;
    position: relative;
    display: block;
}

/* O palco fixo no topo */
.hero-banner {
    width: 100%;
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000;
    z-index: 10;
}

/* Degrade preto na base da seção para suavizar o corte com a seção de baixo */
.hero-banner::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25%; /* Cobre os últimos 25% da tela */
    background: linear-gradient(to top, #000000 0%, rgba(0,0,0,0.8) 30%, transparent 100%);
    z-index: 15; /* Fica acima da Fase 2, mas não bloqueia cliques se pointer-events for none */
    pointer-events: none;
}

/* FASE 1: Avatar e Magia (Frente) */
.phase1-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20; /* Na frente de tudo */
    background: #000; /* Fundo preto pra esconder a fase 2 perfeitamente no começo */
    will-change: transform, opacity;
}

/* BACKGROUND CSS PURO (Fase 1 - Atrás do Avatar) */
.dark-gradient-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
    z-index: 1; 
}

.dg-radial-base {
    position: absolute;
    inset: 0;
    opacity: 1;
    background: radial-gradient(100% 100% at 0% 0%, rgb(46, 46, 46) 0%, rgb(0, 0, 0) 100%);
    mask-image: radial-gradient(125% 100% at 0% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.224) 88.2883%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: radial-gradient(125% 100% at 0% 0%, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.224) 88.2883%, rgba(0, 0, 0, 0) 100%);
}

.dg-streak {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background: linear-gradient(rgb(0, 207, 255) 0%, rgba(0, 207, 255, 0) 100%);
    transform: skewX(45deg);
}

.dg-streak-1 {
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 36%, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0.13) 67%, rgb(0, 0, 0) 78%, rgba(0, 0, 0, 0) 97%);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0) 36%, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0.13) 67%, rgb(0, 0, 0) 78%, rgba(0, 0, 0, 0) 97%);
}
.dg-streak-2 {
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 11%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0.55) 41%, rgba(0, 0, 0, 0.13) 67%, rgb(0, 0, 0) 78%, rgba(0, 0, 0, 0) 97%);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 11%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0.55) 41%, rgba(0, 0, 0, 0.13) 67%, rgb(0, 0, 0) 78%, rgba(0, 0, 0, 0) 97%);
}
.dg-streak-3 {
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 9%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0.55) 28%, rgba(0, 0, 0, 0.424) 40%, rgb(0, 0, 0) 48%, rgba(0, 0, 0, 0.267) 54%, rgba(0, 0, 0, 0.13) 78%, rgb(0, 0, 0) 88%, rgba(0, 0, 0, 0) 97%);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 9%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0.55) 28%, rgba(0, 0, 0, 0.424) 40%, rgb(0, 0, 0) 48%, rgba(0, 0, 0, 0.267) 54%, rgba(0, 0, 0, 0.13) 78%, rgb(0, 0, 0) 88%, rgba(0, 0, 0, 0) 97%);
}
.dg-streak-4 {
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 17%, rgba(0, 0, 0, 0.55) 26%, rgb(0, 0, 0) 35%, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, 0.13) 69%, rgb(0, 0, 0) 79%, rgba(0, 0, 0, 0) 97%);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 17%, rgba(0, 0, 0, 0.55) 26%, rgb(0, 0, 0) 35%, rgba(0, 0, 0, 0) 47%, rgba(0, 0, 0, 0.13) 69%, rgb(0, 0, 0) 79%, rgba(0, 0, 0, 0) 97%);
}
.dg-streak-5 {
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0.55) 27%, rgb(0, 0, 0) 42%, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.13) 67%, rgb(0, 0, 0) 74%, rgb(0, 0, 0) 82%, rgba(0, 0, 0, 0.47) 88%, rgba(0, 0, 0, 0) 97%);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0.55) 27%, rgb(0, 0, 0) 42%, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.13) 67%, rgb(0, 0, 0) 74%, rgb(0, 0, 0) 82%, rgba(0, 0, 0, 0.47) 88%, rgba(0, 0, 0, 0) 97%);
}

.dg-noise {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-repeat: repeat;
    background-image: url("https://framerusercontent.com/images/6mcf62RlDfRfU61Yg5vb2pefpi4.png");
    background-size: 149.76px;
}

.dg-dots {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.5) 1px, transparent 0);
    background-size: 20px 20px;
}

.dg-radial-highlight {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(30,41,59,0.2) 0%, transparent 50%);
}

.hero-avatar-base {
    position: absolute;
    bottom: -15vh; /* Ajuste para não cortar o casaco no desktop */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 900px;
    z-index: 3;
    pointer-events: none;
}

.hero-magic-wrapper {
    position: absolute;
    bottom: -5%; 
    left: 50%;
    transform: translateX(-50%);
    width: 48%; 
    min-width: 300px;
    max-width: 1200px; 
    z-index: 5;
}
.hero-magic-hitbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45%;
    height: 70%;
    z-index: 10;
    cursor: pointer;
}
.hero-magic-video {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none; 
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 0 30px var(--color-primary));
}
.hero-magic-hitbox:hover + .hero-magic-video {
    transform: scale(1.05);
    filter: drop-shadow(0 0 50px var(--color-primary));
}

/* SHADER ORIGINAL (Grid de Linhas Cyan) */
.hero-header {
    position: absolute;
    top: 2rem;
    left: 0;
    width: 100%;
    z-index: 20;
    padding: 0 5%;
}

.hero-wave-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
#stage {
    mix-blend-mode: screen;
}
.hero-wave-bg canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* FASE 2: Fundo WebGL e Text Box (Atrás) */
.phase2-content {
    opacity: 0; /* Inicia oculto, revelado pelo JS na segunda metade do scroll */
    transform: translateY(10vh);
    will-change: transform, opacity;
}

.hero-webgl-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0; isolation: isolate;
}

.reference-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    padding: 0.5rem;
    border: none; /* Borda escura estática removida */
    border-radius: 24px; /* Bordas arredondadas externas */
}

.reference-border-outer {
    position: relative;
}

.reference-main {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borda estilo vidro */
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    overflow: hidden;
    background: rgba(15, 15, 15, 0.3); /* Fundo translúcido escuro */
    backdrop-filter: blur(24px); /* Efeito bem embaçado */
    -webkit-backdrop-filter: blur(24px);
    border-radius: 20px; /* Bordas arredondadas internas */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1); /* Sombras para profundidade do vidro */
}

.reference-title {
    margin-bottom: 0.75rem;
    color: #ffffff;
    text-align: center;
    font-weight: 800;
    letter-spacing: -0.05em;
    font-size: clamp(2rem, 5vw, 4rem); /* Ajustado para textos longos */
    line-height: 1.1;
}

.reference-subtitle {
    color: rgba(255, 255, 255, 0.6);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: center;
    font-size: clamp(0.75rem, 3vw, 1.125rem); /* text-xs md:text-sm lg:text-lg */
    margin: 0 auto;
    max-width: 90%;
}

.reference-status {
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.status-dot-wrapper {
    position: relative;
    display: flex;
    height: 0.75rem;
    width: 0.75rem;
    align-items: center;
    justify-content: center;
}

.status-dot-ping {
    position: absolute;
    display: inline-flex;
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    background-color: #22c55e;
    opacity: 0.75;
    animation: pulse-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.status-dot-core {
    position: relative;
    display: inline-flex;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 9999px;
    background-color: #22c55e;
}

@keyframes pulse-ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.status-text {
    font-size: 0.75rem;
    line-height: 1rem;
    color: #22c55e;
    margin: 0;
}

.reference-button-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

.liquid-glass-btn {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
}

.liquid-glass-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.hero-glass-edges {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Deixa o mouse passar direto para não bloquear cliques na imagem */
    
    --mouse-x: -1000px;
    --mouse-y: -1000px;

    /* Efeito de vidro embassado e escurecimento leve */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(0, 0, 0, 0.15); /* Um pouco de preto pra dar contraste */
    z-index: 5;

    /* A mágica dupla: Uma máscara para o vidro nas bordas, e uma segunda máscara (círculo) que subtrai o vidro onde o mouse passa */
    -webkit-mask-image: 
        radial-gradient(circle 120px at var(--mouse-x) var(--mouse-y), black 0%, transparent 80%),
        linear-gradient(to right, 
            rgba(0,0,0,1) 0%,      
            rgba(0,0,0,0.8) 15%,   
            rgba(0,0,0,0) 35%,     
            rgba(0,0,0,0) 65%,     
            rgba(0,0,0,0.8) 85%,   
            rgba(0,0,0,1) 100%     
        );
    -webkit-mask-composite: destination-out; /* Subtrai o círculo (primeiro) do linear (segundo) */

    mask-image: 
        radial-gradient(circle 120px at var(--mouse-x) var(--mouse-y), black 0%, transparent 80%),
        linear-gradient(to right, 
            rgba(0,0,0,1) 0%, 
            rgba(0,0,0,0.8) 15%, 
            rgba(0,0,0,0) 35%, 
            rgba(0,0,0,0) 65%, 
            rgba(0,0,0,0.8) 85%, 
            rgba(0,0,0,1) 100%
        );
    mask-composite: exclude; /* Padrão W3C para subtração */
}

.hero-banner-cta {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* ==========================================================================
   Portfolio Motions (Carrossel 9:16)
   ========================================================================== */
.motion-portfolio {
    position: relative;
    background-color: var(--color-bg-main);
    padding: 0;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
}

.portfolio-bg-img {
    width: 100%;
    height: auto;
    display: block;
}

.portfolio-wave-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* O WebGL fica no fundo */
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-wave-bg canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.motion-portfolio-content {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2; /* Sempre na frente do WebGL */
}

.motion-section-title {
    text-align: center;
    margin-bottom: 2%;
    color: var(--color-text-main);
    z-index: 10;
    position: relative;
    text-shadow: 0 4px 20px rgba(0,0,0,0.8);
}

/* ==========================================================================
   Animação Cinemática (Blur & Float)
   ========================================================================== */
.cinematic-title {
    opacity: 0; /* Inicia invisível para a animação */
    transform-origin: center center;
    will-change: transform, opacity, filter; /* Força aceleração de GPU */
}

/* Dispara a animação quando a seção pai entra na tela */
.motion-portfolio.visible .cinematic-title {
    animation: 
        cinematic-entrance 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards,
        float-breathe 3s ease-in-out infinite alternate 2.5s;
}

@keyframes cinematic-entrance {
    0% {
        opacity: 0;
        filter: blur(20px);
        transform: scale(1.1) translate3d(0, 30px, 0); /* translate3d ativa a Placa de Vídeo */
    }
    100% {
        opacity: 1;
        filter: blur(0px);
        transform: scale(1) translate3d(0, 0, 0);
    }
}

@keyframes float-breathe {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, -10px, 0);
    }
}

.font-montserrat {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: normal; 
    display: block; 
    font-size: clamp(1.5rem, 3.5vw, 3.2rem); 
    line-height: 1; 
}

@font-face {
    font-family: 'Badbrush';
    src: url('./assets/fonts/Badbrush.ttf?v=3') format('truetype'),
         url('./assets/fonts/Badbrush.otf?v=3') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.font-badbrush {
    font-family: 'Badbrush', cursive;
    --mouse-x: -500px;
    --mouse-y: -500px;
    background: 
        radial-gradient(circle 100px at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%),
        linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 70%),
        var(--gradient-primary);
    background-size: 100% 100%, 200% auto, 100% auto;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block; 
    margin-left: 0; 
    margin-top: clamp(-20px, -4vw, -40px); 
    padding: 0 20px; 
    letter-spacing: 2px; 
    font-size: clamp(3rem, 7vw, 6.5rem); 
    line-height: 1;
    transform: rotate(-3deg);
    text-shadow: none; 
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));
    position: relative;
    z-index: 2;
    animation: shine-text 5s infinite;
}

@keyframes shine-text {
    0% {
        background-position: 0 0, -200% center, 0 0;
    }
    20% {
        background-position: 0 0, 200% center, 0 0;
    }
    100% {
        background-position: 0 0, 200% center, 0 0;
    }
}

.motion-carousel-wrapper {
    position: relative;
    width: 100%;
    height: 550px; /* Altura fixa em vez de porcentagem vazia para Desktop */
    margin-top: 2rem;
}

/* Efeito turvo (Depth of Field + Vignette) nas bordas do carrossel */
.motion-carousel-wrapper::before,
.motion-carousel-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 300px; /* Largura da zona de embaçamento */
    height: 100%;
    z-index: 5;
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.motion-carousel-wrapper::before {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, transparent 100%);
    mask-image: linear-gradient(to right, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);
}

.motion-carousel-wrapper::after {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.8) 0%, transparent 100%);
    mask-image: linear-gradient(to left, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 0%, transparent 100%);
}

.motion-track {
    display: flex;
    width: max-content;
    height: 100%;
    animation: scroll-motion 40s linear infinite;
    gap: 1.5vw;
    padding: 0 1.5vw; 
}

@keyframes scroll-motion {
    0% { transform: translateX(0); }
    100% { transform: translateX(-81.25%); }
}

.motion-track:hover {
    animation-play-state: paused;
}

.motion-item {
    height: 100%; /* Toma 100% dos 50% definidos no wrapper */
    aspect-ratio: 9/16; /* Baseado na altura, calcula a largura final */
    flex: 0 0 auto;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    opacity: 1; /* Removida a opacidade baixa, agora ficam sempre 100% vivos */
    filter: grayscale(100%); /* Deixa tudo preto e branco por padrão */
    transform: scale(0.95);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
}

.motion-item:hover {
    opacity: 1;
    filter: grayscale(0%); /* Devolve as cores originais quando passa o mouse */
    transform: scale(1.05);
    z-index: 10;
    box-shadow: var(--shadow-glow);
    border: 2px solid var(--color-primary);
}

@keyframes scroll-motion {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - (var(--spacing-md) / 2))); }
}

.motion-item video,
.motion-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none; /* Deixa o hover ir para o container .motion-item */
}

/* ==========================================================================
   Carrossel Infinito (Marquee 3D)
   ========================================================================== */
.marquee-section {
    background-color: transparent; /* Remove o fundo da seção */
    padding: 0;
    position: relative;
    /* Corta a largura no limite da tela, mas deixa vazar infinitamente pra cima e pra baixo */
    -webkit-clip-path: polygon(0 -2000px, 100% -2000px, 100% 2000px, 0 2000px);
    clip-path: polygon(0 -2000px, 100% -2000px, 100% 2000px, 0 2000px);
    height: 0; /* A seção não ocupa espaço, serve só de âncora pras faixas */
    display: flex;
    align-items: center;
    border: none;
    z-index: 5; /* Garante que fique acima das seções vizinhas */
}

.marquee-tape {
    position: absolute;
    width: 200vw;
    left: -50vw;
    top: 0;
}

.marquee-track {
    display: inline-flex;
    white-space: nowrap;
}

/* FAIXA DE TRÁS (FOCADA E NÍTIDA, MENOR) */
.marquee-back-tape {
    transform: translateY(-50%) rotate(-4deg);
    z-index: 1;
    filter: blur(0px); /* Nítida */
    opacity: 1;
    background-color: #000000; /* Fundo sólido PRETO absoluto */
    padding: 14px 0 6px 0; /* Padding assimétrico para compensar o espaço vazio que a fonte tem embaixo */
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.marquee-back-track {
    animation: marquee-back-anim 50s linear infinite; /* Mais lenta porque tem mais texto */
}

/* FAIXA DA FRENTE (DESFOCADA COMO SE ESTIVESSE COLADA NA LENTE DA CÂMERA, MAIOR) */
.marquee-front-tape {
    transform: translateY(-50%) rotate(4deg);
    z-index: 2;
    filter: blur(6px); /* Desfocada dando profundidade */
    opacity: 1; /* Removido o 0.8 pra não ficar transparente/vidro */
    pointer-events: none; /* Mouse ignora a faixa da frente pra não atrapalhar */
    background-color: #000000; /* Fundo sólido PRETO absoluto */
    padding: 26px 0 14px 0; /* Mais espaço no topo para centralizar visualmente a letra maiúscula */
    box-shadow: 0 10px 40px rgba(0,0,0,1); /* Sombra mais forte para descolar bem do fundo */
}

.marquee-front-track {
    animation: marquee-front-anim 30s linear infinite;
}

/* O brilho neon passando na borda das fitas */
.marquee-back-tape::before,
.marquee-front-tape::before {
    content: '';
    position: absolute;
    inset: -1px;
    padding: 2px;
    background: conic-gradient(from var(--border-angle), transparent 0%, transparent 65%, var(--color-primary) 95%, #ffffff 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
    animation: border-spin 6s linear infinite;
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Título Frontal Padrão (Maior) */
.marquee-content span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* Semibold conforme solicitado */
    font-size: 2.5rem;
    color: #ffffff; /* Preenchimento branco sólido */
    -webkit-text-stroke: 0; /* Remove a borda vazada */
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1;
}

/* Ajuste fino para a fonte badbrush Frontal (Maior) */
.marquee-content span.font-badbrush {
    font-family: 'Badbrush', cursive; /* Garante que está puxando a Badbrush */
    font-weight: normal; /* Fontes manuscritas não costumam ter bold/semibold */
    transform: translateY(8px);
    -webkit-text-stroke: 0;
}

/* --- Títulos da Faixa Traseira (Menores) --- */
.marquee-back-track .marquee-content span {
    font-size: 1.5rem;
}
.marquee-back-track .marquee-content span.font-badbrush {
    transform: translateY(4px); /* Menos offset já que a fonte é menor */
}

@keyframes marquee-front-anim {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

@keyframes marquee-back-anim {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); } 
}

/* ==========================================================================
   Prova Social
   ========================================================================== */
.social-proof-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
}

.social-proof-image {
    flex: 1;
}

.social-proof-image img {
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.social-proof-content {
    flex: 1;
}

.social-proof-content h2 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
}

.social-proof-content p {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-lg);
}

/* ==========================================================================
   Dor / Oportunidade
   ========================================================================== */
.opportunity {
    background-color: var(--color-bg-secondary);
}

.opportunity-container h2 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
}

.opportunity-container p {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    max-width: 800px;
    margin: 0 auto var(--spacing-lg) auto;
}

.audio-player-mockup {
    max-width: 700px;
    margin: 0 auto;
    background: var(--color-bg-card);
    border-radius: 50px;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5);
    border: 1px solid var(--color-border);
}

.play-btn-mockup {
    width: 40px;
    height: 40px;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.play-btn-mockup::after {
    content: '';
    display: block;
    border-style: solid;
    border-width: 8px 0 8px 12px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
}

.audio-player-mockup img {
    flex: 1;
    height: 30px;
    object-fit: cover;
    opacity: 0.7;
}

/* ==========================================================================
   Grids Genéricos
   ========================================================================== */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

@media (max-width: 768px) {
    .grid-2, .grid-3, .portfolio-grid, .flyers-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   O Que Você Vai Aprender (Cards)
   ========================================================================== */
.learning-card {
    background-color: var(--color-bg-card);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    text-align: left;
}

.learning-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
    border-color: rgba(11, 214, 251, 0.3);
}

.learning-card img {
    width: 64px;
    height: 64px;
    margin-bottom: var(--spacing-md);
    object-fit: contain;
}

.learning-card h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

.learning-card p {
    color: var(--color-text-muted);
}

/* ==========================================================================
   Ecossistema Completo
   ========================================================================== */
.ecosystem {
    background-color: var(--color-bg-secondary);
}

.ecosystem-main-img {
    max-width: 800px;
    margin: 0 auto var(--spacing-xl) auto;
}

.ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.module-thumb {
    position: relative;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    cursor: pointer;
}

.module-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.module-thumb:hover img {
    transform: scale(1.1);
}

.module-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--spacing-sm);
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    font-weight: 600;
}

/* ==========================================================================
   Accordions (Currículo e FAQ)
   ========================================================================== */
.accordion-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.accordion-item {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.accordion-header {
    padding: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
    transition: background-color var(--transition-fast);
}

.accordion-header:hover {
    background-color: rgba(255,255,255,0.05);
}

.accordion-icon {
    width: 24px;
    height: 24px;
    position: relative;
    transition: transform var(--transition-normal);
}

.accordion-icon::before,
.accordion-icon::after {
    content: '';
    position: absolute;
    background-color: var(--color-text-main);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.accordion-icon::before { width: 16px; height: 2px; }
.accordion-icon::after { width: 2px; height: 16px; transition: transform var(--transition-normal); }

.accordion-item.active .accordion-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal) ease-in-out;
}

.accordion-inner {
    padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
    color: var(--color-text-muted);
}

.accordion-inner ul {
    list-style: none;
}

.accordion-inner li {
    padding: var(--spacing-sm) 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* ==========================================================================
   Materiais Bônus
   ========================================================================== */
.bonus-card {
    background-color: var(--color-bg-card);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    border: 1px solid var(--color-border);
}

.bonus-card img {
    width: 150px;
    height: 150px;
    object-fit: cover;
}

.bonus-info {
    padding: var(--spacing-md);
}

.bonus-info h3 {
    font-size: 1.3rem;
    margin-bottom: var(--spacing-sm);
}

.bonus-info p {
    color: var(--color-text-muted);
}

/* ==========================================================================
   Oferta / Pricing
   ========================================================================== */
.pricing {
    background-color: var(--color-bg-secondary);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    max-width: 900px;
    margin: 0 auto;
    align-items: center; /* Permite que o recomendado fique maior */
}

.pricing-card {
    background-color: var(--color-bg-card);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-xl) var(--spacing-lg);
    border: 1px solid var(--color-border);
    text-align: center;
    position: relative;
    transition: transform var(--transition-normal);
}

.pricing-card.recommended {
    border-color: var(--color-primary);
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(11, 214, 251, 0.1);
    z-index: 10;
}

.badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-primary);
    color: #000;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 15px;
    border-radius: 20px;
}

.pricing-type {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-muted);
}

.pricing-price {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
    color: #fff;
}

.pricing-benefits {
    list-style: none;
    margin-bottom: var(--spacing-xl);
    text-align: left;
}

.pricing-benefits li {
    margin-bottom: var(--spacing-sm);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pricing-benefits li::before {
    content: '✓';
    color: var(--color-primary);
    font-weight: bold;
}

.pricing-card .btn {
    width: 100%;
}

/* ==========================================================================
   Garantia
   ========================================================================== */
.guarantee-container {
    max-width: 700px;
}

.guarantee-icon {
    width: 100px;
    margin: 0 auto var(--spacing-md) auto;
}

.guarantee h2 {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.guarantee p {
    color: var(--color-text-muted);
}

/* ==========================================================================
   Sobre o Autor
   ========================================================================== */
.author {
    background-color: transparent; /* Deixa o Vanta e o fundo principal fluírem */
    position: relative;
    overflow: hidden; /* Corta qualquer excesso do Vanta que cause barra de rolagem lateral */
    
    /* Degradê suave nas conexões superior e inferior para tirar o corte reto (Fade in / Fade out) */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

.author-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    max-width: 900px;
    position: relative; /* Garante que o conteúdo fique por cima do canvas do Vanta.js */
    z-index: 1;
}

.author-photo-wrapper {
    flex: 1;
}

.author-photo {
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 2px solid var(--color-border);
}

.author-info {
    flex: 1;
}

.author-info h2 {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-md);
}

.author-info p {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

.credentials-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.credential-tag {
    background-color: rgba(255,255,255,0.05);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
}

/* ==========================================================================
   Triads Portfolio Section (Deck Spreading)
   ========================================================================== */
.triads-section {
    padding: var(--spacing-xxl) 0;
    background-color: var(--color-bg-primary);
    position: relative;
    z-index: 1;
    overflow: hidden; /* Evita vazamentos para fora da tela */
}

.triads-list {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza as fileiras */
    gap: 20px; /* Distância mínima entre as tríades */
    margin-top: var(--spacing-xl);
}

.hidden-triad {
    display: none;
    animation: fadeInUp 0.6s ease forwards;
}

/* O "Case" que segura as 3 artes. Tamanho reduzido! */
.triad-case {
    position: relative;
    width: 20vw; /* Menor em telas grandes */
    max-width: 320px; /* Nunca passa desse tamanho */
    min-width: 240px; /* Não fica minúsculo no celular */
    aspect-ratio: 4/5;
    cursor: pointer;
    transition: transform 0.4s ease;
}

.flyer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-md); /* Arredondamento individual padrão */
    border: 2px solid transparent; /* Prepara a borda invisível */
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease, border-radius 0.6s ease, border-color 0.4s ease;
}

.flyer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(80%) brightness(0.6);
    transition: filter 0.6s ease;
}

/* --- ESTADO INICIAL (BARALHO FECHADO) --- */
.flyer-center {
    z-index: 3;
    transform: scale(1);
}

.flyer-left {
    z-index: 2;
    transform: translateX(-35%) scale(0.9) rotate(-6deg); /* Movido mais para a esquerda e rotacionado */
    opacity: 0.6; /* Aumentei a opacidade para dar pra ver melhor a arte */
}

.flyer-right {
    z-index: 1;
    transform: translateX(35%) scale(0.9) rotate(6deg); /* Movido mais para a direita e rotacionado */
    opacity: 0.6;
}

/* --- ESTADO HOVER GERAL --- */
.triad-case:hover {
    z-index: 10;
    /* Aplica a sombra neon no formato externo do case inteiro (Drop Shadow inteligente) */
    filter: drop-shadow(0 15px 30px rgba(11, 214, 251, 0.3));
}

.triad-case:hover .flyer {
    /* Remove a sombra individual para que não suje a imagem de baixo */
    box-shadow: none;
    border-color: var(--color-primary); /* Acende a borda de todos */
}

.triad-case:hover .flyer img {
    filter: grayscale(0%) brightness(1); /* Acende as cores */
}

/* --- LÓGICA DE EXPANSÃO E CONEXÃO (Seamless Panoramic) --- */
.triad-case:hover .flyer-center { 
    transform: scale(1.02); 
    z-index: 3; 
    border-radius: 0; 
    border-left-color: transparent; /* Remove borda interna */
    border-right-color: transparent; /* Remove borda interna */
}

.triad-case:hover .flyer-left { 
    transform: translateX(-100%) scale(1.02); 
    opacity: 1; 
    z-index: 2; 
    border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg); 
    border-right-color: transparent; /* Remove borda interna que encosta no centro */
}

.triad-case:hover .flyer-right { 
    transform: translateX(100%) scale(1.02); 
    opacity: 1; 
    z-index: 2; 
    border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0; 
    border-left-color: transparent; /* Remove borda interna que encosta no centro */
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    padding: var(--spacing-xl) 0 var(--spacing-lg) 0;
    background-color: #000;
}

.footer-legal {
    margin-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.legal-links {
    display: flex;
    gap: var(--spacing-md);
}

.legal-links a:hover {
    color: #fff;
}

/* ==========================================================================
   Animações de Entrada (Intersection Observer)
   ========================================================================== */
.fade-in-up {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animação Impacto 3D para o Marquee (Câmera caindo) */
.slash-in:not(.visible) .marquee-back-tape,
.slash-in:not(.visible) .marquee-front-tape {
    opacity: 0;
}

.slash-in.visible .marquee-back-tape {
    /* cubic-bezier com final > 1 gera o efeito "bounce" (quique) */
    animation: impact-back 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.slash-in.visible .marquee-front-tape {
    animation: impact-front 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    animation-delay: 0.1s; /* Frente afunda logo em seguida */
}

@keyframes impact-back {
    0% { transform: translateY(-50%) rotate(-10deg) scale(2.5); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateY(-50%) rotate(-4deg) scale(1); opacity: 1; }
}

@keyframes impact-front {
    0% { transform: translateY(-50%) rotate(10deg) scale(2.5); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translateY(-50%) rotate(4deg) scale(1); opacity: 1; }
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .nav-pill {
        padding: 10px 15px; /* Diminui os botões no tablet */
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .nav-group {
    display: flex;
    gap: 10px;
}
.floating-header-container > .nav-group:first-child {
    justify-content: flex-end;
}
.floating-header-container > .nav-group:last-child {
    justify-content: flex-start;
}
    
    .floating-header-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 10px 25px;
    gap: 50px;
}

    .social-proof-container,
    .author-container {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-banner-cta {
        bottom: 5%; /* Ajusta o botão no mobile */
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .pricing-card.recommended {
        transform: scale(1); /* Tira a escala no mobile para não cortar */
    }
    
    .grid-3, .grid-2 {
        grid-template-columns: 1fr;
    }
    
    .bonus-card {
        flex-direction: column;
        text-align: center;
    }
    
    .bonus-card img {
        width: 100%;
        height: 200px;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .credentials-list {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .section-title { font-size: 2rem; }
    .btn-large { padding: 0.8rem 1.5rem; font-size: 1rem; }
}

/* ==========================================================================
   SEO: SOBRE MIM
   ========================================================================== */
.triads-section {
    padding: var(--spacing-xxl) 0;
    position: relative;
    overflow: hidden;
    background-color: var(--bg-darker); /* Fundo base super escuro */
}

/* --- FUNDO DUPLO (BLOBS, SPOTLIGHT) --- */
.triads-bg {
    position: absolute;
    inset: 0;
    z-index: 0; isolation: isolate;
    pointer-events: none; /* Deixa os cliques passarem direto para as tríades */
    background-color: var(--bg-darker);
    
    /* MÁGICA DO FLASHLIGHT (BRUSH REVELADOR) */
    -webkit-mask-image: radial-gradient(circle at var(--mouse-x, -1000px) var(--mouse-y, -1000px), rgba(0,0,0,1) 0%, rgba(0,0,0,0.15) 500px);
    mask-image: radial-gradient(circle at var(--mouse-x, -1000px) var(--mouse-y, -1000px), rgba(0,0,0,1) 0%, rgba(0,0,0,0.15) 500px);
}

/* Degradês de borda para evitar corte seco no fundo */
.triads-bg::before,
.triads-bg::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 150px;
    z-index: 5; /* Acima das bolhas e chuva */
    pointer-events: none;
}
.triads-bg::before {
    top: 0;
    background: linear-gradient(to bottom, #000000 0%, transparent 100%);
}
.triads-bg::after {
    bottom: 0;
    background: linear-gradient(to top, #000000 0%, transparent 100%);
}

/* ==========================================================================
   Seção Físico vs Digital (X-Ray Scanner)
   ========================================================================== */
/* ==========================================================================
   Seção Físico vs Digital (X-Ray Scanner)
   ========================================================================== */
.physical-section {
    position: relative;
    padding: var(--spacing-xl) 0;
}

/* Embaçado (Blur) nas laterais da seção inteira */
.physical-section::before {
    display: none !important;
}

.physical-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin: var(--spacing-xl) auto 0; /* Centraliza a grade */
    max-width: 950px; /* Reduzido de 1200px para deixar as cartas menores */
    padding: 0 20px; /* Garante que nunca encoste nas bordas do celular */
}

/* Efeito de Reflexo na Água para o Título Base */
.text-reflection {
    transform: scaleY(-1);
    filter: blur(4px);
    opacity: 0.4;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
    pointer-events: none;
    user-select: none;
}

/* Camadas Extras de Glow Sincronizado (Original e Reflexo) */
.text-sweep, .text-reflection-sweep {
    /* Brilho geral, mas sem a sombra branca fixa aqui */
    filter: brightness(1.5);
    
    /* Expansão da caixa para evitar o corte seco do Glow (Text-Shadow vaza pra fora da div) */
    padding: 40px 0;
    margin: -40px 0;
    
    /* Máscara animada: uma faixa vertical que varre da esquerda para a direita */
    -webkit-mask-image: linear-gradient(110deg, transparent 20%, rgba(0,0,0,1) 50%, transparent 80%);
    mask-image: linear-gradient(110deg, transparent 20%, rgba(0,0,0,1) 50%, transparent 80%);
    
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    animation: sweepGlowAnim 4s infinite linear;
    pointer-events: none;
    user-select: none;
}

/* O Segredo: A sombra puxa a 'currentColor' que está definida na tag span do HTML (ciano ou branco) */
.text-sweep span, .text-reflection-sweep span {
    text-shadow: 0 0 15px currentColor, 0 0 30px currentColor;
}

/* O reflexo do Glow precisa obedecer a mesma lógica de espelho e desfoque da água */
.text-reflection-sweep {
    transform: scaleY(-1);
    opacity: 0.4;
    filter: blur(4px) brightness(1.5);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%), linear-gradient(110deg, transparent 20%, rgba(0,0,0,1) 50%, transparent 80%);
    -webkit-mask-composite: source-in; /* Mistura o desbotamento da água com o varrimento do glow */
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%), linear-gradient(110deg, transparent 20%, rgba(0,0,0,1) 50%, transparent 80%);
    mask-composite: intersect;
}

@keyframes sweepGlowAnim {
    0% { -webkit-mask-position: 200% 0; mask-position: 200% 0; }
    100% { -webkit-mask-position: -100% 0; mask-position: -100% 0; }
}

@media (max-width: 900px) {
    .physical-section {
        overflow: hidden; /* Corta o que vaza para fora da tela */
    }
    
    .digital-real-title {
        font-size: clamp(1.2rem, 5.4vw, 2.4rem) !important;
    }
    
    /* Remove a neblina lateral no celular */
    .physical-section::before {
    display: none !important;
}
    
    .physical-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto; /* Permite puxar com o dedo! */
        padding: 0;
        margin-top: var(--spacing-xl);
        gap: 20px;
        
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .physical-grid::-webkit-scrollbar {
        display: none;
    }

    .crossfade-card {
        flex: 0 0 70vw; /* Tamanho fixo da carta na tela */
    }
}

.crossfade-card {
    position: relative;
    width: 100%;
    aspect-ratio: 4/5;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background-color: transparent;
}

/* ==========================================================================
   Efeito 3D Curvo (Cilindro) na Vitrine de Camisas
   ========================================================================== */
@media (min-width: 901px) {
    .physical-grid {
        perspective: 1200px;
        transform-style: preserve-3d;
        gap: 15px; /* Reduzido o espaço para as cartas ficarem mais próximas e conectadas */
    }
    
    .crossfade-card {
        transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease;
    }
    
    /* Esconde as cópias duplicadas no PC, pois elas servem apenas para o loop infinito do celular */
    .crossfade-card.duplicate {
        display: none;
    }

    /* Coluna 1 (Esquerda: A "dobradiça" fica no lado direito, conectando com o meio) */
    .crossfade-card:nth-child(3n + 1) {
        transform-origin: right center;
        transform: rotateY(25deg);
    }
    
    /* Blur fixo nas bordas externas da Esquerda */
    .crossfade-card:nth-child(3n + 1)::after {
    display: none !important;
}
    
    /* Coluna 2 (Centro: Fica reto servindo de base para a curva) */
    .crossfade-card:nth-child(3n + 2) {
        transform: translateZ(-10px);
    }
    
    /* Coluna 3 (Direita: A "dobradiça" fica no lado esquerdo, conectando com o meio) */
    .crossfade-card:nth-child(3n + 3) {
        transform-origin: left center;
        transform: rotateY(-25deg);
    }
    
    /* Blur fixo nas bordas externas da Direita */
    .crossfade-card:nth-child(3n + 3)::after {
    display: none !important;
}

    /* Interatividade ao passar o mouse: a carta "pula" pra frente e fura o embaçado! */
    .crossfade-card:hover {
        transform: rotateY(0deg) translateZ(120px) scale(1.05);
        z-index: 10; /* Z-index 10 fura a barreira do ::before da section que é z-index 5 */
        box-shadow: 0 0 40px rgba(11,214,251,0.2); 
    }
    
    /* Remove o blur fixo da carta quando o mouse passa em cima */
    .crossfade-card:hover::after {
        opacity: 0;
    }
}

/* ==========================================================================
   Efeito Holográfico com Avatar Borrado (Upload do Usuário)
   ========================================================================== */
@keyframes avatarCirclePulse {
    0% { transform: translateX(-50%) scale(0.9); opacity: 0.5; }
    100% { transform: translateX(-50%) scale(1.1); opacity: 1; }
}

.avatar-glow-circle {
    position: absolute;
    bottom: 20%; 
    left: 50%;
    transform: translateX(-50%);
    width: 60vw;
    height: 60vw;
    max-width: 700px;
    max-height: 700px;
    background: radial-gradient(circle, rgba(0, 207, 255, 0.5) 0%, transparent 60%);
    border-radius: 50%;
    z-index: 2; /* Fica entre o grid e o avatar */
    pointer-events: none;
    animation: avatarCirclePulse 3s infinite alternate ease-in-out;
}

.hero-avatar-base {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 104%; /* Aumentado 15% (era 90%) */
    max-height: 1035px; /* Aumentado 15% (era 900px) */
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
    z-index: 3;
    
    /* Degradê empurrado para o final (98%) para não deixar o peito transparente e não vazar o fundo */
    -webkit-mask-image: linear-gradient(to bottom, black 98%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 98%, transparent 100%);
}

#hero-neon-sharp {
    z-index: 2; /* Base fixa, nítida, no fundo */
}

.hero-mouse-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    
    /* Brilho Azul (Ciano) restaurado para o fundo */
    background: radial-gradient(
        circle 150px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(11, 214, 251, 0.4), /* Ciano um pouco mais suave pra não brigar com o holograma */
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hero-banner:hover .hero-mouse-glow {
    opacity: 1;
}

@keyframes pulseNeonAvatar {
    0% { filter: drop-shadow(0 0 10px rgba(11,214,251,0.2)) brightness(1); }
    100% { filter: drop-shadow(0 0 30px rgba(11,214,251,0.6)) brightness(1.1); }
}

/* ==========================================================================
        /* ==========================================================================
   Responsividade (Mobile)
   ========================================================================== */

/* O arquivo Digital Puro (Sempre Fundo) */
.crossfade-physical {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Removed heavy filter: grayscale() animation to fix severe lag */
    will-change: opacity;
}

/* A Foto F�sica (Pisca por cima automaticamente) */
.crossfade-digital {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Para n�o cortar a camisa */
    transform: translateX(28%) scale(1.9);
    /* Removed filter: drop-shadow() to fix severe framerate drops on scroll/drag */
    animation: automaticCrossfade 4s infinite alternate ease-in-out;
    will-change: opacity;
}

@keyframes automaticCrossfade {
    0%, 20% { opacity: 1; }
    80%, 100% { opacity: 0; }
}  /* Quando a camisa tá visível, o fundo fica preto e branco */
    80%, 100% { filter: grayscale(0%); }  /* Quando a camisa some, a foto volta a ter cor total */
}

/* 1. Máscara de Textura (Matrix Rain) */
.bg-texture-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    
    /* Código do Uiverse (Corrigido para a paleta oficial) */
    --c: var(--color-primary); /* Chuva no Ciano Neon oficial do site */
    background-color: transparent; /* Deixa as auroras aparecerem no fundo */
    background-image: radial-gradient(4px 100px at 0px 235px, var(--c), #0000),
      radial-gradient(4px 100px at 300px 235px, var(--c), #0000),
      radial-gradient(1.5px 1.5px at 150px 117.5px, var(--c) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 252px, var(--c), #0000),
      radial-gradient(4px 100px at 300px 252px, var(--c), #0000),
      radial-gradient(1.5px 1.5px at 150px 126px, var(--c) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 150px, var(--c), #0000),
      radial-gradient(4px 100px at 300px 150px, var(--c), #0000),
      radial-gradient(1.5px 1.5px at 150px 75px, var(--c) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 253px, var(--c), #0000),
      radial-gradient(4px 100px at 300px 253px, var(--c), #0000),
      radial-gradient(1.5px 1.5px at 150px 126.5px, var(--c) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 204px, var(--c), #0000),
      radial-gradient(4px 100px at 300px 204px, var(--c), #0000),
      radial-gradient(1.5px 1.5px at 150px 102px, var(--c) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 134px, var(--c), #0000),
      radial-gradient(4px 100px at 300px 134px, var(--c), #0000),
      radial-gradient(1.5px 1.5px at 150px 67px, var(--c) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 179px, var(--c), #0000),
      radial-gradient(4px 100px at 300px 179px, var(--c), #0000),
      radial-gradient(1.5px 1.5px at 150px 89.5px, var(--c) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 299px, var(--c), #0000),
      radial-gradient(4px 100px at 300px 299px, var(--c), #0000),
      radial-gradient(1.5px 1.5px at 150px 149.5px, var(--c) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 215px, var(--c), #0000),
      radial-gradient(4px 100px at 300px 215px, var(--c), #0000),
      radial-gradient(1.5px 1.5px at 150px 107.5px, var(--c) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 281px, var(--c), #0000),
      radial-gradient(4px 100px at 300px 281px, var(--c), #0000),
      radial-gradient(1.5px 1.5px at 150px 140.5px, var(--c) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 158px, var(--c), #0000),
      radial-gradient(4px 100px at 300px 158px, var(--c), #0000),
      radial-gradient(1.5px 1.5px at 150px 79px, var(--c) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 210px, var(--c), #0000),
      radial-gradient(4px 100px at 300px 210px, var(--c), #0000),
      radial-gradient(1.5px 1.5px at 150px 105px, var(--c) 100%, #0000 150%);
    background-size:
      300px 235px, 300px 235px, 300px 235px,
      300px 252px, 300px 252px, 300px 252px,
      300px 150px, 300px 150px, 300px 150px,
      300px 253px, 300px 253px, 300px 253px,
      300px 204px, 300px 204px, 300px 204px,
      300px 134px, 300px 134px, 300px 134px,
      300px 179px, 300px 179px, 300px 179px,
      300px 299px, 300px 299px, 300px 299px,
      300px 215px, 300px 215px, 300px 215px,
      300px 281px, 300px 281px, 300px 281px,
      300px 158px, 300px 158px, 300px 158px,
      300px 210px, 300px 210px, 300px 210px;
    /* Removed animation: rainMatrix to fix severe GPU bottleneck */
}

.bg-texture-mask::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(
      circle at 50% 50%,
      transparent 0,
      transparent 2px,
      rgba(4, 8, 20, 0.85) 2px
    );
    background-size: 8px 8px;
}
    to {
      background-position:
        0px 6800px, 3px 6800px, 151.5px 6917.5px,
        25px 13632px, 28px 13632px, 176.5px 13758px,
        50px 5416px, 53px 5416px, 201.5px 5491px,
        75px 17175px, 78px 17175px, 226.5px 17301.5px,
        100px 5119px, 103px 5119px, 251.5px 5221px,
        125px 8428px, 128px 8428px, 276.5px 8495px,
        150px 9876px, 153px 9876px, 301.5px 9965.5px,
        175px 13391px, 178px 13391px, 326.5px 13540.5px,
        200px 14741px, 203px 14741px, 351.5px 14848.5px,
        225px 18770px, 228px 18770px, 376.5px 18910.5px,
        250px 5082px, 253px 5082px, 401.5px 5161px,
        275px 6375px, 278px 6375px, 426.5px 6480px;
    }
}

/* 2. Blobs de Energia (Azul/Ciano - Sem Roxo) */
.bg-blobs {
    position: absolute;
    inset: 0;
    /* Removed filter: blur(120px) to prevent severe GPU bottleneck */
    opacity: 0.2; 
}
.blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}
.blob-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--color-secondary) 0%, transparent 60%);
    animation: roamBlob1 25s infinite ease-in-out;
}
.blob-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--color-primary) 0%, transparent 60%);
    animation: roamBlob2 30s infinite ease-in-out;
}
.blob-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #001f3f 0%, transparent 60%);
    animation: roamBlob3 20s infinite ease-in-out;
}

/* Animações viajando por toda a tela (top/left) */
@keyframes roamBlob1 {
    0% { top: -10%; left: -10%; transform: scale(1); }
    33% { top: 40%; left: 70%; transform: scale(1.3); }
    66% { top: 90%; left: 10%; transform: scale(0.8); }
    100% { top: -10%; left: -10%; transform: scale(1); }
}
@keyframes roamBlob2 {
    0% { top: 80%; left: 80%; transform: scale(1); }
    33% { top: 10%; left: 50%; transform: scale(1.2); }
    66% { top: 60%; left: -10%; transform: scale(0.9); }
    100% { top: 80%; left: 80%; transform: scale(1); }
}
@keyframes roamBlob3 {
    0% { top: 50%; left: -20%; transform: scale(0.8); }
    33% { top: 80%; left: 80%; transform: scale(1); }
    66% { top: -10%; left: 80%; transform: scale(1.1); }
    100% { top: 50%; left: -20%; transform: scale(0.8); }
}

/* 3. Spotlight interativo */
.bg-spotlight {
    position: absolute;
    inset: 0;
    /* Usa variáveis CSS atualizadas pelo JS, com um fallback de 50% */
    background: radial-gradient(circle 500px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 212, 255, 0.08), transparent 80%);
    opacity: 0; /* Escondido por padrão */
    transition: opacity 0.5s ease;
}
.triads-section:hover .bg-spotlight {
    opacity: 1; /* Aparece suavemente quando o mouse entra na seção */
}

.triads-header {
    background: radial-gradient(circle at center, rgba(11, 214, 251, 0.03) 0%, transparent 70%);
}

.about-grid {
    display: flex;
    justify-content: center;
}

.about-glass-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    padding: var(--spacing-xl);
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    max-width: 1000px;
    width: 100%;
}

@media (min-width: 768px) {
    .about-glass-card {
        flex-direction: row;
        align-items: center;
        padding: var(--spacing-xxl);
    }
}

.about-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.about-title {
    margin-bottom: var(--spacing-sm);
}

.about-bio-text {
    color: var(--color-text-muted);
    line-height: 1.8;
    font-size: 1.1rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.about-credentials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.credential-badge {
    background: rgba(11, 214, 251, 0.1);
    color: var(--color-primary);
    border: 1px solid rgba(11, 214, 251, 0.2);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: 0 0 15px rgba(11, 214, 251, 0.1);
}

.about-image-wrapper {
    flex: 0 0 350px;
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
}

.about-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top; /* Foca no rosto se for o banner */
    display: block;
    aspect-ratio: 4/5;
    filter: contrast(1.1) saturate(1.1);
}

.about-glow {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 50px rgba(11, 214, 251, 0.2);
    pointer-events: none;
}

/* ==========================================================================
   Seção: Mockup Notebook
   ========================================================================== */
.notebook-section {
    position: relative;
    padding: 100px 0 250px 0;
    text-align: center;
    background: transparent; /* Removendo fundo pra mostrar a cyber-pattern */
    /* overflow: hidden removido para permitir que a textura suba para a seção anterior */
    z-index: 20;
    perspective: 1000px;
}

/* =========================================================
   CYBER PATTERN BACKGROUND (Fundo Animado)
   ========================================================= */
.cyber-pattern {
  position: absolute;
  top: 0; /* Resetado para 0, pois agora o wrapper engloba as duas seções corretamente */
  left: 0;
  width: 100%;
  height: 100%; /* Volta a ter 100% para cobrir apenas o wrapper */
  z-index: -1; /* Joga pro fundo da seção */
  background-color: #050505; /* Fond presque noir */

  /* C'est ici que la magie opère. On empile plusieurs couches : */
  background-image: 
    /* 0. Degradê vertical suave apenas no topo */
    linear-gradient(to bottom, #000000 0%, transparent 150px, transparent 100%),
    /* 1. La Vignette (Ombre sur les bords pour l'effet cinéma) */
    radial-gradient(circle at center, transparent 30%, #000 90%),
    /* 2. GRILLE PRINCIPALE (Cyan - Grande) - Lignes Verticales & Horizontales */
      linear-gradient(rgba(3, 233, 244, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3, 233, 244, 0.1) 1px, transparent 1px),
    /* 3. GRILLE SECONDAIRE (Magenta - Petite) - Lignes Verticales & Horizontales */
      linear-gradient(rgba(217, 3, 244, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 3, 244, 0.05) 1px, transparent 1px);

  /* On définit la taille des grilles */
  background-size:
    100% 100%, /* Fade vertical */
    100% 100%, /* Vignette */
    /* Grande grille Cyan (60px) */ 60px 60px,
    60px 60px,
    /* Petite grille Magenta (20px) */ 20px 20px,
    20px 20px;

    /* Removed heavy background-position animation to fix rendering lag */
}
  100% {
    background-position:
      0 0, /* Fade Vertical (não move) */
      0 0,
      /* Vignette */ 60px 60px,
      60px 60px,
      /* Grille Cyan bouge de 60px (1 carreau) */ 40px 40px,
      40px 40px; /* Grille Magenta bouge de 40px (plus vite/décalé) */
  }
}

.notebook-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px; /* Notebooks costumam ser largos */
    margin: var(--spacing-xl) auto 0;
    perspective: 1000px;
}

/* ==========================================================================
   PAINÉIS DE VIDRO INDIVIDUAIS
   ========================================================================== */
.glass-panel {
    background: rgba(10, 10, 15, 0.4);
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 0 20px rgba(0, 195, 255, 0.05);
    box-sizing: border-box; /* Garante que o padding não estoure a tela */
}



#clients-logos {
    position: absolute;
    top: 55%; 
    left: 50%;
    width: 100%; 
    max-width: 1200px;
    transform: translate(-50%, -30%) scale(0.8);
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-delay: 0.15s;
    z-index: 100;
}

#clients-logos.visible {
    opacity: 1;
    /* Pula 60px para FORA da tela (mais alto que o título) */
    transform: translate(-50%, -50%) scale(1.15) translateZ(60px); 
    animation: floatAndGlow 5s ease-in-out infinite alternate;
    animation-delay: 0.95s; /* 0.15s + 0.8s = 0.95s */
}

/* Placa de vidro estética que fica APENAS atrás das logos */
.logos-glass-bg {
    position: absolute;
    bottom: 5%; /* Alinhado ao fundo da imagem grande */
    left: 10%;
    width: 80%;
    height: 40%; /* Cobre apenas os 40% inferiores da tela onde estão as logos */
    background: rgba(10, 10, 15, 0.4);
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 0 20px rgba(0, 195, 255, 0.05);
    z-index: 1;
}

/* O SEGREDO MÁGICO: A máscara de laser nas Logos */
.logos-shimmer-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background: linear-gradient(
        120deg,
        transparent 0%, 
        transparent 40%, 
        var(--color-primary) 50%, 
        transparent 60%, 
        transparent 100%
    );
    background-size: 200% auto;
    
    -webkit-mask-image: url('assets/logos clientes/LOGOS.png');
    mask-image: url('assets/logos clientes/LOGOS.png');
    
    /* Restaurado para cobrir a imagem inteira naturalmente */
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    
    mix-blend-mode: color-dodge;
    
    animation: shineSweep 3s linear infinite;
    pointer-events: none;
    z-index: 3;
}

/* Animação Contínua para as Logos (Flutuação Holográfica + Pulsação Neon) */
@keyframes floatAndGlow {
    0% {
        transform: translate(-50%, -50%) scale(1.15) translateZ(60px);
        filter: drop-shadow(0 0 5px rgba(0, 195, 255, 0.2));
    }
    100% {
        transform: translate(-50%, -54%) scale(1.18) translateZ(80px);
        filter: drop-shadow(0 0 40px rgba(0, 195, 255, 0.9));
    }
}

.clients-text {
    position: relative;
    white-space: nowrap;
    text-align: center;
}

.clients-text-badbrush {
    font-family: 'Badbrush', cursive;
    font-weight: normal;
    /* Tamanho responsivo: máximo 4rem, mas diminui se a tela for menor */
    font-size: clamp(2rem, 5vw, 4rem);
    
    /* TRUQUE VITAL: Fontes cursivas costumam ter pernas e topos longos. 
       O background-clip corta tudo que sai da "caixa" invisível do texto. 
       O padding e line-height forçam essa caixa a ser maior, salvando os cortes! */
    padding: 20px 40px; 
    line-height: 1.5;

    /* O SEGREDO DO BRILHO PASSANDO */
    background: linear-gradient(
        120deg,
        #ffffff 0%, 
        #ffffff 40%, 
        var(--color-primary) 50%, /* O brilho Azul Cyan */
        #ffffff 60%, 
        #ffffff 100%
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    
    /* Para sombras com text transparente, usamos filter drop-shadow */
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.9));
    
    /* A animação infinita do brilho */
    animation: shineSweep 3s linear infinite;
}

@keyframes shineSweep {
    to {
        background-position: 200% center;
    }
}

.notebook-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 60%;
    background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
    opacity: 0.15;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

/* ==========================================================================
   CSS 3D MACBOOK NATIVO (FOTOREALISTA 3D SÓLIDO)
   ========================================================================== */
.macbook-3d-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 1.45; 
    transform-style: preserve-3d;
    transform: rotateX(60deg) rotateY(0deg) rotateZ(-30deg) translateY(50px);
    will-change: transform;
}

/* Base do Macbook (Sólido) */
.macbook-base {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-style: preserve-3d;
    z-index: 1;
}

.base-face {
    position: absolute;
    background: #111213; /* Space Black aluminum edge */
}

.base-top {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #222326 0%, #111214 100%); /* Space Black face */
    border-radius: 12px;
    transform: translateZ(12px); 
    box-shadow: inset 0 0 10px rgba(255,255,255,0.03);
}

.base-bottom {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #080808;
    border-radius: 12px;
    transform: rotateX(180deg);
    box-shadow: 0 30px 50px rgba(0,0,0,0.8);
}

/* Bordas da Base (12px de espessura) */
.base-front {
    width: 100%;
    height: 12px;
    bottom: 0;
    transform-origin: bottom;
    transform: rotateX(-90deg);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: linear-gradient(90deg, #0a0a0b, #1a1b1d, #0a0a0b);
}

.base-back {
    width: 100%;
    height: 12px;
    top: 0;
    transform-origin: top;
    transform: rotateX(90deg);
}

.base-left {
    width: 12px;
    height: 100%;
    left: 0;
    transform-origin: left;
    transform: rotateY(-90deg);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    background: linear-gradient(0deg, #0a0a0b, #111213, #0a0a0b);
}

.base-right {
    width: 12px;
    height: 100%;
    right: 0;
    transform-origin: right;
    transform: rotateY(90deg);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    background: linear-gradient(0deg, #0a0a0b, #111213, #0a0a0b);
}

/* Sombra Holográfica projetada no teclado */
.hologram-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%; 
    height: 60%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 70%);
    opacity: 0;
    transition: opacity 1.5s ease;
    transition-delay: 0.8s; /* Espera a tela abrir e as logos pularem */
    z-index: 10; /* Fica acima das teclas */
    pointer-events: none;
}
.hologram-shadow.visible {
    opacity: 1;
}

/* Teclado M5 Space Black */
.macbook-keyboard {
    position: absolute;
    top: 10%;
    left: 6%;
    width: 88%;
    height: 52%;
    background: #030303; /* Fundo do teclado M5 (Muito profundo) */
    border-radius: 8px;
    /* Sombras internas bem fortes pra afundar a base do teclado */
    box-shadow: inset 0 5px 15px rgba(0,0,0,1), inset 0 0 8px rgba(0,0,0,1);
    display: flex;
    flex-direction: column;
    padding: 1.5%;
    gap: 2%;
    box-sizing: border-box;
    z-index: 2;
}

.kb-row {
    display: flex;
    flex: 1;
    gap: 1.5%;
}

.kb-key {
    background: linear-gradient(180deg, #1c1c1c 0%, #111 100%); /* Degrade sutil na tecla */
    border-radius: 4px;
    border: 1px solid #000; 
    border-top: 1px solid #2a2a2a; /* Luz refletindo no topo da tecla (Gera o 3D) */
    border-bottom: 4px solid #000; /* Parede inferior da tecla, simulando a altura/relevo */
    /* Sombra pesada projetada na base afundada */
    box-shadow: 0 4px 6px rgba(0,0,0,1), 0 1px 2px rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255,255,255,0.85); /* Letras retroiluminadas */
    font-size: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 500;
    text-shadow: 0 0 4px rgba(255,255,255,0.6); 
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

/* Efeito de aumento de luz ao passar o mouse */
.kb-key:hover {
    color: rgba(255, 255, 255, 1);
    text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 15px rgba(255, 255, 255, 0.8);
    background: linear-gradient(180deg, #252525 0%, #1a1a1a 100%); /* O plástico da tecla também reflete levemente a luz */
}

/* Coluna especial pras setas (Cima/Baixo) */
.kb-key-col {
    display: flex;
    flex-direction: column;
    gap: 5%;
    background: transparent;
    border: none;
    box-shadow: none;
}

.kb-half {
    flex: 1;
    font-size: 6px;
    border-radius: 3px;
    /* Metades também precisam do mesmo relevo para não parecerem planas */
    background: linear-gradient(180deg, #1c1c1c 0%, #111 100%);
    border: 1px solid #000;
    border-top: 1px solid #2a2a2a;
    border-bottom: 2px solid #000; /* Relevo menor por causa do tamanho da tecla */
    box-shadow: 0 2px 4px rgba(0,0,0,1);
}

/* Trackpad Gigante do M5 */
.macbook-trackpad {
    position: absolute;
    bottom: 4%;
    left: 50%;
    transform: translateX(-50%);
    width: 45%;
    height: 32%;
    background: rgba(255,255,255,0.02); /* Leve brilho no Space Black */
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.8);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

/* Tampa do Macbook (Sólido) */
.macbook-lid {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: top center; 
    transform: translateZ(12px) rotateX(0deg); 
    transform-style: preserve-3d;
    will-change: transform;
    z-index: 2;
}

/* Faces e Bordas da Tampa (6px de espessura) */
.lid-face {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backface-visibility: hidden;
    border-radius: 12px; 
}

.lid-back {
    transform: translateZ(6px); 
    background: linear-gradient(135deg, #222326 0%, #111214 100%); /* Space Black externo */
    border: 1px solid #000;
}

.lid-front {
    transform: rotateX(180deg) translateZ(0px);
    background: #050505; /* Moldura preta do M5 */
    border: 2px solid #111;
    transform-style: preserve-3d; /* NECESSÁRIO PARA PROJEÇÃO 3D */
}

.lid-edge {
    position: absolute;
    background: #0a0a0b;
}

.lid-top-edge {
    width: 100%;
    height: 6px;
    top: 0;
    transform-origin: top;
    transform: rotateX(90deg);
}

.lid-left-edge {
    width: 6px;
    height: 100%;
    left: 0;
    transform-origin: left;
    transform: rotateY(-90deg);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.lid-right-edge {
    width: 6px;
    height: 100%;
    right: 0;
    transform-origin: right;
    transform: rotateY(90deg);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Logo da Apple em CSS nas costas da tampa */
.apple-logo-css {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
    color: #050505; /* Logo Space Black Glossy */
    text-shadow: 0 1px 1px rgba(255,255,255,0.05);
}

/* Notch e Câmera Frontal do M5 */
.macbook-notch-screen {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16%;
    height: 5%;
    background: #050505;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    z-index: 10;
}

.macbook-camera {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: #000;
    border-radius: 50%;
    border: 1px solid #111;
    box-shadow: inset 0 0 2px rgba(255,255,255,0.1);
}

/* Tela Infinita do M5 (Bordas ultra finas) */
.macbook-screen {
    position: absolute;
    top: 3%; /* Borda super fina */
    left: 2%;
    right: 2%;
    bottom: 6%; /* Espaço em baixo pro logo */
    background: #080808;
    border-radius: 8px;
    /* OVERFLOW HIDDEN REMOVIDO PARA PERMITIR PROJEÇÃO 3D */
    box-shadow: inset 0 0 10px rgba(0,0,0,1);
    transform-style: preserve-3d;
}



.macbook-screen .mac-wallpaper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px; /* Arredondamento movido para cá */
    /* Agora o vidro é semi-transparente com BLUR pesado para embaçar o robô */
    background: 
        /* 1. Vidro Canelado (Linhas uniformes em preto/transparente) */
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.95) 0px,
            rgba(0, 0, 0, 0.4) 2px,
            rgba(0, 0, 0, 0.1) 4px,
            rgba(0, 0, 0, 0.4) 6px,
            rgba(0, 0, 0, 0.95) 8px
        ) center / 100% 100% no-repeat,
        
        /* 2. Luz Primária Desfocada (Passando atrás do vidro, por cima do robô) */
        radial-gradient(circle at center, rgba(11, 214, 251, 0.45) 0%, rgba(11, 214, 251, 0.1) 30%, transparent 60%) 0% 0% / 150% 150% no-repeat,
        
        /* 3. Escurecimento das bordas (Vignette) para forçar o aspecto de silhueta no robô */
        radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.9) 100%) center / 100% 100% no-repeat;
        
    z-index: 1;
    /* O SEGREDO: O vidro embacado usando processamento nativo do navegador */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    animation: scanLight 8s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

/* Animação da luz passeando atrás do vidro */
@keyframes scanLight {
    0% {
        background-position: 
            center, /* Vidro parado */
            0% 30%, /* Luz no topo esquerdo */
            center; /* Fundo parado */
    }
    100% {
        background-position: 
            center,
            100% 80%, /* Luz desce para a direita */
            center;
    }
}

/* Logo "MacBook Pro" na borda inferior da tela */
.macbook-logo {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    color: #444;
    font-size: 10px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    /* ==========================================================================
       MODELO EXCLUSIVO MOBILE - HERO SECTION 
       (Não afeta a versão Desktop!)
       ========================================================================== */
       
    .hero-banner {
        height: 100svh; /* Ocupa 100% da tela para não deixar barra preta embaixo */
        min-height: 550px;
    }
       
    /* 1. Ajuste do Avatar no Mobile */
    .hero-avatar-base {
        height: 92%; /* Aumentado 15% (era 80%) */
        width: auto; 
        max-width: none; 
        bottom: 0;
    }

    /* 2. Reduz a altura do degradê preto no celular para não engolir metade da foto */
    .hero-banner::after {
        height: 150px; 
    }

    /* 3. Ajuste do Efeito da Mão Mágica no Mobile */
    .hero-magic-wrapper {
        min-width: 180px; /* Tira o limite de 300px que deixava a magia gigante */
        width: 70%;
        bottom: 5%; /* Sobe um pouco pra encaixar na mão do avatar */
    }

    /* O scroll-track agora funciona no mobile perfeitamente com 2 fases */

    /* 5. Ajuste fino dos vídeos para caberem 3 por vez na tela do celular */
    .motion-portfolio {
        min-height: 60vh; /* Seção mais compacta, ideal para vídeos menores */
    }
    
    .motion-carousel-wrapper {
        height: auto; /* Deixa o wrapper se adaptar ao tamanho dos vídeos */
        padding: 5% 0; /* Dá um respiro em cima e embaixo */
    }

    .motion-item {
        height: auto;
        width: 40vw; /* Ajustado para 40vw a pedido do usuário */
    }
    
    .motion-item video::-webkit-media-controls {
        display: none !important;
    }
    
    .motion-item video::-webkit-media-controls-start-playback-button {
        display: none !important;
        -webkit-appearance: none;
    }
    
    /* 6. Nova Lógica Híbrida para Motions (Arrastar + AutoScroll) */
    .motion-track {
        width: 100%; /* Resolvendo problema de vazar pra direita (antes era 100vw) */
        animation: none !important; /* Desliga o loop CSS engessado */
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-left: 20px; /* Dá um espacinho no início */
    }
    .motion-track::-webkit-scrollbar {
        display: none;
    }

    /* 7. Remove a neblina lateral no celular */
    .motion-carousel-wrapper::before,
    .motion-carousel-wrapper::after {
        display: none; 
    }

    /* 7. Reduz as Tríades no celular para que, ao abrirem, caibam inteiras na tela sem cortar as bordas */
    .triad-case {
        width: 30vw; /* Fechada ocupa 30% da tela. Aberta (x3) ocupará 90%, cabendo perfeitamente */
        min-width: unset; /* Remove o limite de 240px que forçava a arte a ser maior que a tela */
        max-width: unset;
    }

    /* ========================================================================== */

    /* Macbook 3D agora é escalonado via JavaScript no celular */
}

/* ==========================================================================
   Seção Flyers / Cards (Fan Carousel)
   ========================================================================== */
.flyers-section {
    position: relative;
    padding: var(--spacing-xl) 0;
    overflow: hidden;
    background-color: transparent;
    z-index: 10;
}

.fan-carousel-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 1rem 0;
    position: relative;
    z-index: 20;
}

.fan-layout {
    cursor: grab;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 80rem;
    height: 450px;
}

/* Base style for the cards, maintaining Option C (uniform size) */
.fan-card {
    display: block;
    cursor: pointer;
    position: absolute;
    height: 355px; /* Altura fixa para todos */
    width: auto; /* Largura se adapta à imagem */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    background-color: transparent; /* Removemos o preto sólido para não ter bordas laterais */
    will-change: transform, opacity;
}

/* Opcional: Efeito hover premium (bordas) */
.fan-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    pointer-events: none;
    z-index: 20;
}

.fan-card img {
    height: 100% !important;
    width: auto !important; /* A largura obedece à proporção real da imagem */
    object-fit: cover !important; /* Cobre o container certinho, já que o container se adapta à imagem */
    position: relative; /* Mantém a imagem no fluxo para dar largura ao .fan-card */
    display: block;
    z-index: 10;
    pointer-events: none;
}

/* Fundo da carta (preto sólido ao invés de borrado para evitar confusão visual) */
.fan-card-bg {
    display: none; /* Não precisamos mais de fundo, a imagem dita o tamanho! */
}

/* Controles de Paginação */
.fan-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    z-index: 30;
}

.fan-nav-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    z-index: 30;
    outline: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
}

.fan-nav-btn:hover {
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.8);
}

.fan-nav-btn:active {
    opacity: 0.7;
}

.fan-nav-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    position: relative;
    z-index: 2;
}

.fan-dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fan-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    transition: all 0.3s ease;
}

.fan-dot.active {
    background: rgba(255,255,255,0.8);
    transform: scale(1.3);
}

@media (min-width: 768px) {
    .fan-layout {
    cursor: grab;
        height: 600px;
    }
    .fan-card {
        width: auto;
        height: 462px;
    }
    .fan-nav-btn {
          width: 3.5rem;
        height: 3.5rem;
    }
}



/* ==========================================================================
   EFEITOS VISUAIS RESTAURADOS (Shaderlines, Glows, Faixas)
   ========================================================================== */

/* MOTIONS DESIGNS Hover Glow */
.motion-section-title.cinematic-title {
    transition: text-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    cursor: pointer;
}
.motion-section-title.cinematic-title:hover {
    text-shadow: 0 0 30px rgba(11, 214, 251, 1), 0 0 60px rgba(11, 214, 251, 0.8), 0 0 90px rgba(11, 214, 251, 0.6);
    transform: scale(1.02);
}

/* Faixa de luz da fase 2 do bg */
.phase2-content {
    position: relative;
}
.phase2-content::before { display: none; }

/* ==========================================================================
   FASE 2 TYPOGRAPHY (PORTFÓLIO INTRO)
   ========================================================================== */
.phase2-typography-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.typography-wrapper {
    position: relative;
    display: inline-block;
    text-align: center;
}

.typo-front {
    font-family: 'Badbrush', cursive;
    color: #ffffff;
    font-size: clamp(2.5rem, 5vw, 4.5rem); /* Aumentado para equilibrar com o fundo */
    position: absolute;
    top: -48px; /* Subiu mais ~5% visualmente */
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    white-space: nowrap;
    z-index: 2;
    /* Sombra leve embaixo para imersão e profundidade */
    text-shadow: 0px 10px 20px rgba(0, 0, 0, 0.8), 0px 4px 5px rgba(0, 0, 0, 0.4);
    font-weight: normal;
    letter-spacing: 2px;
}

.typo-back {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--color-primary);
    font-size: clamp(3rem, 6.5vw, 6rem); /* Ligeiramente ajustado para casar com a frente */
    line-height: 1;
    letter-spacing: -3px;
    white-space: nowrap;
    z-index: 1;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(11, 214, 251, 0.4);
}

@media (max-width: 768px) {
    .typo-front {
        top: -30px; /* Subiu no mobile também */
    }
}

.glass-rectangle {
    padding: 80px 60px 40px 60px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.45); /* Base mais escura (fumê) */
    
    /* Múltiplos fundos: Relevo do vidro canelado + Reflexo diagonal do vidro */
    background-image: 
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.5) 0px,           /* Vinco profundo (sombra) */
            rgba(255, 255, 255, 0.0) 2px,     /* Subida da curva */
            rgba(255, 255, 255, 0.1) 6px,     /* Pico do relevo (brilho sutil) */
            rgba(255, 255, 255, 0.0) 10px,    /* Descida da curva */
            rgba(0, 0, 0, 0.5) 12px           /* Próximo vinco */
        ),
        linear-gradient(
            135deg, 
            rgba(255, 255, 255, 0.15) 0%, 
            rgba(255, 255, 255, 0) 25%, 
            rgba(255, 255, 255, 0) 75%, 
            rgba(11, 214, 251, 0.1) 100% /* Reflexo ciano na ponta */
        );
        
    /* Blur reduzido para que o feixe de luz "passe" pelo vidro distorcido */
    backdrop-filter: blur(6px) saturate(130%);
    -webkit-backdrop-filter: blur(6px) saturate(130%);
    
    /* Bordas simulando a espessura 3D do vidro */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    
    /* Sombras para profundidade física */
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.8), /* Sombra projetada pesada */
        inset 0 1px 1px rgba(255, 255, 255, 0.3), /* Brilho interno no topo */
        inset 0 -1px 2px rgba(0, 0, 0, 0.6); /* Sombra interna na base */
}

@media (max-width: 768px) {
    .glass-rectangle {
        padding: 60px 30px 30px 30px;
        border-radius: 15px;
    }
}

/* ==========================================================================
   RAINBOW BUTTON (PORTFÓLIO)
   ========================================================================== */
@keyframes rainbow-btn-anim {
  0% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.rainbow-btn {
  position: relative;
  display: inline-flex;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  border: 1.5px solid transparent;
  padding: 0 2.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  
  /* O truque do tailwind para borda com gradiente animado */
  background-clip: padding-box, border-box, border-box;
  background-origin: border-box;
  background-image: 
    linear-gradient(#121213, #121213),
    linear-gradient(#121213 50%, rgba(18,18,19,0.6) 80%, rgba(18,18,19,0)),
    linear-gradient(90deg, #0bd6fb, #0050ff, #add9ff, #0050ff, #0bd6fb);
  background-size: 200% 100%;
  animation: rainbow-btn-anim 2s linear infinite;
  
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.rainbow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(11, 214, 251, 0.4);
}

.rainbow-btn::before {
  content: "";
  position: absolute;
  bottom: -20%;
  left: 50%;
  z-index: -1;
  height: 20%;
  width: 60%;
  transform: translateX(-50%);
  background-image: linear-gradient(90deg, #0bd6fb, #0050ff, #8a2be2, #0050ff, #0bd6fb);
  background-size: 200% 100%;
  filter: blur(12px);
  animation: rainbow-btn-anim 2s linear infinite;
}

.reference-main {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ==========================================================================
   BREATHING TEXT WEIGHT ANIMATION
   ========================================================================== */
@keyframes breath {
    0% {
        font-variation-settings: "wght" 100;
    }
    100% {
        font-variation-settings: "wght" 840;
    }
}

.animated-text {
    font-feature-settings: '"wght"';
}

.breath-char {
    display: inline-block;
    animation: breath 1.5s alternate cubic-bezier(0.37, 0, 0.63, 1) infinite;
    animation-fill-mode: both;
}

/* ==========================================================================
   ACETERNITY SCROLL TITLE & BADGE
   ========================================================================== */
.macbook-aceternity-header {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    z-index: 100;
    width: max-content;
    pointer-events: none;
}

.macbook-aceternity-title {
    font-size: clamp(1.5rem, 4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    text-align: left;
    white-space: nowrap;
    text-shadow: 0 5px 15px rgba(0,0,0,0.8);
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.02em;
}

.macbook-aceternity-badge {
    display: block;
    width: 45px;
    height: 45px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
}

.macbook-aceternity-badge svg {
    width: 100%;
    height: 100%;
}

.macbook-aceternity-badge:hover {
    transform: scale(1.15) rotate(-15deg);
}

/* =========================================================
   SCROLL ANIMATION 3D (ACETERNITY CLONE)
   ========================================================= */
.scroll-animation-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0;
    overflow: hidden;
    background-color: var(--color-bg-base); /* Fundo base para integrar */
}

@media (min-width: 768px) {
    .scroll-animation-container {
        height: 100vh;
        padding: 0;
    }
}

.scroll-animation-perspective {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    perspective: 1000px;
}

@media (min-width: 768px) {
    .scroll-animation-perspective {
    position: relative;
    z-index: 10;
        padding: 0;
    }
}

.scroll-animation-header {
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 95%;
    max-width: 1200px;
    text-align: center;
    z-index: 30;
    pointer-events: none;
    will-change: transform, opacity;
}

/* =========================================================
   SOBRE MIM CUSTOM TITLE
   ========================================================= */
@font-face {
    font-family: 'Bad Brush';
    src: url('assets/fonts/Badbrush.ttf') format('truetype');
}

.sobre-mim-custom-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    margin: 0;
    pointer-events: none;
    user-select: none;
    transform: translateY(0); /* Zerado porque a foto desceu */
}

.smt-small {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: #ffffff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 2;
}

.smt-large {
    font-family: 'Bad Brush', sans-serif;
    font-size: 5.5rem;
    color: #00d2ff;
    margin-top: -1.2rem;
    text-transform: uppercase;
    z-index: 1;
    transform: translateZ(0); /* Hardware acceleration to fix lag */
    will-change: transform;
}

@media (max-width: 768px) {
    .sobre-mim-custom-title { transform: translateY(-2vh); }
    .smt-small { font-size: 1.2rem; }
    .smt-large { font-size: 3.8rem; margin-top: -0.8rem; transform: translateZ(0); }
}



/* old scroll-animation-end-text removed */

.text-loop-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
}

@media (min-width: 768px) {
    .text-loop-container {
        font-size: 4.5rem;
    }
}

.text-loop-static {
    margin-right: 0.75rem;
    white-space: nowrap;
}

.text-loop-dynamic-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-right: 4px;
}

.text-loop-dynamic {
    position: relative;
    white-space: nowrap;
    background: linear-gradient(to right, #a78bfa, #5b21b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    padding-right: 0.25rem;
}

.text-loop-cursor {
    width: 3px;
    height: 1em;
    background-color: #8b5cf6;
    animation: blinkCursor 0.8s infinite alternate;
    margin-left: 2px;
}

@media (min-width: 768px) {
    .text-loop-cursor {
        width: 4px;
    }
}

@keyframes blinkCursor {
    0% { opacity: 1; }
    100% { opacity: 0.2; }
}

.sobre-mim-paragraphs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 3rem 5.5rem 3rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.sobre-mim-paragraphs p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    line-height: 1.7;
    color: #f1f1f1; text-shadow: 0 2px 5px rgba(0,0,0,0.9), 0 4px 15px rgba(0,0,0,0.8);
    text-shadow: 0 4px 15px rgba(0,0,0,0.5);
    text-align: center;
    letter-spacing: 0.5px;
    font-weight: 300;
}

@media (min-width: 768px) {
    .sobre-mim-paragraphs p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    line-height: 1.7;
    color: #f1f1f1; text-shadow: 0 2px 5px rgba(0,0,0,0.9), 0 4px 15px rgba(0,0,0,0.8);
    text-shadow: 0 4px 15px rgba(0,0,0,0.5);
    text-align: center;
    letter-spacing: 0.5px;
    font-weight: 300;
}
}



/* =========================================================
   TOOLS DOCK
   ========================================================= */
.tools-dock {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    width: 100%;
    pointer-events: auto;
}

.dock-container {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transition: all 0.5s ease-out;
}

.dock-container:has(.dock-item:hover) {
    transform: scale(1.05);
}

.dock-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;

    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease-out;
    cursor: pointer;
    box-shadow: none;
}

.dock-item:hover {
    transform: scale(1.1) translateY(-0.25rem);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 24px 0 rgba(255, 255, 255, 0.08);
    z-index: 2;
}

.dock-item .dock-icon {
    width: 1.5rem;
    height: 1.5rem;
    transition: all 0.3s ease-out;
    color: white;
}

.dock-item:hover .dock-icon {
    transform: scale(1.05);
    filter: drop-shadow(0 1px 4px rgba(255, 255, 255, 0.10));
}

.dock-tooltip {
    position: absolute;
    top: -2.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(0.25rem);
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 0.75rem;
    font-weight: 300;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dock-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) rotate(45deg) translateY(-2px);
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dock-item:hover .dock-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Reflection wrapper */
.reflection-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 4rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.reflection-container {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    opacity: 0.35;
    transform: scaleY(-1);
    transition: all 0.5s ease-out;
    filter: blur(2.5px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, transparent 90%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, transparent 90%);
}

.tools-dock:has(.dock-item:hover) .reflection-container {
    transform: scale(1.05) scaleY(-1.05);
}

.reflection-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;

    transition: all 0.3s ease-out;
}

.reflection-item .dock-icon {
    opacity: 0.5;
    width: 1.5rem;
    height: 1.5rem;
}

.tools-dock:has(.dock-item:hover) .reflection-item {
    transform: scale(1);
}



/* Faz o fundo tech ficar semi-transparente na seção Sobre Mim para mesclar com a Água */
.scroll-animation-container .dg-radial-base { background: radial-gradient(100% 100% at 0% 0%, rgb(46, 46, 46) 0%, rgb(0, 0, 0) 100%) !important; }
.scroll-animation-container .dark-gradient-bg {
    pointer-events: none;
    background-color: transparent !important;
}




















/* =========================================================
    .sobre-mim-paragraphs p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    line-height: 1.7;
    color: #f1f1f1; text-shadow: 0 2px 5px rgba(0,0,0,0.9), 0 4px 15px rgba(0,0,0,0.8);
    text-shadow: 0 4px 15px rgba(0,0,0,0.5);
    text-align: center;
    letter-spacing: 0.5px;
    font-weight: 300;
}
}



/* =========================================================
   TOOLS DOCK
   ========================================================= */
.tools-dock {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    width: 100%;
    pointer-events: auto;
}

.dock-container {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transition: all 0.5s ease-out;
}

.dock-container:has(.dock-item:hover) {
    transform: scale(1.05);
}

.dock-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;

    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease-out;
    cursor: pointer;
    box-shadow: none;
}

.dock-item:hover {
    transform: scale(1.1) translateY(-0.25rem);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 24px 0 rgba(255, 255, 255, 0.08);
    z-index: 2;
}

.dock-item .dock-icon {
    width: 1.5rem;
    height: 1.5rem;
    transition: all 0.3s ease-out;
    color: white;
}

.dock-item:hover .dock-icon {
    transform: scale(1.05);
    filter: drop-shadow(0 1px 4px rgba(255, 255, 255, 0.10));
}

.dock-tooltip {
    position: absolute;
    top: -2.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(0.25rem);
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    color: white;
    font-size: 0.75rem;
    font-weight: 300;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.dock-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) rotate(45deg) translateY(-2px);
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dock-item:hover .dock-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Reflection wrapper */
.reflection-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 4rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.reflection-container {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    opacity: 0.35;
    transform: scaleY(-1);
    transition: all 0.5s ease-out;
    filter: blur(2.5px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, transparent 90%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, transparent 90%);
}

.tools-dock:has(.dock-item:hover) .reflection-container {
    transform: scale(1.05) scaleY(-1.05);
}

.reflection-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;

    transition: all 0.3s ease-out;
}

.reflection-item .dock-icon {
    opacity: 0.5;
    width: 1.5rem;
    height: 1.5rem;
}

.tools-dock:has(.dock-item:hover) .reflection-item {
    transform: scale(1);
}



/* Faz o fundo tech ficar semi-transparente na seção Sobre Mim para mesclar com a Água */
.scroll-animation-container .dg-radial-base { background: radial-gradient(100% 100% at 0% 0%, rgb(46, 46, 46) 0%, rgb(0, 0, 0) 100%) !important; }
.scroll-animation-container .dark-gradient-bg {
    pointer-events: none;
    background-color: transparent !important;
}




















/* =========================================================
   3D FLIP CARD SCENE
   ========================================================= */
.about-flip-scene {
    position: absolute;
    top: calc(50% + 55px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(95vw, 621px, 62vh);
    aspect-ratio: 4 / 5;
    perspective: 2000px;
    z-index: 10;
}

.about-flip-card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.about-flip-front,
.about-flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 8px; /* Bordas arredondadas da foto e do papel */
}

/* FRENTE: A FOTO */
.about-flip-front {
    z-index: 2;
}


/* VERSO: O PAPEL */
.about-flip-back {
    transform: rotateY(180deg);
    /* RECRIANDO O PAPEL COM CSS PURO PARA O VERSO DA FOTO */
    background-color: #0a0a0a;
    box-shadow: inset 10px 0 20px rgba(0,0,0,0.05);
    container-type: inline-size;
}

/* Notebook lines removed per user request */

/* O container original de papel agora apenas preenche o verso e não tem fundo próprio */
.paper-container {
    width: 100%;
    height: 100%;
    margin: 0;
    position: relative;
}

/* old scroll-animation-end-text removed */

.paper-text-content {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    left: 10cqi;
    right: 10cqi;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #f1f1f1; text-shadow: 0 2px 5px rgba(0,0,0,0.9), 0 4px 15px rgba(0,0,0,0.8);
    font-size: 2.6cqi;
    line-height: 1.5;
    text-align: left;
    opacity: 0.95;
}



/* 
 * 🔧 AJUSTE FINO DE ALINHAMENTO DAS LINHAS 🔧
 * Se o texto sobe em relação à linha (flutuando pra cima), AUMENTE esse valor.
 * Se o texto desce (caindo da linha), DIMINUA esse valor.
 */
:root {
    --line-height-tune: 4.10cqi; /* Aumentado de 3.907 para 4.10 para empurrar o texto para baixo */
}





/* Zerando os empurrões individuais, pois a variável raiz deve dar conta de tudo agora */



@media (max-width: 768px) {
    .scroll-animation-perspective {
    position: relative;
    z-index: 10;
        overflow-x: hidden;
    }
    
    .paper-container {
        /* Zoom visual sem rotacao para nao entortar o texto */
        transform: scale(1.1) !important;
    }
    
    .paper-text-content {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    left: 10cqi;
    right: 10cqi;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #f1f1f1; text-shadow: 0 2px 5px rgba(0,0,0,0.9), 0 4px 15px rgba(0,0,0,0.8);
    font-size: 2.6cqi;
    line-height: 1.5;
    text-align: left;
    opacity: 0.95;
}
    
    
    

    
}


.water-ripple-canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
}


.scroll-animation-end-text {
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: auto;
}








/* CONTINUOUS TIMELINE CSS */
.paper-text-content {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    left: 10cqi;
    right: 10cqi;
    padding-left: 20px; /* Space for line */
}

.shadcn-track {
    position: absolute;
    left: 5px; 
    top: 0.6em; /* Start center of first dot */
    bottom: 0.5em; /* End near last text */
    width: 2px;
    background-color: #333;
    z-index: 1;
}

.shadcn-fill {
    width: 100%;
    height: 0%;
    background-color: #00e5ff;
    box-shadow: 0 0 10px #00e5ff;
}

.timeline-item {
    position: relative;
    margin-bottom: 1.2em;
}
.timeline-item:last-child {
    margin-bottom: 0;
}

.shadcn-dot {
    position: absolute;
    left: -15px; /* Matches track at 5px */
    top: 0.4em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #333;
    background: #0a0a0a;
    transform: translateX(-50%);
    z-index: 2;
    transition: all 0.3s ease;
}






/* HOLOGRAPHIC BACKGROUND */
.bg.holographic {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: #000;
    overflow: hidden;
    z-index: 0;
    isolation: isolate;
    opacity: 1;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), 90%, #000),
      conic-gradient(
        at 60% 50%,
        #000 0%,
        #000 20%,
        rgba(0, 129, 253, 0.25) 25%,
        #000 30%,
        #000 70%,
        rgba(0, 229, 255, 0.2) 75%,
        #000 80%,
        #000 100%
      );
}

.bg.holographic::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 70% 20%, rgba(0, 229, 255, 0.1), transparent 50%),
      repeating-radial-gradient(circle at 30% 80%, transparent, rgba(0, 129, 253, 0.05) 48px, transparent 150px);
    mix-blend-mode: screen;
}

.bg.holographic::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to bottom, transparent, rgba(0, 229, 255, 0.15), rgba(0, 129, 253, 0.15), transparent);
    mix-blend-mode: screen;
    animation: bg-pos 3s ease-in-out infinite alternate;
    background-position: 0 0;
    background-size: 100% 300%;
    background-repeat: repeat;
}

@keyframes bg-pos {
    to {
        background-position: 0 500px;
    }
}







/* LINEUP FOTOS (Floating around the Flip Card) */
.lineup-fotos-container {
    perspective: 1000px;
}
.lineup-foto {
    position: absolute;
    border-radius: 12px;
    opacity: 0; /* GSAP animates this to 1 */
    object-fit: cover;
    transform-origin: center;
    z-index: 20;

    outline: 1px solid transparent;
    box-shadow: 0 0 1px rgba(255,255,255,0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    will-change: transform, translate;
}

/* Base Desktop Layout (Matching the mockup exact structure) */
.lf-1 { left: calc(50% - 600px); top: -5%; width: 320px; aspect-ratio: 4/5; transform: rotate(16deg) scale(0.8) translateY(50px); animation: floatBalloon 10s ease-in-out infinite; }
.lf-2 { left: calc(50% - 580px); bottom: -5%; width: 300px; aspect-ratio: 4/5; transform: rotate(-12deg) scale(0.8) translateY(50px); animation: floatBalloon 12s ease-in-out infinite; }
.lf-4 { left: calc(50% + 280px); bottom: 0%; width: 320px; aspect-ratio: 4/5; transform: rotate(12deg) scale(0.8) translateY(50px); animation: floatBalloon 14s ease-in-out infinite; }



@keyframes floatBalloon {
    0%, 100% { translate: 0px 0px; }
    50% { translate: -15px -35px; }
}

/* Mobile Layout */
@media (max-width: 1024px) {
    .lf-1 { left: -10vw; top: 5%; width: 45vw; max-width: 250px; transform: rotate(15deg) scale(0.8) translateY(30px); z-index: 5; }
    .lf-2 { left: -5vw; bottom: 10%; width: 40vw; max-width: 220px; transform: rotate(-10deg) scale(0.8) translateY(30px); z-index: 5; }
    .lf-4 { right: -5vw; left: auto; bottom: 5%; width: 40vw; max-width: 220px; transform: rotate(10deg) scale(0.8) translateY(30px); z-index: 5; }
}@keyframes floatBalloon2 {
    0%, 100% { margin-top: 0px; margin-left: 0px; }
    50% { margin-top: -20px; margin-left: 15px; }
}
@keyframes floatBalloon3 {
    0%, 100% { margin-top: 0px; margin-left: 0px; }
    50% { margin-top: -30px; margin-left: -5px; }
}

/* Mobile Layout */
@media (max-width: 1024px) {
    .lf-1 { left: -5vw; top: 5%; width: 35vw; max-width: 180px; transform: rotate(15deg) scale(0.8) translateY(30px); z-index: 5; }
    .lf-2 { left: -5vw; bottom: 10%; width: 35vw; max-width: 180px; transform: rotate(-10deg) scale(0.8) translateY(30px); z-index: 5; }
    .lf-4 { right: -5vw; left: auto; bottom: 5%; width: 35vw; max-width: 180px; transform: rotate(10deg) scale(0.8) translateY(30px); z-index: 5; }
}













/* ==========================================================================
   Indicador de Scroll Minimalista (Hero)
   ========================================================================== */
.scroll-indicator-minimal {
    position: absolute;
    bottom: 3vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0.15;
    z-index: 20;
    pointer-events: none;
    animation: minimalPulse 4s ease-in-out infinite;
}

.scroll-indicator-minimal span {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400; /* Aumentado um pouco para no distorcer */
    font-size: 0.65rem; /* Ajustado para melhor leitura */
    letter-spacing: 3px; /* Reduzido o espaamento para tirar o aspecto "esticado" */
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.scroll-indicator-minimal i {
    font-size: 0.8rem;
    color: #ffffff;
    font-weight: 400;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

@keyframes minimalPulse {
    0%, 100% {
        opacity: 0.1;
        transform: translate(-50%, 0);
    }
    50% {
        opacity: 0.35;
        transform: translate(-50%, 10px);
    }
}

/* ==========================================================================
   SESS�O DE LOGIN VIP
   ========================================================================== */
#login-section .login-form {
    padding: 3rem 4rem;
    display: grid;
    place-items: center;
    gap: 3rem;
    border: 1px solid transparent;
    -o-border-image: linear-gradient(transparent, var(--color-primary), transparent) 1;
    border-image: linear-gradient(transparent, var(--color-primary), transparent) 1;
    border-width: 0 2px 0px 2px;
    background: radial-gradient(
        100% 61.73% at 100% 50%,
        rgba(0, 229, 255, 0.05) 0%,
        transparent 100%
      ),
      radial-gradient(
        91.09% 56.23% at 0% 50%,
        rgba(0, 229, 255, 0.05) 0%,
        transparent 100%
      );
    position: relative;
    max-width: 500px;
    width: 90vw;
}

#login-section .login-form::before,
#login-section .login-form::after {
    content: "";
    position: absolute;
    border: 1px solid transparent;
    border: inherit;
    z-index: -1;
}
#login-section .login-form::before {
    inset: -1rem;
    opacity: 15%;
}
#login-section .login-form::after {
    inset: -2rem;
    opacity: 5%;
}

#login-section .login-form .title {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.5rem;
    text-transform: uppercase;
    background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

#login-section .login-form .input-container {
    display: flex;
    align-items: center;
    width: 100%;
    background: radial-gradient(
      47.3% 73.08% at 50% 94.23%,
      rgba(255, 255, 255, 0.05) 5%,
      rgba(0, 0, 0, 0) 100%
    );
    border: 1px solid transparent;
    -o-border-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(0, 0, 0, 0) 100%
      )
      1;
    border-image: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(0, 0, 0, 0) 100%
      )
      1;
    border-width: 0 0 1px 0;
}

#login-section .login-form .input-container svg {
    stroke: grey;
    margin-left: 10px;
}

#login-section .login-form .input-container svg g {
    transition: all 0.2s ease-in-out;
}

#login-section .login-form .input-container .input {
    background: none;
    border: none;
    padding: 1rem 1rem;
    color: white;
    width: 100%;
    font-size: 1rem;
}

#login-section .login-form .input-container .input:focus {
    outline: none;
    color: var(--color-primary);
}

#login-section .login-form .input-container:focus-within {
    background: radial-gradient(
      47.3% 73.08% at 50% 94.23%,
      rgba(0, 229, 255, 0.1) 5%,
      rgba(0, 0, 0, 0) 100%
    );
    -o-border-image: radial-gradient(circle, var(--color-primary) 0%, transparent 100%) 1;
    border-image: radial-gradient(circle, var(--color-primary) 0%, transparent 100%) 1;
}

#login-section .login-form .input-container:focus-within svg g {
    stroke: var(--color-primary);
}

#login-section .login-form .login-button {
    width: 100%;
    position: relative;
    transition: all 0.2s ease-in-out;
}

#login-section .login-form .login-button .input {
    cursor: pointer;
    padding: 1rem;
    width: 100%;
    background: radial-gradient(
        100% 45% at 100% 50%,
        rgba(0, 229, 255, 0.08) 0%,
        rgba(0, 0, 0, 0) 100%
      ),
      radial-gradient(
        100% 45% at 0% 50%,
        rgba(0, 229, 255, 0.08) 0%,
        rgba(0, 0, 0, 0) 100%
      );
    border: 1px solid transparent;
    -o-border-image: linear-gradient(transparent, var(--color-primary), transparent) 1;
    border-image: linear-gradient(transparent, var(--color-primary), transparent) 1;
    border-width: 0 1px 0 1px;
    text-align: center;
    color: var(--color-primary);
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 2px;
}

#login-section .login-form .login-button::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.3) 0.5px,
      transparent 0.5px
    );
    background-size: 0.1px 3px;
    mix-blend-mode: soft-light;
    -webkit-mask-image: radial-gradient(
        40% 45% at 100% 50%,
        white 0%,
        transparent 100%
      ),
      radial-gradient(40% 45% at 0% 50%, white 0%, transparent 100%);
    mask-image: radial-gradient(40% 45% at 100% 50%, white 0%, transparent 100%),
      radial-gradient(40% 45% at 0% 50%, white 0%, transparent 100%);
}

#login-section .login-form .login-button:hover {
    animation: flickerForm 0.5s infinite;
    transform: scale(1.05);
}

#login-section .login-form .login-button:active {
    transform: scale(0.95);
}

#login-section .login-form .texture {
    position: absolute;
    background-image: linear-gradient(0deg, #ffffff 1px, transparent 1px);
    background-size: 1px 5px;
    inset: 0;
    mix-blend-mode: soft-light;
    -webkit-mask-image: radial-gradient(
        30% 45% at 100% 50%,
        white 0%,
        transparent 100%
      ),
      radial-gradient(30% 45% at 0% 50%, white 0%, transparent 100%);
    mask-image: radial-gradient(30% 45% at 100% 50%, white 0%, transparent 100%),
      radial-gradient(30% 45% at 0% 50%, white 0%, transparent 100%);
    pointer-events: none;
    animation: movingLinesForm 1s linear infinite;
}

@keyframes flickerForm {
    0% { filter: brightness(100%); }
    10% { filter: brightness(80%); }
    20% { filter: brightness(120%); }
    30% { filter: brightness(90%); }
    40% { filter: brightness(110%); }
    50% { filter: brightness(100%); }
    60% { filter: brightness(85%); }
    70% { filter: brightness(95%); }
    80% { filter: brightness(105%); }
    90% { filter: brightness(115%); }
    100% { filter: brightness(100%); }
}

@keyframes movingLinesForm {
    0% { background-position: 0 0; }
    100% { background-position: 0 5px; }
}

/* C�rculos Neon para os Contatos */
#login-section .login-form .input-container .icon-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4), inset 0 0 10px rgba(0, 229, 255, 0.2);
    background: rgba(0, 0, 0, 0.5);
    margin-right: 15px;
    margin-left: 5px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

#login-section .login-form .input-container:hover .icon-circle {
    box-shadow: 0 0 25px rgba(0, 229, 255, 0.8), inset 0 0 15px rgba(0, 229, 255, 0.5);
    transform: scale(1.1);
}

#login-section .login-form .input-container .icon-circle i {
    font-size: 1.3rem;
    background: linear-gradient(to bottom right, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}


/* =========================================================
   CINEMATIC FOOTER
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

#cinematic-footer-container {
    position: relative;
    height: 100vh;
    width: 100%;
}

.cinematic-footer-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    height: 100vh;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background-color: #050505;
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    
    --pill-bg-1: rgba(255, 255, 255, 0.03);
    --pill-bg-2: rgba(255, 255, 255, 0.01);
    --pill-shadow: rgba(0, 0, 0, 0.5);
    --pill-highlight: rgba(255, 255, 255, 0.1);
    --pill-inset-shadow: rgba(0, 0, 0, 0.8);
    --pill-border: rgba(255, 255, 255, 0.08);
    
    --pill-bg-1-hover: rgba(255, 255, 255, 0.08);
    --pill-bg-2-hover: rgba(255, 255, 255, 0.02);
    --pill-border-hover: rgba(255, 255, 255, 0.2);
    --pill-shadow-hover: rgba(0, 0, 0, 0.7);
    --pill-highlight-hover: rgba(255, 255, 255, 0.2);
}

@keyframes footer-breathe {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

@keyframes footer-scroll-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes footer-heartbeat {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(255, 51, 102, 0.5)); }
    15%, 45% { transform: scale(1.2); filter: drop-shadow(0 0 10px rgba(255, 51, 102, 0.8)); }
    30% { transform: scale(1); }
}

.animate-footer-breathe { animation: footer-breathe 8s ease-in-out infinite alternate; }
.animate-footer-scroll-marquee { animation: footer-scroll-marquee 40s linear infinite; }
.animate-footer-heartbeat { animation: footer-heartbeat 2s cubic-bezier(0.25, 1, 0.5, 1) infinite; }

.footer-bg-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-size: 60px 60px;
    background-image: 
        linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
    mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}

.footer-aurora {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 60vh;
    width: 80vw;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background: radial-gradient(
        circle at 50% 50%, 
        rgba(0, 210, 255, 0.15) 0%, 
        rgba(0, 150, 255, 0.10) 40%, 
        transparent 70%
    );
}

.footer-giant-bg-text {
    position: absolute;
    bottom: -5vh;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    font-size: 26vw;
    line-height: 0.75;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.05);
    background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 60%);
    -webkit-background-clip: text;
    background-clip: text;
}

.footer-marquee-container {
    position: absolute;
    top: 3rem;
    left: 0;
    width: 100%;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: rgba(5,5,5,0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 1rem 0;
    z-index: 10;
    transform: rotate(-2deg) scale(1.1);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
.footer-marquee-content {
    display: flex;
    width: max-content;
}
.marquee-item {
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: #a3a3a3;
    text-transform: uppercase;
}
.marquee-item span.star {
    margin: 0 3rem;
    color: rgba(0,210,255,0.6);
}

.footer-center-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    margin-top: 5rem;
    width: 100%;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
}

.footer-text-glow {
    font-size: 3rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 3rem;
    letter-spacing: -0.05em;
    background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.4) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0px 0px 20px rgba(255,255,255,0.15));
}
@media (min-width: 768px) {
    .footer-text-glow { font-size: 6rem; }
}

.footer-glass-pill, .footer-glass-pill-small, .footer-glass-pill-icon {
    background: linear-gradient(145deg, var(--pill-bg-1) 0%, var(--pill-bg-2) 100%);
    box-shadow: 
        0 10px 30px -10px var(--pill-shadow), 
        inset 0 1px 1px var(--pill-highlight), 
        inset 0 -1px 2px var(--pill-inset-shadow);
    border: 1px solid var(--pill-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    text-decoration: none;
    cursor: pointer;
}

.footer-glass-pill {
    padding: 1.25rem 2.5rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.875rem;
}
@media (min-width: 768px) {
    .footer-glass-pill { font-size: 1rem; }
}

.footer-glass-pill-small {
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 500;
    font-size: 0.75rem;
    color: #a3a3a3;
}
@media (min-width: 768px) {
    .footer-glass-pill-small { font-size: 0.875rem; }
}

.footer-glass-pill-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    color: #a3a3a3;
    border: none;
}

.footer-glass-pill:hover, .footer-glass-pill-small:hover, .footer-glass-pill-icon:hover {
    background: linear-gradient(145deg, var(--pill-bg-1-hover) 0%, var(--pill-bg-2-hover) 100%);
    border-color: var(--pill-border-hover);
    box-shadow: 
        0 20px 40px -10px var(--pill-shadow-hover), 
        inset 0 1px 1px var(--pill-highlight-hover);
    color: #ffffff;
}
.footer-glass-pill-icon:hover i {
    transform: translateY(-4px);
    transition: transform 0.3s;
}

.footer-primary-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    width: 100%;
}
.footer-secondary-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 1rem;
}

.footer-bottom-bar {
    position: relative;
    z-index: 20;
    width: 100%;
    padding: 1.2rem 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
@media (min-width: 768px) {
    .footer-bottom-bar {
        padding: 1.2rem 3rem 1.5rem 3rem;
        flex-direction: row;
        justify-content: center;
    }
    #back-to-top {
        position: absolute;
        right: 3rem;
    }
}
.footer-copyright {
    text-align: center;
    width: 100%;
    color: #a3a3a3;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    order: 2;
}
@media (min-width: 768px) {
    .footer-copyright {
    text-align: center;
    width: 100%; font-size: 0.75rem; order: 1; }
}
.footer-crafted {
    order: 1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
@media (min-width: 768px) {
    .footer-crafted { order: 2; }
}
#back-to-top {
    order: 3;
}




/* =========================================================
   SCROLL INDICATOR (FASE 1)
   ========================================================= */
.scroll-indicator {
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
    will-change: opacity;
}
.scroll-indicator-text {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    animation: breathe 3s infinite ease-in-out;
}
.scroll-indicator-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, transparent 100%);
    animation: slide-down-line 2s infinite ease-in-out;
}
@keyframes slide-down-line {
    0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
    50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
    50.1% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}




/* =========================================================
   HEADER DEDICADO EXCLUSIVO PARA MOBILE (DESIGN IDENTICO AO DESKTOP)
   ========================================================= */
@media (min-width: 769px) {
    #header-mobile {
        display: none !important;
    }
}

@media (max-width: 768px) {
    #header {
        display: none !important;
    }

    #header-mobile.mobile-floating-header {
        display: block !important;
        position: fixed !important;
        top: 12px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: fit-content !important;
        max-width: calc(100vw - 12px) !important;
        z-index: 999999 !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        pointer-events: auto !important;
        padding: 0 !important;
    }

    .mobile-header-container {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 5px 8px !important;
        gap: clamp(5px, 1.8vw, 15px) !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    .mobile-nav-group {
        display: flex !important;
        align-items: center !important;
        gap: clamp(3px, 1vw, 6px) !important;
    }

    .mobile-header-container > .mobile-nav-group:first-child {
        justify-content: flex-end !important;
    }

    .mobile-header-container > .mobile-nav-group:last-child {
        justify-content: flex-start !important;
    }

    .mobile-nav-pill {
        width: auto !important;
        min-width: 0 !important;
        height: 32px !important;
        padding: 0 clamp(6px, 1.6vw, 10px) !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: clamp(0.48rem, 1.8vw, 0.62rem) !important;
        font-weight: 600 !important;
        letter-spacing: clamp(0.4px, 0.2vw, 1px) !important;
        color: #ffffff !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        border-radius: 30px !important;
        background-color: rgba(0, 0, 0, 0.35) !important;
        box-shadow: inset 0 3px 6px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.05) !important;
        transition: all 0.25s ease !important;
        border: 1px solid rgba(255, 255, 255, 0.04) !important;
    }

    .mobile-nav-pill:active,
    .mobile-nav-pill:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
        box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 4px 15px rgba(0,0,0,0.4) !important;
        color: var(--color-primary, #00d2ff) !important;
        transform: translateY(-1px) !important;
        border-color: rgba(0, 210, 255, 0.3) !important;
    }

    .mobile-logo {
        padding: 0 clamp(3px, 1vw, 8px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        flex-shrink: 0 !important;
        transition: transform 0.2s ease !important;
    }

    .mobile-logo:active {
        transform: scale(0.95) !important;
    }

    .mobile-logo-img {
        height: clamp(50px, 10vw, 65px) !important;
        width: auto !important;
        max-width: 200px !important;
        object-fit: contain !important;
        filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.5)) !important;
        display: block !important;
    }
}