/* ═══════════════════════════════════════════════════════════════
   TEMA ALTERNADO — lucassigrist.com.br
   Alterna o fundo das seções da home: escura / clara / escura...

   Ordem das seções na home:
     1 .ls-hero ......... ESCURA   (hero)
     2 .geo26-section ... CLARA    (aparecer nas respostas da IA)
     3 .ls-projects ..... ESCURA   (projetos recentes)
     4 .ivp ............. CLARA    (marca premium / identidade visual)
     5 .dg-block ........ ESCURA   (material impresso)
     6 .social-arts ..... CLARA    (conteúdo visual)
     7 .reviews-real .... ESCURA   (avaliações)
       footer ........... ESCURA

   Este arquivo só PINTA de claro as seções 2, 4 e 6 — as escuras
   permanecem como já estavam. Para inverter qual seção é clara,
   troque os seletores nos três blocos abaixo.

   Atualizado em 04/08/2026
   ═══════════════════════════════════════════════════════════════ */

:root{
  --alt-bg:        #eef2f9;   /* fundo claro da seção      */
  --alt-bg-2:      #e4ebf6;   /* segundo tom do gradiente  */
  --alt-card:      #ffffff;   /* cartões                   */
  --alt-stroke:    rgba(13,23,48,.12);
  --alt-stroke-2:  rgba(13,23,48,.18);
  --alt-title:     #0d1730;   /* títulos                   */
  --alt-text:      rgba(13,23,48,.70);
  --alt-text-soft: rgba(13,23,48,.56);
  --alt-gold:      #a87f3d;   /* dourado legível no claro  */
  --alt-blue:      #2563eb;
  --alt-teal:      #0f766e;
}

/* ───────────────────────────────────────────────────────────────
   SEÇÃO 2 — .geo26-section
   Esta seção usa style inline em todos os elementos, por isso
   cada regra precisa de !important para vencer o atributo style.
   ─────────────────────────────────────────────────────────────── */
.geo26-section{
  background: linear-gradient(180deg, var(--alt-bg), var(--alt-bg-2)) !important;
  border-top: 1px solid var(--alt-stroke);
  border-bottom: 1px solid var(--alt-stroke);
}
/* halos coloridos do fundo escuro: suavizados para não sujar o claro */
.geo26-section .geo26-glow,
.geo26-section .geo26-glow-2{ opacity:.45 !important; }

.geo26-section .geo26-eyebrow{
  background: rgba(15,118,110,.10) !important;
  border: 1px solid rgba(15,118,110,.28) !important;
  color: var(--alt-teal) !important;
}
.geo26-section .geo26-dot{ background: var(--alt-teal) !important; }

.geo26-section .geo26-title,
.geo26-section .geo26-card-title{ color: var(--alt-title) !important; }

.geo26-section .geo26-subtitle,
.geo26-section .geo26-card-text{ color: var(--alt-text) !important; }

.geo26-section .geo26-card{
  background: var(--alt-card) !important;
  border: 1px solid var(--alt-stroke) !important;
  box-shadow: 0 6px 22px rgba(13,23,48,.07);
}
.geo26-section .geo26-cta-row{ border-top: 1px solid var(--alt-stroke) !important; }
.geo26-section .geo26-cta-note{ color: var(--alt-text-soft) !important; }

/* o CTA turquesa some no claro: vira sólido de alto contraste */
.geo26-section .geo26-cta-button{
  background: var(--alt-teal) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(15,118,110,.28);
}

/* ───────────────────────────────────────────────────────────────
   SEÇÃO 4 — .ivp  (marca premium)
   Não usa variáveis CSS: os tons vêm de rgba(255,255,255,…)
   hardcoded, então cada peça é reescrita explicitamente.
   ─────────────────────────────────────────────────────────────── */
.ivp{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(202,163,106,.16), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(125,211,252,.14), transparent 60%),
    linear-gradient(180deg, var(--alt-bg), var(--alt-bg-2)) !important;
  color: var(--alt-title) !important;
  border-top: 1px solid var(--alt-stroke);
  border-bottom: 1px solid var(--alt-stroke);
}
.ivp h2,
.ivp h3,
.ivp h4,
.ivp .rightTitle h3,
.ivp .callout b{ color: var(--alt-title) !important; }

.ivp .sub,
.ivp .card p,
.ivp .line em,
.ivp .note,
.ivp .mini,
.ivp .priceTag{ color: var(--alt-text) !important; }

.ivp .badge,
.ivp .chip,
.ivp .mini span{
  background: rgba(13,23,48,.05) !important;
  border: 1px solid var(--alt-stroke) !important;
  color: var(--alt-text) !important;
}
.ivp .dot{ background: var(--alt-gold) !important; }

.ivp .panel{
  background: linear-gradient(180deg, #fff, #f7fafe) !important;
  border: 1px solid var(--alt-stroke) !important;
  box-shadow: 0 10px 30px rgba(13,23,48,.07);
}
.ivp .card,
.ivp .line,
.ivp .tick{
  background: var(--alt-card) !important;
  border: 1px solid var(--alt-stroke) !important;
}
.ivp .card{ box-shadow: 0 6px 20px rgba(13,23,48,.06); }

.ivp .ico{
  background: rgba(168,127,61,.12) !important;
  border: 1px solid rgba(168,127,61,.28) !important;
}
.ivp .callout{
  background: rgba(168,127,61,.10) !important;
  border: 1px solid rgba(168,127,61,.30) !important;
}
.ivp .priceTag{ border: 1px solid var(--alt-stroke-2) !important; }
.ivp .sep{ background: var(--alt-stroke) !important; }

.ivp .btn{
  background: rgba(13,23,48,.04) !important;
  border: 1px solid var(--alt-stroke-2) !important;
  color: var(--alt-title) !important;
}
.ivp .btn.primary{
  background: linear-gradient(135deg, var(--alt-gold), #c9a15f) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ───────────────────────────────────────────────────────────────
   SEÇÃO 6 — .social-arts  (conteúdo visual)
   Esta seção é toda construída sobre variáveis CSS próprias:
   basta redefini-las no escopo dela e quase tudo se ajusta.
   ─────────────────────────────────────────────────────────────── */
.social-arts{
  --bg:     var(--alt-bg);
  --stroke: var(--alt-stroke);
  --card:   var(--alt-card);
  --text:   var(--alt-text);
  --title:  var(--alt-title);
  --accent: #0284c7;

  background: linear-gradient(180deg, var(--alt-bg), var(--alt-bg-2)) !important;
  color: var(--alt-title) !important;
  border-top: 1px solid var(--alt-stroke);
  border-bottom: 1px solid var(--alt-stroke);
}
.social-arts h2,
.social-arts h3,
.social-arts h4,
.social-arts .panel h3{ color: var(--alt-title) !important; }

.social-arts .sub,
.social-arts .features span,
.social-arts .mini{ color: var(--alt-text) !important; }

.social-arts .hero,
.social-arts .panel{
  background: linear-gradient(180deg, #fff, #f7fafe) !important;
  border: 1px solid var(--alt-stroke) !important;
  box-shadow: 0 10px 30px rgba(13,23,48,.07);
}
.social-arts .features li{
  background: var(--alt-card) !important;
  border: 1px solid var(--alt-stroke) !important;
}
.social-arts .badge,
.social-arts .pill,
.social-arts .mini span{
  background: rgba(13,23,48,.05) !important;
  border: 1px solid var(--alt-stroke) !important;
  color: var(--alt-text) !important;
}
.social-arts .ico{
  background: rgba(2,132,199,.12) !important;
  border: 1px solid rgba(2,132,199,.28) !important;
}
.social-arts .dot{ background: #0284c7 !important; }

.social-arts .btn{
  background: rgba(13,23,48,.04) !important;
  border: 1px solid var(--alt-stroke-2) !important;
  color: var(--alt-title) !important;
}
.social-arts .btn.primary{
  background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* ───────────────────────────────────────────────────────────────
   TEXTOS COM COR CLARA NO ATRIBUTO style=""
   Alguns trechos trazem a cor escrita direto no elemento
   (ex.: <span style="color:rgba(255,255,255,.78)">). Herança não
   os alcança e eles somem no fundo claro, então são capturados
   pelo próprio atributo. O seletor casa só quando a declaração
   começa em "color:", para não atingir background inline.
   ─────────────────────────────────────────────────────────────── */
.geo26-section [style*="color:#F5F7FA"],
.geo26-section [style*="color: #F5F7FA"],
.ivp [style*="color:#fff"],
.ivp [style*="color: #fff"],
.social-arts [style*="color:#fff"],
.social-arts [style*="color: #fff"]{
  color: var(--alt-title) !important;
}

.geo26-section [style*="color:#9CA8B4"],
.ivp [style*="color:rgba(255,255,255"],
.ivp [style*="color: rgba(255,255,255"],
.social-arts [style*="color:rgba(255,255,255"],
.social-arts [style*="color: rgba(255,255,255"]{
  color: var(--alt-text) !important;
}

/* amarelo do ícone de destaque perde força no claro */
.geo26-section [style*="color:#FACC15"]{ color:#a16207 !important; }

/* ───────────────────────────────────────────────────────────────
   COSTURA ENTRE SEÇÕES
   Sem isto, a passagem de uma faixa escura para uma clara fica
   com corte seco. Uma borda de 1px basta para separar sem peso.
   ─────────────────────────────────────────────────────────────── */
.ls-projects,
.dg-block,
.reviews-real{ border-top: 1px solid rgba(255,255,255,.07); }

/* ── Contraste do turquesa na seção clara ──
   #5EEAD4 foi pensado para fundo escuro: sobre o fundo claro desta
   seção rende 1,32:1, muito abaixo do mínimo de 3:1 exigido para
   texto grande. Trocado por --alt-teal (#0f766e), que dá 4,87:1 e
   passa em AA até para texto normal, mantendo a família de cor.
   Vale só dentro de .geo26-section — no restante do site, onde o
   fundo é escuro, o turquesa original continua valendo. */
.geo26-section [style*="color:#5EEAD4"],
.geo26-section [style*="color: #5EEAD4"]{
  color: var(--alt-teal) !important;
}