/*
   EKLO DIGITAL • sites-claro.css
   Modo claro da página de sites (e da política de privacidade, que usa o mesmo sites.css).
   Só vale para quem usa o aparelho no modo claro; no modo escuro nada muda.
   A mesma hierarquia da página inicial (inicio-claro.css):
   - fundo prata bem claro (#EAEDF2) e seções alternadas em lavanda bem claro (#F5F7FF)
   - texto principal #1B1840, texto corrido #403D69, apoio #4A4867
   - destaques no azul royal #18239B (no escuro eram o azul claro #ABC7FF)
   - faixa de chamada do meio em azul-marinho com botão branco
   A chuva de código troca de cor no sites.js.
*/

@media (prefers-color-scheme: light) {
  :root {
    --bg: #EAEDF2; /* prata bem claro */
    --bg-alt: #F5F7FF;
    --surface: #FFFFFF;
    --line: rgba(27, 24, 64, 0.1);
    --line-strong: rgba(27, 24, 64, 0.16);
    --text: #1B1840;
    --muted: #403D69;
    --soft: #4A4867;
    --light: #18239B; /* era o azul claro de destaque; no branco o destaque é o royal */
  }

  .grad { background-image: linear-gradient(135deg, #18239B, #5A57E6); }
  .eyebrow { color: #3D3AC9; opacity: 1; }

  /* BOTÕES: o texto dos botões cheios continua branco */
  .btn { color: #FFFFFF; }
  .btn--ghost { border-color: rgba(27, 24, 64, 0.2); color: #18239B; }
  .btn--ghost:hover { background: #EEF2FF; border-color: rgba(24, 35, 155, 0.5); color: #18239B; }
  .btn--small:hover { background: #5A57E6; }

  /* TOPO */
  .topbar.is-scrolled {
    background: rgba(234, 237, 242, 0.95);
    box-shadow: 0 4px 20px rgba(44, 40, 101, 0.06);
  }
  .topbar__nav a { color: #2C2865; }
  .topbar__nav a:hover { color: #18239B; }
  .topbar__nav a::after { background: linear-gradient(90deg, #18239B, #5A57E6); }
  .mobile-nav a:not(.btn) { color: #2C2865; }
  .mobile-nav a:not(.btn):hover { color: #18239B; }

  /* CHUVA DE CÓDIGO: no branco ela fica em tons de lavanda, bem leve atrás do texto */
  .code-rain { opacity: 0.38; }

  /* No topo, clareia atrás do texto para ele continuar fácil de ler */
  .hero::before { background: rgba(234, 237, 242, 0.6); }
  .hero::after { background: linear-gradient(to bottom, transparent, rgba(234, 237, 242, 0.85)); }
  @media (min-width: 1024px) {
    .hero::before {
      background: linear-gradient(90deg, rgba(234, 237, 242, 0.92) 0%, rgba(234, 237, 242, 0.7) 40%, rgba(234, 237, 242, 0) 72%);
    }
  }

  /* Seções comuns quase prata lisa por cima da chuva (ela aparece só de leve) */
  .section { background: rgba(234, 237, 242, 0.9); }
  .section--alt { background: var(--bg-alt); }

  /* PROJETOS */
  .browser {
    box-shadow: 0 16px 36px rgba(44, 40, 101, 0.14);
  }
  .project:hover .browser { border-color: rgba(90, 87, 230, 0.45); }
  .browser__bar,
  .terminal__bar { background: #F5F7FF; }
  .browser__dots i { background: rgba(27, 24, 64, 0.18); }
  .browser__url { background: #FFFFFF; border: 1px solid var(--line); }
  .project__tags { opacity: 1; }
  .link-arrow { border-bottom-color: rgba(24, 35, 155, 0.35); font-weight: 600; }
  .inline-cta { background: #EEF2FF; border-color: rgba(90, 87, 230, 0.2); }

  /* COMO FUNCIONA */
  .step::before { background: #5A57E6; }

  /* O QUE VEM JUNTO: o terminal continua escuro, como uma tela de verdade, com as cores do escuro */
  .terminal {
    --light: #ABC7FF;
    --soft: rgba(255, 255, 255, 0.75);
    --line: rgba(255, 255, 255, 0.08);
    border-color: transparent;
    box-shadow: 0 16px 36px rgba(44, 40, 101, 0.2);
  }
  .terminal__bar { background: rgba(255, 255, 255, 0.03); }

  /* CHAMADAS
     Faixa do meio: marinho com botão branco (o ponto mais forte da página).
     Contato final: lavanda claro com o botão royal. */
  .cta {
    background:
      radial-gradient(ellipse 70% 60% at 50% 0%, rgba(171, 199, 255, 0.45), transparent 70%),
      #F5F7FF;
  }
  .cta--band {
    --text: #FFFFFF;
    --muted: rgba(255, 255, 255, 0.88);
    --light: #ABC7FF;
    background:
      radial-gradient(ellipse 70% 80% at 50% 0%, rgba(90, 87, 230, 0.55), transparent 72%),
      #2C2865;
    color: #FFFFFF;
    border-top-color: transparent;
  }
  .cta--band .btn { background: #FFFFFF; color: #18239B; }
  .cta--band .btn:hover { background: #ABC7FF; color: #18239B; box-shadow: 0 8px 30px rgba(171, 199, 255, 0.35); }
  .cta__contacts { color: #2C2865; }
  .cta__contacts a:hover { color: #18239B; }

  /* RODAPÉ */
  .footer { background: #F5F7FF; }
  .footer__logo img { opacity: 1; }
  .footer__copy { color: var(--soft); }

  /* LUZ DO MOUSE: no branco a borda acesa fica violeta */
  .spotlight::before {
    background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(90, 87, 230, 0.1), transparent 65%);
  }
  .spotlight::after {
    background: radial-gradient(300px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(90, 87, 230, 0.7), transparent 70%);
  }
  .cta--band.spotlight::before {
    background: radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(171, 199, 255, 0.22), transparent 65%);
  }
  .cta--band.spotlight::after {
    background: radial-gradient(200px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(171, 199, 255, 0.7), transparent 70%);
  }
  .cta:not(.cta--band).spotlight::before {
    background: radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(90, 87, 230, 0.12), transparent 65%);
  }
  .cta:not(.cta--band).spotlight::after {
    background: radial-gradient(200px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(90, 87, 230, 0.5), transparent 70%);
  }

  /* SETA DE ROLAR */
  .scroll-cue {
    border-color: rgba(24, 35, 155, 0.25);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(44, 40, 101, 0.15);
  }
  .scroll-cue:hover,
  .scroll-cue:focus-visible {
    border-color: rgba(24, 35, 155, 0.5);
    color: #18239B;
    background: #EEF2FF;
  }
  .scroll-cue::after { border-color: rgba(24, 35, 155, 0.35); }

  /* MONTAGEM DO TOPO: janela de navegador branca e celular com moldura escura, como um aparelho de verdade */
  .montagem { --esboco: rgba(90, 87, 230, 0.5); }
  .montagem__janela {
    background: #FFFFFF;
    box-shadow: 0 4cqw 10cqw rgba(44, 40, 101, 0.18), 0 0 12cqw rgba(90, 87, 230, 0.12);
  }
  .montagem__pontos i { background: rgba(27, 24, 64, 0.2); }
  .montagem__url { background: #EEF1FB; color: #403D69; }
  .montagem__pagina { border-top: 1px solid var(--line); }
  .montagem__celular {
    background: #1B1840;
    border-color: transparent;
    box-shadow: 0 3cqw 8cqw rgba(44, 40, 101, 0.3);
  }
  .montagem__selo { box-shadow: 0 2cqw 6cqw rgba(44, 40, 101, 0.22); border: 1px solid var(--line); }
}

/* Cursor de texto do endereço digitado: royal no claro (no escuro é o azul claro) */
@media (prefers-color-scheme: light) {
  @keyframes mDigita {
    0% { max-width: 0; border-right-color: #18239B; }
    92% { max-width: 18ch; border-right-color: #18239B; }
    100% { max-width: 18ch; border-right-color: transparent; }
  }
}