/*
   EKLO DIGITAL • inicio-claro.css
   Modo claro da página inicial. O site continua escuro para quem usa o celular ou o
   computador no modo escuro; quem usa o modo claro vê esta versão, sem botão para trocar.
   Tudo aqui fica dentro de @media (prefers-color-scheme: light), então nada muda no modo escuro.
   Carrega depois do tailwind.css para valer por cima das classes dele.

   Hierarquia no claro:
   - fundo prata bem claro (#EAEDF2, o --c-fundo), cards brancos por cima, com faixas azul-lavanda bem claras (#F5F7FF) alternando as seções
   - títulos e texto principal em azul quase preto (#1B1840, contraste 16:1)
   - texto corrido em #403D69 (10:1) e textos de apoio em #4A4867 (8,6:1)
   - destaques e links no azul royal da marca (#18239B, 11:1), que no escuro eram o azul claro #ABC7FF
   - faixas de chamada em azul-marinho (#2C2865) com botão branco: o ponto mais forte da página
*/

@media (prefers-color-scheme: light) {
  :root {
    --c-tinta: #1B1840;
    --c-texto: #403D69;
    --c-apoio: #4A4867;
    --c-linha: rgba(27, 24, 64, 0.1);
    --c-suave: #F5F7FF;
    --c-lavanda: #EEF2FF;
    --c-fundo: #EAEDF2; /* prata bem claro: fundo da página no modo claro */
  }

  /* BASE (classes do Tailwind usadas no index.html) */
  .bg-eklo-bg { background-color: var(--c-fundo); }
  .text-white { color: var(--c-tinta); }
  .text-white\/85,
  .text-eklo-light\/80 { color: var(--c-texto); }
  .text-white\/75,
  .text-white\/70,
  .text-white\/60 { color: var(--c-apoio); }
  .text-white\/50,
  .text-white\/40,
  .text-white\/30 { color: #55537A; }
  .text-white\/10 { color: rgba(27, 24, 64, 0.25); }
  .text-eklo-light { color: #18239B; }
  .text-eklo-mid { color: #3D3AC9; } /* rótulos acima dos títulos: o violeta um pouco mais escuro, para ler bem */
  .border-white\/\[0\.04\],
  .border-white\/\[0\.06\],
  .border-white\/\[0\.08\] { border-color: var(--c-linha); }
  .bg-white\/\[0\.04\] { background-color: #FFFFFF; box-shadow: 0 6px 20px rgba(44, 40, 101, 0.08); }
  .bg-eklo-dark { background-color: #E9EFFF; }
  .hover\:text-eklo-light:hover { color: #18239B; }
  .hover\:border-eklo-light\/40:hover { border-color: rgba(24, 35, 155, 0.4); }
  .hover\:bg-white\/\[0\.02\]:hover { background-color: var(--c-lavanda); }
  .ham-line.bg-white { background-color: var(--c-tinta); }

  .text-gradient { background-image: linear-gradient(135deg, #18239B, #5A57E6); }

  /* Fundo de pontos e linhas: mais fraco no branco (as cores vêm do script.js) */
  #global-bg-canvas { opacity: 0.4; }

  /* TOPO */
  #navbar.is-scrolled {
    background: rgba(234, 237, 242, 0.95);
    border-bottom-color: rgba(27, 24, 64, 0.08);
    box-shadow: 0 4px 20px rgba(44, 40, 101, 0.06);
  }

  .nav-link { color: #2C2865; }
  .nav-link:hover { color: #18239B; }
  .nav-link::after { background: linear-gradient(90deg, #18239B, #5A57E6); }
  .nav-link--destaque { color: #18239B; border-left-color: rgba(27, 24, 64, 0.14); }

  .cta-btn-nav:hover { background: #5A57E6; box-shadow: 0 4px 20px rgba(90, 87, 230, 0.3); }

  .mobile-menu { background: var(--c-fundo); }
  .mobile-link { color: #2C2865; }
  .mobile-link:hover,
  .mobile-link--destaque { color: #18239B; }
  .mobile-menu__divider { background: rgba(27, 24, 64, 0.14); }

  /* HERO: prata claro com um brilho lavanda atrás do casulo.
     O brilho fica no .hero-inner (e não no #hero) porque o vídeo só se mistura com o que está na mesma camada dele. */
  #hero { background-color: var(--c-fundo) !important; } /* o HTML deixa o topo preto direto na tag */
  /* A cor de fundo também fica no .hero-inner: é com ela que o branco do vídeo se mistura e vira prata */
  #hero .hero-inner { background-color: var(--c-fundo); background-image: radial-gradient(ellipse 23% 42% at 76% 50%, rgba(171, 199, 255, 0.5), transparent 100%); }

  /* No celular o casulo fica dentro de uma caixa animada que não deixa ele se misturar com o brilho:
     ali o topo fica prata liso, e a caixa ganha o mesmo prata para o branco do vídeo virar prata dentro dela */
  @media (max-width: 1023px) {
    #hero .hero-inner { background-image: none; }
    #hero-logo { background-color: var(--c-fundo); }
  }

  #hero::after { background: linear-gradient(to bottom, transparent, var(--c-fundo)); }

  /* O vídeo do casulo tem fundo preto: invertido, o fundo vira branco e o casulo fica azul,
     parecido com a logo degradê. "multiply" mistura esse branco com o prata de trás, então o fundo
     do vídeo fica exatamente da cor da página. */
  .casulo-video,
  .casulo-video-mobile {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: multiply;
  }

  /* BOTÕES */
  .cta-btn-outline { border-color: rgba(27, 24, 64, 0.2); color: #2C2865; }
  .cta-btn-outline:hover { border-color: rgba(24, 35, 155, 0.5); color: #18239B; background: var(--c-lavanda); }

  .project-link-btn { border-color: rgba(27, 24, 64, 0.18); color: #2C2865; }
  .project-link-btn:hover,
  .project-link-btn:focus-visible { border-color: rgba(24, 35, 155, 0.45); color: #18239B; background: var(--c-lavanda); }

  .section-divider-line { background: rgba(27, 24, 64, 0.08); }

  /* Ritmo das seções: branco e lavanda claro se alternando, faixas de chamada em marinho */
  #parceiros,
  #depoimentos,
  #diferenciais {
    background-color: var(--c-suave);
  }

  /* SERVIÇOS */
  .servico { border-left-color: var(--c-linha); }
  @media (max-width: 960px) {
    .servico,
    .servico:first-child,
    .servico:last-child { border-top-color: var(--c-linha); }
  }

  .servico__icone {
    background: var(--c-lavanda);
    border-color: rgba(90, 87, 230, 0.2);
    color: #18239B;
  }
  .servico__corpo:hover .servico__icone {
    background: #E2E8FF;
    border-color: rgba(90, 87, 230, 0.45);
    color: #18239B;
  }
  .servico__apelido { color: #18239B; }
  .servico__texto { color: var(--c-texto); }
  .lista-check li { color: var(--c-tinta); }
  .lista-check li::before {
    background: #E6ECFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318239B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
  }
  .servico__link { color: #18239B; text-decoration-color: rgba(24, 35, 155, 0.35); }
  .servico__link:hover,
  .servico__link:focus-visible { color: #5A57E6; text-decoration-color: #5A57E6; }

  /* CLIENTES */
  .client-logo-frame {
    background: #FFFFFF;
    border-color: var(--c-linha);
    box-shadow: 0 6px 18px rgba(44, 40, 101, 0.1);
  }
  .client-logo-link:hover .client-logo-frame,
  .client-logo-link:focus-visible .client-logo-frame {
    border-color: rgba(90, 87, 230, 0.35);
    box-shadow: 0 8px 26px rgba(90, 87, 230, 0.18);
  }
  .clients-hint { color: var(--c-apoio); }

  /* FAIXAS DE CHAMADA: marinho com brilho azul no topo e botão branco (o botão já é branco no escuro) */
  .cta-gradient {
    background:
      radial-gradient(ellipse 80% 110% at 50% 0%, rgba(90, 87, 230, 0.55), transparent 72%),
      #2C2865;
    border-color: transparent;
    color: #FFFFFF;
  }
  .cta-gradient .text-eklo-light { color: #ABC7FF; }
  .cta-gradient .cta-btn-primary:hover { color: #18239B; }

  /* EXEMPLOS DE ATUAÇÃO */
  .work-card {
    background: #FFFFFF;
    border-color: var(--c-linha);
    box-shadow: 0 6px 22px rgba(44, 40, 101, 0.07);
  }
  .work-card:hover {
    border-color: rgba(90, 87, 230, 0.3);
    box-shadow: 0 16px 40px rgba(44, 40, 101, 0.14);
  }
  /* Etiqueta em cima do print: branca com texto royal */
  .work-card-tag {
    background: rgba(255, 255, 255, 0.94);
    color: #18239B;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(27, 24, 64, 0.18);
  }

  /* DEPOIMENTOS */
  .depo-card__media {
    border-color: var(--c-linha);
    background: #E9EFFF;
    box-shadow: 0 16px 36px rgba(44, 40, 101, 0.18);
  }
  .depo-card__info strong { color: var(--c-tinta); }
  .depo-card__info span { color: var(--c-apoio); }
  .depo-card:focus-visible { outline-color: #18239B; }

  /* DIFERENCIAIS */
  .diff-item {
    background: #FFFFFF;
    border-color: var(--c-linha);
    box-shadow: 0 4px 16px rgba(44, 40, 101, 0.05);
  }
  .diff-item:hover { border-color: rgba(90, 87, 230, 0.3); background: #FFFFFF; }

  /* RODAPÉ */
  footer { background: var(--c-suave); }

  /* LUZ DO MOUSE: no branco a borda acesa fica violeta (o azul claro sumia) */
  .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-gradient.spotlight::before {
    background: radial-gradient(300px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(171, 199, 255, 0.22), transparent 65%);
  }
  .cta-gradient.spotlight::after {
    background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(171, 199, 255, 0.85), transparent 70%);
  }

  /* SETA DE ROLAR */
  .scroll-cue {
    border-color: rgba(24, 35, 155, 0.25);
    background: rgba(255, 255, 255, 0.9);
    color: #18239B;
    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: var(--c-lavanda);
    box-shadow: 0 4px 20px rgba(44, 40, 101, 0.2);
  }
  .scroll-cue:focus-visible { outline-color: #18239B; }
  .scroll-cue::after { border-color: rgba(24, 35, 155, 0.35); }

  .servico__link:focus-visible,
  .project-link-btn:focus-visible,
  .client-logo-link:focus-visible .client-logo-frame { outline-color: #18239B; }
}