/* Home: o mesmo layout da V2 (styles/v2.css), em claro. Só troca as cores; a estrutura vem toda do v2.css. */

.v2.claro {
  --v2-bg: #FFFFFF;
  --v2-bg2: var(--gray);
  --v2-card: #FFFFFF;
  --v2-card2: var(--gray);
  --v2-ink: var(--ink);
  --v2-muted: var(--text-muted);
  --v2-muted2: #8A919E;
  --v2-line: var(--line);
  --v2-line2: #D9DEE6;
  --v2-azul: var(--blue);
  background: var(--white); color: var(--ink);
}
.v2.claro .btn-quiet { background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: 0 2px 8px rgba(11,15,25,.05); }
.v2.claro .btn-quiet:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.v2.claro .btn-primary { box-shadow: 0 8px 22px rgba(21,93,252,.28); }

/* header claro (o padrão do site) */
.v2.claro .nv { --nv-bg: rgba(255,255,255,.86); --nv-ink: var(--ink); --nv-muted: var(--text-muted); --nv-line: var(--line); --nv-painel: var(--white); --nv-hover: var(--gray); }
.v2.claro .nv-logo img { content: url("/assets/logos/eskalei-principal.svg"); }
.v2.claro .nv-cta:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.v2.claro .nv-ico { background: var(--white); border-color: var(--line); color: var(--ink); box-shadow: 0 1px 2px rgba(11,15,25,.05); }
.v2.claro .nv-item:hover .nv-ico { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.v2.claro .nv-sombra { background: rgba(11,15,25,.28); }
.v2.claro .nv-burger span { background: var(--ink); }

/* primeira dobra: banners clareados por um véu branco */
.v2.claro .hero-wrap::before {
  background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.86) 45%, rgba(255,255,255,.45) 100%), linear-gradient(0deg, #FFFFFF 0%, rgba(255,255,255,.7) 18%, transparent 55%); }
.v2.claro .hero-wrap::after { background: radial-gradient(circle, rgba(21,93,252,.18), rgba(21,93,252,0) 65%); }
.v2.claro .hero .lead { color: var(--text-muted); }
.v2.claro .v2-prova-logos span, .v2.claro .v2-prova-logos img { background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: 0 0 0 3px var(--white); }
.v2.claro .v2-prova-logos img { background: var(--white); }

/* portfólio */
.v2.claro .criacao::before { background: linear-gradient(to right, #FFFFFF, rgba(255,255,255,0)); }
.v2.claro .criacao::after { background: linear-gradient(to left, #FFFFFF, rgba(255,255,255,0)); }
.v2.claro .criacao .car::after { background: rgba(21,93,252,.10); }
.v2.claro .seg { background: var(--gray); border-color: var(--line); }
.v2.claro .seg-btn { color: var(--text-muted); }
.v2.claro .seg-btn[aria-selected="true"] { background: var(--ink); color: var(--white); }
.v2.claro .temas-card, .v2.claro .temas-card .face { background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.6)); border-color: rgba(255,255,255,.9); box-shadow: 0 24px 60px rgba(11,15,25,.12); color: var(--ink); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.v2.claro .temas-card .face p, .v2.claro .temas-card .face small, .v2.claro .temas-card .face span { color: var(--text-muted); }
.v2.claro .temas-card .face h3, .v2.claro .temas-card .face h4, .v2.claro .temas-card .face strong { color: var(--ink); }
.v2.claro .temas-card .face .eyebrow { color: var(--blue); }
.v2.claro .car-nav { background: var(--white); border-color: var(--line); color: var(--ink); }
.v2.claro .clientes { background: var(--white); }

/* serviços (abas, cena e cartão de vidro claro) */
.v2.claro .servicos-lista { background: var(--gray); border-color: var(--line); }
.v2.claro .servico-tab:hover { color: var(--ink); background: rgba(255,255,255,.7); }
.v2.claro .servico-tab[aria-selected="true"] { background: var(--ink); color: var(--white); border-color: var(--ink); }
.v2.claro .servico-tab[aria-selected="true"] .servico-tab-ico { color: var(--white); }
.v2.claro .servicos-vitrine::before { background: rgba(21,93,252,.18); }
.v2.claro .servicos-card { background: linear-gradient(135deg, rgba(255,255,255,.80), rgba(255,255,255,.48)); border-color: rgba(255,255,255,.9); box-shadow: 0 24px 60px rgba(11,15,25,.12), inset 0 1px 0 rgba(255,255,255,.9); color: var(--ink); }
.v2.claro .servicos-inclui li::before { box-shadow: 0 0 0 4px var(--blue-soft); }

/* por que a Eskalei */
.v2.claro .pq::before { background: rgba(21,93,252,.10); }
.v2.claro .pq-card { background: var(--white); border-color: var(--line); box-shadow: 0 1px 2px rgba(11,15,25,.04); }
.v2.claro .pq-card:hover { border-color: #D5DCE8; box-shadow: 0 18px 40px rgba(11,15,25,.07); }
.v2.claro .pq-card .pq-rot { background: var(--blue-soft); color: var(--blue); }
.v2.claro .pq-palco { background-color: var(--gray); border-color: var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); }
.v2.claro .pq-palco::after { background: radial-gradient(70% 70% at 50% 45%, rgba(243,245,248,.2), var(--gray) 90%); }
.v2.claro .pq-painel { background: var(--white); border-color: var(--line); box-shadow: 0 16px 36px rgba(11,15,25,.08); color: var(--ink); }
.v2.claro .pq-ico { background: var(--blue-soft); color: var(--blue); }
.v2.claro .pq-equipe::before { background: var(--blue-soft); }
.v2.claro .pq-pill { background: var(--white); color: var(--ink); border-color: var(--line); }
.v2.claro .pq-pill.ok { background: #E7F7EE; color: #12804A; border-color: #CDEEDB; }
.v2.claro .pq-item span { color: #12804A; }

/* como trabalhamos */
.v2.claro .passo { background: var(--white); border-color: var(--line); box-shadow: 0 18px 44px rgba(11,15,25,.06); }
.v2.claro .passo.ativo, .v2.claro .passo:hover { border-color: #C9D6F5; }
.v2.claro .passo-cena { background: var(--gray); }

/* FAQ */
.v2.claro .sv-faq { background: var(--white); border-color: var(--line); box-shadow: 0 1px 2px rgba(11,15,25,.04), 0 24px 50px rgba(11,15,25,.05); }
.v2.claro .sv-faq summary::after { background-color: var(--white); border-color: var(--line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' stroke='%230B0F19' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.v2.claro .sv-faq details[open] summary::after { background-color: var(--ink); border-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1.5v9M1.5 6h9' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* fechamento e rodapé */
.v2.claro .fechamento-box { background: radial-gradient(ellipse at 50% 0%, rgba(21,93,252,.10), transparent 60%), var(--white); border-color: var(--line); box-shadow: 0 30px 70px rgba(11,15,25,.06); }
.v2.claro .fechamento-box::before { background: radial-gradient(closest-side, rgba(21,93,252,.26), rgba(21,93,252,0)); }
.v2.claro .fechamento-box::after { opacity: .06; }
.v2.claro .fechamento-marca { opacity: .05; }
.v2.claro .fechamento-box .sa-k { fill: var(--ink); }
.v2.claro .site-footer { background: var(--ink); }

/* banners mais à mostra do lado direito: o véu branco fica forte só atrás do texto */
.v2.claro .esteira { opacity: .95; filter: none; }
.v2.claro .hero-wrap::before {
  background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 44%, rgba(255,255,255,.75) 56%, rgba(255,255,255,0) 72%), linear-gradient(0deg, #FFFFFF 0%, rgba(255,255,255,0) 14%); }

/* cartão do portfólio: invólucro transparente, vidro claro só na face */
.v2.claro .temas-card { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.v2.claro .face::before { background: linear-gradient(120deg, rgba(255,255,255,.55) 0%, transparent 40%, transparent 60%, rgba(255,255,255,.25) 100%); }
.v2.claro .hero-wrap::before { background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 44%, rgba(255,255,255,.75) 56%, rgba(255,255,255,0) 72%), linear-gradient(0deg, #FFFFFF 0%, rgba(255,255,255,0) 14%); }
/* banners passando bem suaves atrás do texto */
.v2.claro .hero-wrap::before { background: linear-gradient(90deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.88) 44%, rgba(255,255,255,.55) 57%, rgba(255,255,255,0) 72%), linear-gradient(0deg, #FFFFFF 0%, rgba(255,255,255,0) 14%); }
.v2.claro .hero-wrap::before { background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.94) 44%, rgba(255,255,255,.6) 57%, rgba(255,255,255,0) 72%), linear-gradient(0deg, #FFFFFF 0%, rgba(255,255,255,0) 14%); }
.v2.claro .hero-wrap::before { background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.97) 50%, rgba(255,255,255,.65) 62%, rgba(255,255,255,0) 77%), linear-gradient(0deg, #FFFFFF 0%, rgba(255,255,255,0) 14%); }
@media (max-width: 899px) {
  .v2.claro .hero-wrap::before { background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 66%, rgba(255,255,255,.35) 82%, rgba(255,255,255,0) 100%); }
}

/* Por que a Eskalei: tela animada solta no cartão, só com um brilho azul suave atrás */
.v2.claro .pq-card .pq-palco { background: none; border: 0; }
.v2.claro .pq-card .pq-palco::after { background: radial-gradient(55% 55% at 50% 50%, rgba(21,93,252,.10), transparent 70%); }
.v2.claro .pq-card .pq-painel { box-shadow: 0 20px 44px rgba(11,15,25,.10); }