/* Componentes reutilizáveis — L3 Energia */

/* =========================================================
   Botões
   ========================================================= */
.l3-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.9rem 1.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-technical),
    box-shadow var(--dur-base) var(--ease-technical),
    background-color var(--dur-base) var(--ease-technical);
  white-space: nowrap;
}

.l3-btn:hover {
  transform: translateY(-2px);
}

.l3-btn:active {
  transform: translateY(0);
  filter: brightness(0.92);
  transition-duration: 0.05s;
}

.l3-btn:disabled,
.l3-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

.l3-btn--solar {
  background: var(--l3-solar);
  color: var(--l3-solar-text, #1a1204);
}
.l3-btn--solar:hover {
  box-shadow: var(--shadow-glow-solar);
}

.l3-btn--ghost {
  background: transparent;
  border-color: var(--l3-grid-line);
  color: var(--l3-white);
}
.l3-btn--ghost:hover {
  border-color: var(--l3-volt);
  box-shadow: var(--shadow-glow-volt);
}

.l3-btn--whatsapp {
  background: #1fae5c;
  color: #06170c;
}
.l3-btn--whatsapp:hover {
  box-shadow: 0 0 40px rgba(31, 174, 92, 0.35);
}

.l3-btn--block {
  width: 100%;
  justify-content: center;
}

/* =========================================================
   Bracket corners — motivo de assinatura (marcas de esquadro
   de desenho técnico), usado em painéis e cards importantes.
   ========================================================= */
.l3-bracket {
  position: relative;
}

.l3-bracket::before,
.l3-bracket::after,
.l3-bracket .l3-bracket-tr,
.l3-bracket .l3-bracket-bl {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--l3-volt);
  opacity: 0.7;
}
.l3-bracket::before {
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}
.l3-bracket::after {
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}

/* =========================================================
   Cards / painéis com glassmorphism sutil
   ========================================================= */
.l3-panel {
  background: linear-gradient(160deg, rgba(2, 2, 2, 0.98), rgba(8, 8, 8, 0.94));
  border: 1px solid var(--l3-grid-line);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-panel);
  backdrop-filter: blur(6px);
  /* Sem isso, quando o painel é item de um grid/flex (ex.: .l3-cta-form),
     ele não encolhe abaixo da largura mínima do conteúdo interno e
     estoura a página horizontalmente em telas estreitas. */
  min-width: 0;
}

.l3-card {
  background: rgba(2, 2, 2, 0.82);
  border: 1px solid var(--l3-grid-line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  backdrop-filter: blur(10px);
  transition: border-color var(--dur-base) var(--ease-technical),
    transform var(--dur-base) var(--ease-technical);
  min-width: 0;
}

.l3-card:hover {
  border-color: var(--l3-solar-glow);
  transform: translateY(-4px);
}

.l3-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--l3-grid-line);
  border-radius: var(--radius-sm);
  color: var(--l3-volt);
  margin-bottom: var(--space-4);
  transition: transform var(--dur-base) var(--ease-technical),
    color var(--dur-base) var(--ease-technical),
    border-color var(--dur-base) var(--ease-technical);
}

.l3-card:hover .l3-card__icon {
  transform: scale(1.08) rotate(-4deg);
  color: var(--l3-solar);
  border-color: var(--l3-solar-glow);
}

/* Cards que são links de verdade (ex.: hub de Soluções, cards de
   Projeto) ganham uma seta que desliza a partir da borda no hover —
   afordance de "isso leva a algum lugar" sem precisar de markup extra.
   Só em <a>, nunca em cards estáticos (Missão/Visão/Valores etc.). */
a.l3-card,
a.l3-project-card {
  position: relative;
  overflow: hidden;
}

a.l3-card:not(:has(.l3-arrow-link))::after,
a.l3-project-card:not(:has(.l3-arrow-link))::after {
  content: "→";
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--l3-solar);
  opacity: 0;
  transform: translateX(-0.6rem);
  transition: transform var(--dur-base) var(--ease-technical),
    opacity var(--dur-base) var(--ease-technical);
  pointer-events: none;
}

a.l3-card:hover::after,
a.l3-project-card:hover::after {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  a.l3-card:not(:has(.l3-arrow-link))::after,
  a.l3-project-card:not(:has(.l3-arrow-link))::after {
    transition: opacity var(--dur-fast) linear;
    transform: none;
  }
}

/* =========================================================
   Link com seta animada (arrow-link) — ícone e texto entram
   separadamente no hover: a seta desliza da esquerda, o texto muda
   pra cor solar. Usar em qualquer "Ver mais →" do site.
   ========================================================= */
.l3-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.l3-arrow-link__icon {
  display: inline-flex;
  transition: transform var(--dur-base) var(--ease-technical),
    opacity var(--dur-base) var(--ease-technical);
  transform: translateX(-0.65rem);
  opacity: 0;
  color: var(--l3-solar);
}

.l3-arrow-link__text {
  transition: color var(--dur-base) var(--ease-technical),
    transform var(--dur-base) var(--ease-technical);
}

a:hover .l3-arrow-link__icon,
button:hover .l3-arrow-link__icon,
.l3-arrow-link:hover .l3-arrow-link__icon,
.l3-solution-card:hover .l3-arrow-link__icon {
  transform: translateX(0);
  opacity: 1;
}

a:hover .l3-arrow-link__text,
button:hover .l3-arrow-link__text,
.l3-arrow-link:hover .l3-arrow-link__text,
.l3-solution-card:hover .l3-arrow-link__text {
  color: var(--l3-solar);
  transform: translateX(0.15rem);
}

@media (prefers-reduced-motion: reduce) {
  .l3-arrow-link__icon {
    transition: opacity var(--dur-fast) linear;
    transform: none;
  }
  .l3-arrow-link__text {
    transform: none;
  }
}

.l3-card__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--l3-solar);
  font-size: var(--fs-h3);
  margin-bottom: var(--space-2);
  /* Título longo numa coluna estreita (grid de 3-4) quebra com hífen em
     vez de partir a palavra no meio sem aviso. */
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* =========================================================
   Stat / readout — numerais em mono, estética de instrumento
   ========================================================= */
.l3-stat {
  border-top: 1px solid var(--l3-grid-line);
  padding-top: var(--space-4);
}

.l3-stat__value {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 3vw, 3rem);
  color: var(--l3-solar);
  display: block;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.l3-stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--l3-mist-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.l3-stat__placeholder-flag {
  display: inline-block;
  margin-left: var(--space-2);
  font-size: 0.65rem;
  color: var(--l3-mist-faint);
  border: 1px dashed var(--l3-mist-faint);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  text-transform: none;
  letter-spacing: 0;
}

/* =========================================================
   Badge / tag
   ========================================================= */
.l3-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3em 0.7em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--l3-grid-line);
  /* Sem isso, um <button class="l3-badge"> (não <a>) herda o cinza
     claro padrão do navegador pra botão, quebrando o contraste do
     texto — que foi pensado pra fundo escuro. */
  background: transparent;
  color: var(--l3-mist);
  transition: color var(--dur-base) var(--ease-technical),
    border-color var(--dur-base) var(--ease-technical),
    transform var(--dur-fast) var(--ease-technical);
}

a.l3-badge:hover {
  color: var(--l3-solar);
  border-color: var(--l3-solar-glow);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  a.l3-badge:hover {
    transform: none;
  }
}

.l3-badge--volt {
  color: var(--l3-volt);
  border-color: rgba(120, 148, 166, 0.42);
}
.l3-badge--solar {
  color: var(--l3-solar-label, var(--l3-solar));
  border-color: rgba(242, 179, 61, 0.4);
}

/* =========================================================
   Cursor customizado (site inteiro, só com ponteiro fino e sem
   prefers-reduced-motion — ver main.js). Ponto que segue o mouse
   com leve atraso e expande num anel ao passar sobre links/cards.
   ========================================================= */
body.l3-has-custom-cursor,
body.l3-has-custom-cursor a,
body.l3-has-custom-cursor button {
  cursor: none;
}

.l3-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--l3-volt);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: width var(--dur-base) var(--ease-technical), height var(--dur-base) var(--ease-technical),
    background-color var(--dur-base) var(--ease-technical), border-color var(--dur-base) var(--ease-technical),
    opacity var(--dur-fast) linear;
}

.l3-cursor.is-visible {
  opacity: 1;
}

.l3-cursor--hover {
  width: 52px;
  height: 52px;
  background: rgba(120, 148, 166, 0.12);
  border: 1px solid var(--l3-volt);
}

.l3-cursor__label {
  display: none;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.l3-cursor--label {
  width: 96px;
  height: 96px;
  background: var(--l3-void);
  border: 1px solid var(--l3-solar);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--l3-solar);
}

.l3-cursor--label .l3-cursor__label {
  display: block;
}

/* Lista de garantias — reduz o atrito percebido bem antes do CTA
   final (reversão de risco: sem custo, sem compromisso). */
.l3-guarantee-list {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.l3-guarantee-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--l3-mist);
  font-size: var(--fs-small);
}

.l3-guarantee-list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--l3-success);
}

/* =========================================================
   Faixa de WhatsApp (meio de funil) — leve, sem seção pesada,
   pega quem já rolou até projetos e tem intenção alta.
   ========================================================= */
.l3-whatsapp-strip {
  border-top: 1px solid var(--l3-grid-line);
  border-bottom: 1px solid var(--l3-grid-line);
  background: var(--l3-void-2);
  padding-block: var(--space-6);
}

.l3-whatsapp-strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.l3-whatsapp-strip__row p {
  margin: 0;
  color: var(--l3-white);
  font-size: var(--fs-body);
  max-width: 42ch;
}

/* =========================================================
   Header / navegação
   ========================================================= */
.l3-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--l3-grid-line-soft);
}

/* Faixa fina de idioma, separada da navegação principal pra não
   apertar ainda mais o header (que já tem 6 links + 2 botões). */
.l3-lang-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--l3-grid-line-soft);
}

.l3-lang-bar__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--l3-mist-faint);
  margin-right: var(--space-1);
}

.l3-lang-bar__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  line-height: 1;
  padding: 0.32rem 0.44rem;
  border-radius: var(--radius-sm);
  color: var(--l3-mist);
  border: 1px solid transparent;
  filter: grayscale(1);
  opacity: 0.55;
  transition:
    color var(--dur-base) var(--ease-technical),
    border-color var(--dur-base) var(--ease-technical),
    filter var(--dur-base) var(--ease-technical),
    opacity var(--dur-base) var(--ease-technical);
}

.l3-lang-bar__flag:hover {
  filter: grayscale(0.4);
  opacity: 0.85;
  color: var(--l3-white);
  border-color: var(--l3-grid-line);
}

/* Abaixo do breakpoint do menu hambúrguer (mesmo ponto de corte do
   .l3-nav-toggle), a barra de idioma também é alvo de toque — precisa
   de pelo menos 44px de altura. No desktop o badge compacto atual
   fica como está. */
@media (max-width: 1179px) {
  .l3-lang-bar__flag {
    min-height: 44px;
  }

  /* Mesma lógica pros links de navegação e legais do rodapé, que no
     mobile também funcionam como alvo de toque, não texto corrido. */
  .l3-footer nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.l3-lang-bar__flag.is-active {
  filter: grayscale(0);
  opacity: 1;
  background: var(--l3-solar-glow);
  border-color: var(--l3-solar-dim);
  color: var(--l3-white);
}

.l3-lang-bar__flag-icon {
  font-size: 0.95rem;
}

.l3-lang-bar__flag-code {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  font-weight: 700;
}

@media (max-width: 820px) {
  .l3-lang-bar {
    justify-content: flex-start;
  }
}

.l3-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  gap: var(--space-6);
}

@media (min-width: 1180px) {
  /* Nav à esquerda, ações à direita, fluindo livremente (flex normal).
     A logo NÃO participa desse fluxo — fica posicionada de forma
     absoluta e sempre centralizada de verdade, não importa quantos
     itens o menu tenha. Colunas de largura igual (1fr/1fr) quebravam
     porque o menu (6 itens) e as ações (1-2 botões) nunca têm o mesmo
     tamanho de conteúdo. */
  .l3-header__inner {
    position: relative;
  }
  .l3-header__inner .l3-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: auto;
  }
}

.l3-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--l3-white);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.l3-logo img {
  height: 48px;
  width: auto;
}
.l3-logo .l3-brand-image {
  height: clamp(58px, 5.4vw, 82px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 14px var(--l3-solar-glow));
}
.l3-logo span {
  color: var(--l3-solar);
}

/* =========================================================
   Lockup ícone + texto (mercado .py) — o arquivo de logo combinado
   do .br tem o texto cravado em contorno vetorial (sem fonte
   extraível), então pro .py separamos ícone (arquivo próprio) de
   texto (HTML real, sempre correto/traduzível). Ver template-parts/logo.php.
   ========================================================= */
.l3-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  line-height: 1;
}
.l3-brand-lockup__icon {
  height: clamp(48px, 4.6vw, 68px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 14px var(--l3-solar-glow));
}
.l3-brand-lockup__type {
  display: flex;
  flex-direction: column;
  gap: 0.22em;
}
.l3-brand-lockup__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.4vw, 1.5rem);
  letter-spacing: 0.01em;
  color: var(--l3-white);
  text-transform: uppercase;
}
.l3-brand-lockup__tagline {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.6rem, 0.6vw, 0.72rem);
  letter-spacing: 0.05em;
  color: var(--l3-solar-label, var(--l3-solar));
  text-transform: uppercase;
  white-space: nowrap;
}

/* =========================================================
   Marca L3 — lockup raio + "L3" + ENERGIA (template-parts/logo.php)
   Escala inteira por em: o pai (.l3-logo) define o tamanho.
   ========================================================= */
.l3-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  line-height: 1;
}

.l3-brand__bolt {
  height: 2.1em;
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px var(--l3-ember-glow));
}

.l3-brand__type {
  display: flex;
  flex-direction: column;
  gap: 0.14em;
}

.l3-brand__l3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5em;
  letter-spacing: -0.02em;
  transform: skewX(-6deg); /* itálico sintético: energia/velocidade */
  display: inline-block;
}

/* Assinatura preservada do logo original: L laranja/amarelo, 3 branco */
.l3-brand__l {
  background: linear-gradient(135deg, var(--l3-solar) 15%, var(--l3-ember) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.l3-brand__3 {
  color: var(--l3-white);
}

.l3-brand__word {
  font-family: var(--font-mono);
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0.5em;
  text-indent: 0.06em;
  color: var(--l3-mist-dim);
  text-transform: uppercase;
}

a.l3-logo:hover .l3-brand__bolt,
a.l3-logo:focus-visible .l3-brand__bolt {
  filter: drop-shadow(0 0 16px var(--l3-ember-glow)) brightness(1.12);
  transition: filter var(--dur-base) var(--ease-technical);
}

.l3-nav {
  display: none;
}

@media (min-width: 1180px) {
  .l3-nav {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: clamp(var(--space-2), 1.2vw, var(--space-6));
    flex-shrink: 1;
  }
  .l3-nav a {
    font-size: clamp(0.72rem, 0.5vw + 0.6rem, var(--fs-small));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--l3-mist);
    position: relative;
    padding-bottom: 4px;
    white-space: nowrap;
  }
  .l3-nav a:hover,
  .l3-nav a.current-menu-item {
    color: var(--l3-white);
  }
  .l3-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    background: var(--l3-volt);
    transition: width var(--dur-base) var(--ease-technical);
  }
  .l3-nav a:hover::after {
    width: 100%;
  }
}

.l3-header__actions {
  display: none;
  align-items: center;
  gap: var(--space-3);
}

@media (min-width: 1180px) {
  .l3-header__actions {
    display: flex;
  }
}

.l3-btn--pill {
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.4rem;
}

.l3-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--l3-grid-line);
  border-radius: var(--radius-sm);
  color: var(--l3-white);
}
@media (min-width: 1180px) {
  .l3-nav-toggle {
    display: none;
  }
}

.l3-mobile-menu {
  display: none;
  flex-direction: column;
  padding: var(--space-6) var(--container-pad) var(--space-8);
  border-top: 1px solid var(--l3-grid-line-soft);
  background: #000;
}
.l3-mobile-menu.is-open {
  display: flex;
}
.l3-mobile-menu a {
  display: flex;
  align-items: center;
  /* Alvo de toque de pelo menos 44px de altura (linha de base de
     acessibilidade mobile), não só o tamanho natural do texto. */
  min-height: 44px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.25rem;
  color: var(--l3-white);
}

/* =========================================================
   Botão flutuante do WhatsApp
   ========================================================= */
.l3-whatsapp-float {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-whatsapp);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: #1fae5c;
  color: #06170c;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 32px rgba(31, 174, 92, 0.35);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  transition: transform var(--dur-fast) var(--ease-technical);
}
.l3-whatsapp-float:hover {
  transform: translateY(-3px) scale(1.02);
}
.l3-whatsapp-float svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-technical);
}
.l3-whatsapp-float:hover svg {
  transform: rotate(-8deg) scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
  .l3-whatsapp-float:hover svg {
    transform: none;
  }
}

/* =========================================================
   Formulários
   ========================================================= */
.l3-form {
  display: grid;
  gap: var(--space-4);
}

.l3-form__head {
  margin-bottom: var(--space-2);
}

.l3-form__head h3 {
  margin: 0 0 var(--space-3);
  color: var(--l3-white);
  font-size: clamp(1.45rem, 1vw + 1.15rem, 2rem);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.l3-form__head p:not(.l3-eyebrow) {
  margin: 0;
  color: var(--l3-mist);
  line-height: var(--lh-body);
}

.l3-field {
  margin-bottom: 0;
}

.l3-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--l3-mist-dim);
  margin-bottom: var(--space-2);
}

.l3-field input,
.l3-field select,
.l3-field textarea {
  width: 100%;
  background: rgba(2, 2, 2, 0.72);
  border: 1px solid rgba(201, 211, 224, 0.16);
  border-radius: var(--radius-sm);
  padding: 0.92rem 1rem;
  color: var(--l3-white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  transition: border-color var(--dur-base) var(--ease-technical),
    background-color var(--dur-base) var(--ease-technical),
    box-shadow var(--dur-base) var(--ease-technical);
}

.l3-field select {
  /* selects precisam de algum contraste de fundo para as opções nativas */
  background-color: rgba(2, 2, 2, 0.9);
}

.l3-field input:focus-visible,
.l3-field select:focus-visible,
.l3-field textarea:focus-visible {
  outline: none;
  border-color: var(--l3-volt);
  background-color: rgba(8, 8, 8, 0.95);
  box-shadow: 0 0 0 3px rgba(120, 148, 166, 0.16);
}

.l3-field--checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid rgba(201, 211, 224, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(2, 2, 2, 0.58);
}
.l3-field--checkbox input {
  width: auto;
  margin-top: 0.3em;
}
.l3-field--checkbox label {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--l3-mist);
}

.l3-form__privacy {
  margin: calc(var(--space-2) * -1) 0 0;
  color: var(--l3-mist-dim);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.l3-field--honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.l3-form-msg {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  margin-top: 0;
  display: none;
}
.l3-form-msg.is-visible {
  display: block;
}
.l3-form-msg--success {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid var(--l3-success);
  color: var(--l3-success);
}
.l3-form-msg--error {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid var(--l3-error);
  color: var(--l3-error);
}

/* Handoff pro WhatsApp após o envio ter sucesso: some por padrão,
   aparece só quando a resposta confirma o cadastro do lead. */
.l3-whatsapp-handoff {
  display: none;
  margin-top: var(--space-3);
  animation: l3-handoff-in var(--dur-slow) var(--ease-technical);
}
.l3-whatsapp-handoff.is-visible {
  display: flex;
}

@keyframes l3-handoff-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .l3-whatsapp-handoff {
    animation: none;
  }
}

/* =========================================================
   Acordeão (FAQ)
   ========================================================= */
.l3-accordion-item {
  border-bottom: 1px solid var(--l3-grid-line);
}

.l3-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  background: none;
  border: none;
  color: var(--l3-white);
  text-align: left;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.1rem;
  padding: var(--space-6) 0;
  cursor: pointer;
}

.l3-accordion-trigger .l3-accordion-icon {
  font-family: var(--font-mono);
  color: var(--l3-volt);
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-technical);
}

.l3-accordion-item[data-open="true"] .l3-accordion-icon {
  transform: rotate(45deg);
}

.l3-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-technical);
}

.l3-accordion-panel__inner {
  padding-bottom: var(--space-6);
  color: var(--l3-mist);
}

/* =========================================================
   Lista editorial — substitui grids de card-com-borda por uma
   lista tipográfica com índice grande. Usada onde o conteúdo é
   uma lista de razões/diferenciais, não uma sequência de passos.
   ========================================================= */
.l3-editorial-list {
  border-top: 1px solid var(--l3-grid-line);
}

.l3-editorial-item {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--l3-grid-line);
  transition: padding-left var(--dur-base) var(--ease-technical);
}

/* Só 2 colunas definidas (índice + título) pra 3 itens no DOM: sem
   isso o texto (3º item) caía sozinho na coluna de 4rem e quebrava em
   dezenas de linhas — um parágrafo normal virava 600px+ de altura no
   mobile. O texto precisa ocupar a largura inteira, numa linha própria. */
.l3-editorial-item__text {
  grid-column: 1 / -1;
}

@media (min-width: 700px) {
  .l3-editorial-item {
    grid-template-columns: 6rem 1fr 1fr;
    align-items: baseline;
  }

  .l3-editorial-item__text {
    grid-column: auto;
  }
}

.l3-editorial-item:hover {
  padding-left: var(--space-3);
}

.l3-editorial-item__index {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--l3-volt);
}

.l3-editorial-item__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem);
  color: var(--l3-solar);
  text-shadow: 0 0 16px var(--l3-solar-glow);
  letter-spacing: var(--ls-display);
  margin: 0;
  transition: text-shadow var(--dur-base) var(--ease-technical);
}

.l3-editorial-item:hover .l3-editorial-item__title {
  text-shadow: 0 0 26px var(--l3-solar-glow);
}

.l3-editorial-item__text {
  color: var(--l3-mist-dim);
  font-size: var(--fs-body);
  max-width: 42ch;
  margin: 0;
}

/* =========================================================
   Galeria horizontal (soluções / projetos) — scroll-snap em vez
   de grid fixo, para mídia grande sem virar "grade de cards".
   ========================================================= */
.l3-hgallery {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-4);
  margin-inline: calc(var(--container-pad) * -1);
  padding-inline: var(--container-pad);
  scrollbar-width: thin;
  scrollbar-color: var(--l3-grid-line) transparent;
}

.l3-hgallery__item {
  scroll-snap-align: start;
  flex: 0 0 min(78vw, 460px);
}

/* =========================================================
   Deck de cards com scroll-scrub — os cards começam empilhados no
   centro (baralho levemente girado) e se espalham um a um para as
   posições finais conforme a seção avança no scroll. A classe
   .l3-deck--active só é aplicada via JS em desktop sem
   prefers-reduced-motion; sem ela, o layout fica o padrão estático.
   Ver módulo "deck" em main.js.
   ========================================================= */
.l3-deck--active {
  /* pista de rolagem: quanto maior, mais lenta a coreografia; cada
     seção pode encurtar via --l3-deck-runway no style inline */
  min-height: var(--l3-deck-runway, 280vh);
  padding-block: 0;
}

.l3-deck--active .l3-deck__sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-12);
}

.l3-deck--active .l3-section-head {
  margin-bottom: var(--space-8);
}

.l3-deck--active [data-l3-deck-card] {
  will-change: transform;
  /* O scrub controla o transform frame a frame via JS; qualquer
     transition de transform aqui viraria "borracha" atrasada. */
  transition: border-color var(--dur-base) var(--ease-technical);
}

/* Na home, dentro do deck ativo a galeria horizontal vira grid de 4
   colunas (as posições finais do espalhamento) e o card encolhe para
   caber junto com o título na dobra fixa. */
@media (min-width: 900px) {
  .l3-deck--active .l3-hgallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }

  .l3-deck--active .l3-hgallery__item {
    flex: none;
  }

  .l3-deck--active .l3-solution-card {
    min-height: min(56vh, 480px);
  }
}

/* =========================================================
   Diferenciais — lista que se inclina em perspectiva 3D conforme
   passa pelo centro da tela (scroll), estilo "leaderboard" em vez
   de mais uma lista numerada estática. Ver updateDiffTilt em main.js.
   ========================================================= */
.l3-diff3d {
  position: relative;
  padding-block: var(--space-32);
  background: #000;
  overflow: hidden;
}

.l3-diff3d__list {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-block: var(--space-16);
}

.l3-diff3d__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

.l3-diff3d__index {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  color: var(--l3-volt);
  flex-shrink: 0;
}

.l3-diff3d__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 3.25rem);
  line-height: var(--lh-tight);
  color: var(--l3-white);
  max-width: 20ch;
}

/* Plano Connect — oferta distinta (assinatura de energia, sem
   instalação), merece destaque próprio dentro de "Por que investir",
   não apenas mais um item da lista editorial. */
.l3-connect {
  margin-top: var(--space-16);
  display: grid;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--l3-grid-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(2, 2, 2, 0.98), rgba(8, 8, 8, 0.94));
}

@media (min-width: 860px) {
  .l3-connect {
    grid-template-columns: 1.3fr 1fr;
    align-items: center;
  }
}

.l3-connect__title {
  font-size: var(--fs-h2);
  margin-block: var(--space-3) var(--space-4);
}

.l3-connect__text {
  color: var(--l3-mist);
  max-width: 46ch;
  margin-bottom: var(--space-6);
}

.l3-connect__compare {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.l3-connect__compare-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--l3-grid-line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  color: var(--l3-mist-dim);
}

.l3-connect__compare-row--highlight {
  border-color: color-mix(in srgb, var(--l3-solar) 52%, transparent);
  background: color-mix(in srgb, var(--l3-solar) 6%, transparent);
  color: var(--l3-white);
}

.l3-connect__compare-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--l3-solar);
}

/* "Voto" de pós-venda — declaração de compromisso, não mais uma
   linha da tabela. Merece destaque próprio. */
.l3-vow {
  position: relative;
  margin-top: var(--space-12);
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-12);
  border-left: 2px solid var(--l3-solar);
}

.l3-vow::before {
  content: "”";
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--l3-solar);
  opacity: 0.35;
}

.l3-vow__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.2vw + 0.9rem, 1.6rem);
  line-height: var(--lh-snug);
  color: var(--l3-white);
  max-width: 52ch;
  margin: 0;
}

/* =========================================================
   Scroll-story ("Como funciona" com vídeo sincronizado ao scroll)
   Progressive enhancement: por padrão a seção é o rail estático de
   sempre (.l3-process). Só quando o JS confirma desktop + sem
   prefers-reduced-motion é que a classe --active entra e liga o
   vídeo em segundo plano com scrubbing pelo scroll.
   ========================================================= */
.l3-scrollstory {
  position: relative;
}

/* Estado padrão (sem JS de scrub, mobile, ou reduced-motion): a seção
   é só um bloco de conteúdo normal, com o mesmo respiro de qualquer
   outra .l3-section — nada de vídeo, nada de altura esticada. */
.l3-scrollstory__sticky {
  padding-block: var(--space-24);
}

.l3-scrollstory__media {
  display: none;
}

.l3-scrollstory--active {
  height: 480vh;
}

.l3-scrollstory--active .l3-scrollstory__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding-block: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.l3-scrollstory--active .l3-scrollstory__media {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
}

.l3-scrollstory__media video,
.l3-scrollstory__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l3-scrollstory--active .l3-scrollstory__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.7) 45%, rgba(0, 0, 0, 0.55) 100%);
}

.l3-scrollstory .l3-section-head {
  position: relative;
  z-index: 2;
}

.l3-scrollstory .l3-section-head h2 {
  color: var(--l3-solar);
  opacity: 1;
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.95),
    0 0 34px var(--l3-solar-glow);
}

.l3-scrollstory--active .l3-section-head {
  width: fit-content;
  padding: var(--space-4) var(--space-6);
  background: rgba(0, 0, 0, 0.58);
  border-left: 2px solid var(--l3-solar);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
}

/* Só um passo por vez, nunca os 5 empilhados: menos ruído visual e
   uma transição só (crossfade), não cinco opacidades mudando junto,
   que era o que estava "travando" a leitura. */
.l3-scrollstory--active .l3-process {
  position: relative;
  z-index: 2;
  display: block;
  min-height: 200px;
}

.l3-scrollstory--active .l3-process__step {
  position: absolute;
  inset: 0;
  padding: var(--space-6) var(--space-8);
  max-width: 34rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  background: rgba(2, 2, 2, 0.82);
  border-left: 2px solid var(--l3-volt);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px);
  transition: opacity var(--dur-base) var(--ease-technical), transform var(--dur-base) var(--ease-technical),
    visibility 0s linear var(--dur-base);
}

.l3-scrollstory--active .l3-process__step::before,
.l3-scrollstory--active .l3-process__step::after {
  display: none;
}

.l3-scrollstory--active .l3-process__step.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-base) var(--ease-technical), transform var(--dur-base) var(--ease-technical);
}

.l3-scrollstory--active .l3-process__title {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7);
}

.l3-scrollstory--active .l3-process__desc {
  color: var(--l3-mist);
}

/* Indicador de progresso: substitui "ver os 5 de uma vez" por um
   contador discreto que ainda mostra onde você está na sequência.
   Só faz sentido no modo scrub (um passo por vez); no estado padrão
   (fallback estático) os 5 passos já aparecem juntos, então o
   indicador fica escondido. */
.l3-scrollstory__progress {
  display: none;
}

.l3-scrollstory--active .l3-scrollstory__progress {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--l3-mist-dim);
}

.l3-scrollstory__progress-dots {
  display: flex;
  gap: var(--space-2);
}

.l3-scrollstory__progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--l3-grid-line);
  transition: background var(--dur-base) var(--ease-technical), transform var(--dur-base) var(--ease-technical);
}

.l3-scrollstory__progress-dot.is-active {
  background: var(--l3-volt);
  transform: scale(1.4);
}

.l3-scrollstory__brand-reveal {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  background: #000;
}

.l3-scrollstory__brand-reveal .l3-logo {
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: 0.04em;
}

/* =========================================================
   Rail de processo ("Como funciona")
   ========================================================= */
.l3-process {
  display: grid;
  gap: var(--space-8);
  counter-reset: l3-step;
}

@media (min-width: 900px) {
  .l3-process {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
  }
}

.l3-process__step {
  counter-increment: l3-step;
  position: relative;
  padding-top: var(--space-8);
}

.l3-process__step::before {
  content: counter(l3-step, decimal-leading-zero);
  font-family: var(--font-mono);
  color: var(--l3-volt);
  font-size: var(--fs-small);
  position: absolute;
  top: 0;
  left: 0;
}

.l3-process__step::after {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 2.4em;
  right: -1rem;
  height: 1px;
  background: var(--l3-grid-line);
}

@media (max-width: 899px) {
  .l3-process__step::after {
    display: none;
  }
}

.l3-process__step:last-child::after {
  display: none;
}

.l3-process__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--l3-white);
  font-size: 1.15rem;
  margin-bottom: var(--space-2);
}

.l3-process__desc {
  font-size: var(--fs-small);
  color: var(--l3-mist-dim);
}