/* Home — L3 Energia */

/* =========================================================
   Hero cinematográfico (claim gooey em fundo preto)
   ========================================================= */
.l3-hero-cinematic {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

.l3-hero-cinematic::before,
.l3-hero-cinematic::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.l3-hero-cinematic::before {
  z-index: -2;
  opacity: 0.38;
  background:
    radial-gradient(circle at 50% 51%, color-mix(in srgb, var(--l3-solar) 16%, transparent), transparent 18rem),
    radial-gradient(circle at 52% 50%, color-mix(in srgb, var(--l3-ember) 10%, transparent), transparent 31rem),
    #000;
}

.l3-hero-cinematic::after {
  z-index: -1;
  opacity: 0.28;
  background-image:
    linear-gradient(color-mix(in srgb, var(--l3-solar) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 148, 166, 0.03) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 72%);
}

.l3-hero-sun {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.l3-hero-sun__fallback,
.l3-hero-sun__canvas,
.l3-hero-sun__canvas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.l3-hero-sun__fallback {
  opacity: 0.72;
  background:
    radial-gradient(circle at 50% 49%, rgba(255, 239, 196, 0.7) 0 2.5rem, color-mix(in srgb, var(--l3-solar) 66%, transparent) 6rem, color-mix(in srgb, var(--l3-ember) 34%, transparent) 14rem, transparent 28rem),
    #000;
  filter: saturate(1.25);
}

.l3-hero-sun__canvas {
  opacity: 0.78;
  mix-blend-mode: screen;
}

.l3-hero-sun__canvas canvas {
  display: block;
  transform: translateY(2%);
}

.l3-hero-sun::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 12rem, rgba(0, 0, 0, 0.18) 24rem, rgba(0, 0, 0, 0.78) 45rem),
    linear-gradient(180deg, rgba(0, 0, 0, 0.48), transparent 38%, rgba(0, 0, 0, 0.58));
}

.l3-hero-sun.is-webgl-unavailable .l3-hero-sun__fallback {
  opacity: 0.86;
}

.l3-gooey-hero {
  position: relative;
  z-index: 2;
  width: min(100%, 76rem);
  min-height: 22rem;
  display: grid;
  place-items: center;
  padding-inline: var(--container-pad);
}

.l3-gooey-hero__filter {
  position: absolute;
  width: 0;
  height: 0;
}

.l3-gooey-hero__stage {
  position: relative;
  width: 100%;
  min-height: clamp(8rem, 18vw, 16rem);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: url("#l3-gooey-threshold");
}

.l3-gooey-hero__stage span,
.l3-gooey-hero__noscript {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100%, 13ch);
  transform: translate(-50%, -50%);
  color: var(--l3-white);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 10.5vw, 11.4rem);
  font-weight: 760;
  line-height: 0.86;
  letter-spacing: 0;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow:
    0 0 0.04em rgba(255, 255, 255, 0.55),
    0 0 0.42em rgba(242, 179, 61, 0.34),
    0 0 1.2em rgba(255, 138, 30, 0.18);
  will-change: filter, opacity;
}

.l3-gooey-hero__stage span:first-child {
  opacity: 1;
}

.l3-gooey-hero__stage span:last-child {
  opacity: 0;
}

.l3-gooey-hero__noscript {
  position: static;
  display: block;
  transform: none;
  width: min(100%, 15ch);
}

@media (max-width: 820px) {
  .l3-hero-sun__fallback {
    background:
      radial-gradient(circle at 50% 50%, rgba(255, 239, 196, 0.58) 0 1.8rem, color-mix(in srgb, var(--l3-solar) 58%, transparent) 4.8rem, color-mix(in srgb, var(--l3-ember) 30%, transparent) 11rem, transparent 22rem),
      #000;
  }

  .l3-hero-sun__canvas {
    opacity: 0.66;
  }

  .l3-gooey-hero {
    min-height: 18rem;
  }

  .l3-gooey-hero__stage {
    min-height: 11rem;
  }

  .l3-gooey-hero__stage span,
  .l3-gooey-hero__noscript {
    width: min(100%, 10ch);
    font-size: clamp(2.2rem, 7.8vw, 2.45rem);
    line-height: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l3-hero-sun__canvas {
    display: none;
  }

  .l3-gooey-hero__stage {
    filter: none;
  }
}

.l3-ticker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
  font-family: var(--font-mono);
}

.l3-ticker-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.l3-ticker-item strong {
  font-size: 1.4rem;
  color: var(--l3-solar);
  font-variant-numeric: tabular-nums;
}

.l3-ticker-item span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--l3-mist-dim);
}

.l3-ticker-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--l3-mist-dim);
}

/* Antigo bloco lado-a-lado, mantido para reuso em páginas internas
   (soluções) que ainda usam --hero-bg como imagem estática. */
.l3-hero {
  position: relative;
  padding-block: var(--space-16) var(--space-24);
  overflow: hidden;
  background-image:
    linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.9) 38%, rgba(0, 0, 0, 0.62) 65%, rgba(0, 0, 0, 0.46) 100%),
    var(--hero-bg, none);
  background-size: cover;
  background-position: center;
}

.l3-hero::before {
  /* Vinheta radial sutil para dar profundidade sem virar gradiente vistoso */
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 700px;
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--l3-solar) 12%, transparent), transparent 65%);
  pointer-events: none;
}

/* --- Indicador "ao vivo" reaproveitado no ticker do hero --- */
.l3-readout__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--l3-success);
  display: inline-block;
  margin-right: 6px;
  box-shadow: 0 0 8px var(--l3-success);
  animation: l3-pulse 2s ease-in-out infinite;
}

@keyframes l3-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

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

/* =========================================================
   Números reais — gráfico-foguete da economia acumulada
   Assinatura visual da home: uma curva que só sobe, desenhada
   pelo GSAP com um foguete na ponta (assets/js/home-metrics.js).
   ========================================================= */
.l3-metrics {
  border-top: 1px solid var(--l3-grid-line);
  border-bottom: 1px solid var(--l3-grid-line);
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(255, 138, 30, 0.07), transparent 55%),
    var(--l3-void-2);
  padding-block: var(--space-24);
}

.l3-metrics__panel {
  position: relative;
  margin: var(--space-12) 0 0;
  padding: clamp(var(--space-6), 4vw, var(--space-12));
  background: rgba(2, 2, 2, 0.9);
  border: 1px solid var(--l3-grid-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.l3-metrics__readout {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.l3-metrics__currency {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  color: var(--l3-ember);
}

.l3-metrics__value {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1;
  color: var(--l3-white);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 32px var(--l3-ember-glow);
}

.l3-metrics__readout-label {
  margin: var(--space-2) 0 var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--l3-mist-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.l3-metrics__chart {
  display: block;
  width: 100%;
  height: auto;
}

.l3-metrics__grid line {
  stroke: var(--l3-grid-line-soft);
  stroke-width: 1;
}

.l3-metrics__grid text {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--l3-mist-faint);
  text-anchor: end;
}

.l3-metrics__grid .l3-metrics__year {
  text-anchor: middle;
}

.l3-metrics__target line {
  stroke: var(--l3-ember);
  stroke-width: 1;
  stroke-dasharray: 6 8;
  opacity: 0.55;
}

.l3-metrics__target text {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--l3-ember);
  text-anchor: start;
}

/* Cards de apoio: mini-visualizações por métrica */
.l3-metrics__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}

@media (max-width: 820px) {
  .l3-metrics__cards {
    grid-template-columns: 1fr;
  }
}

.l3-metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: rgba(2, 2, 2, 0.84);
  border: 1px solid var(--l3-grid-line);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-technical),
    transform var(--dur-base) var(--ease-technical);
}

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

.l3-metric-card__value {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 3vw, 2.9rem);
  font-weight: 600;
  color: var(--l3-solar);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

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

.l3-metric-card__viz {
  height: 44px;
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.l3-metric-card__viz--bars span {
  display: block;
  width: 12px;
  background: linear-gradient(180deg, var(--l3-ember), var(--l3-solar-dim));
  border-radius: 2px 2px 0 0;
}

.l3-metric-card__viz--bars span:nth-child(1) { height: 30%; }
.l3-metric-card__viz--bars span:nth-child(2) { height: 45%; }
.l3-metric-card__viz--bars span:nth-child(3) { height: 60%; }
.l3-metric-card__viz--bars span:nth-child(4) { height: 80%; }
.l3-metric-card__viz--bars span:nth-child(5) { height: 100%; }

.l3-metric-card__viz--dots {
  align-items: center;
}

.l3-metric-card__viz--dots span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--l3-ember);
  box-shadow: 0 0 12px var(--l3-ember-glow);
}

.l3-metric-card__ring {
  width: 44px;
  height: 44px;
  transform: rotate(-90deg);
}

.l3-metric-card__ring-track,
.l3-metric-card__ring-fill {
  fill: none;
  stroke-width: 6;
}

.l3-metric-card__ring-track {
  stroke: var(--l3-grid-line);
}

.l3-metric-card__ring-fill {
  stroke: var(--l3-ember);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 20; /* 80%: 4 anos de uma régua de 5 */
}

/* =========================================================
   Soluções por perfil
   ========================================================= */
.l3-solution-card {
  position: relative;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--l3-grid-line);
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.75) 100%), var(--l3-panel);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.l3-solution-card__tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--l3-volt);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

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

.l3-solution-card__link {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--l3-solar-label, var(--l3-solar));
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* =========================================================
   Projetos em destaque — showcase editorial assimétrico:
   o primeiro projeto ganha destaque grande, os demais formam a
   segunda linha. Sem grid uniforme de 3 colunas idênticas.
   ========================================================= */
.l3-featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 800px) {
  .l3-featured-grid {
    grid-template-columns: 1fr 1fr;
  }
  .l3-feature-card--main {
    grid-column: 1 / -1;
  }
}

.l3-feature-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--l3-panel);
}

.l3-feature-card--main {
  aspect-ratio: 21 / 9;
}

.l3-feature-card__media {
  position: absolute;
  inset: 0;
}

.l3-feature-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-technical);
}

.l3-feature-card:hover .l3-feature-card__media img {
  transform: scale(1.06);
}

.l3-feature-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-6);
  background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.92) 100%);
}

.l3-feature-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1.6vw + 1rem, 2rem);
  color: var(--l3-white);
  margin: var(--space-2) 0 0;
}

/* =========================================================
   Case premium Quiero Cafe — video scrub + cascade text
   ========================================================= */
.l3-quiero-case {
  --l3-quiero-progress: 0;
  position: relative;
  min-height: 100svh;
  background: #000;
  overflow: clip;
  isolation: isolate;
}

.l3-quiero-case.is-scrubbable {
  height: 430vh;
}

.l3-quiero-case__sticky {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.l3-quiero-case.is-scrubbable .l3-quiero-case__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
}

.l3-quiero-case__media,
.l3-quiero-case__video,
.l3-quiero-case__poster,
.l3-quiero-case__scrim {
  position: absolute;
  inset: 0;
}

.l3-quiero-case__media {
  z-index: 0;
  background: #000;
}

.l3-quiero-case__video,
.l3-quiero-case__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.l3-quiero-case__video {
  display: block;
  opacity: 0.92;
  filter: saturate(1.12) contrast(1.08);
}

.l3-quiero-case__poster {
  background-size: cover;
  background-position: center;
  opacity: 0.66;
  transition: opacity 500ms var(--ease-technical);
}

/* Assim que o vídeo tem "src" (carregou e começa a fazer scrub), o
   poster do primeiro frame precisa sumir de vez — senão ele fica
   "fantasma", parado, sobreposto ao vídeo que avança com o scroll. */
.l3-quiero-case__video[src] + .l3-quiero-case__poster {
  opacity: 0;
}

.l3-quiero-case__scrim {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.18), transparent 18rem),
    linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.34) 42%, rgba(0, 0, 0, 0.86) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.76), transparent 48%, rgba(0, 0, 0, 0.58));
}

.l3-quiero-case__content {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 0.45fr auto 1fr;
  align-items: center;
  justify-items: center;
  padding-block: clamp(6rem, 8vw, 8rem);
  text-align: center;
}

.l3-quiero-case__logo-wrap {
  grid-row: 1;
  align-self: end;
  width: min(46vw, 24rem);
  padding: clamp(1rem, 1.8vw, 1.5rem) clamp(1.2rem, 2.4vw, 2rem);
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  will-change: transform;
}

.l3-quiero-case__logo {
  display: block;
  width: 100%;
  height: auto;
  filter: invert(1) drop-shadow(0 0 28px rgba(255, 255, 255, 0.26));
}

.l3-quiero-case__copy {
  grid-row: 2;
  width: min(100%, 68rem);
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  will-change: transform;
}

.l3-quiero-case__copy h2 {
  margin: 0;
  color: var(--l3-solar);
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  letter-spacing: 0;
  text-shadow: 0 3px 30px rgba(0, 0, 0, 0.85);
}

.l3-cascade-scroll {
  display: grid;
  gap: clamp(0.25rem, 0.8vw, 0.75rem);
  color: var(--l3-white);
  font-family: var(--font-display);
  font-weight: 780;
  font-size: clamp(2.6rem, 8.2vw, 8.6rem);
  line-height: 0.85;
  text-transform: uppercase;
  text-wrap: balance;
}

.l3-cascade-scroll__line {
  display: flex;
  justify-content: center;
  overflow: hidden;
  min-height: 0.92em;
}

.l3-cascade-scroll__char {
  display: inline-block;
  color: currentColor;
  text-shadow: 0 1em currentColor;
  transform: translateY(1.04em);
  opacity: 0.16;
  will-change: transform, opacity;
}

.l3-quiero-case__quote {
  max-width: 46rem;
  margin: 0;
  color: var(--l3-mist);
  font-size: clamp(1rem, 0.7vw + 0.9rem, 1.35rem);
  line-height: var(--lh-relaxed);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transform: translateY(1.2rem);
  will-change: transform, opacity;
}

@media (max-width: 899px) {
  .l3-quiero-case {
    min-height: 100svh;
  }

  .l3-quiero-case__sticky {
    min-height: 100svh;
  }

  .l3-quiero-case__content {
    grid-template-rows: auto auto;
    justify-content: center;
    gap: var(--space-8);
    padding-block: var(--space-16);
  }

  .l3-quiero-case__logo-wrap {
    width: min(74vw, 20rem);
    align-self: center;
  }

  .l3-cascade-scroll {
    font-size: clamp(2.1rem, 11.5vw, 4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .l3-quiero-case {
    height: auto;
  }

  .l3-quiero-case__video {
    display: none;
  }

  .l3-quiero-case__poster {
    opacity: 0.74;
  }

  .l3-cascade-scroll__line,
  .l3-cascade-scroll__char,
  .l3-quiero-case__quote {
    --line-progress: 1;
    --char-progress: 1;
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   Cards de artigo/blog (fallback simples, grid uniforme)
   ========================================================= */
.l3-project-card__image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  background: var(--l3-panel-2);
}

.l3-project-card {
  border: 1px solid var(--l3-grid-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(2, 2, 2, 0.88);
}

.l3-project-card__body {
  padding: var(--space-6);
}

.l3-project-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--l3-grid-line);
}

.l3-project-card__spec {
  font-family: var(--font-mono);
}
.l3-project-card__spec span {
  display: block;
  font-size: 0.65rem;
  color: var(--l3-mist-faint);
  text-transform: uppercase;
}
.l3-project-card__spec strong {
  color: var(--l3-white);
  font-size: 0.95rem;
}

/* =========================================================
   Seção com vídeo ambiente de fundo (genérica — usada em
   "Depoimentos" hoje, reaproveitável em outras seções depois).
   Mesma lógica de economia de dados do hero: some no mobile e
   com prefers-reduced-motion, sobra só a imagem estática.
   ========================================================= */
.l3-video-section {
  position: relative;
  overflow: hidden;
}

.l3-video-section__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.l3-video-section__video,
.l3-video-section__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
}

.l3-video-section__poster {
  display: none;
}

@media (max-width: 820px) {
  .l3-video-section__video {
    display: none;
  }
  .l3-video-section__poster {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l3-video-section__video {
    display: none;
  }
  .l3-video-section__poster {
    display: block;
  }
}

.l3-video-section__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Equilíbrio: escuro o bastante pra ler o texto, claro o bastante
     pra casa continuar visível e bonita atrás. O text-shadow abaixo
     cobre o resto do contraste sem precisar apagar o vídeo. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.72) 60%, rgba(0, 0, 0, 0.85) 100%);
}

/* Variante "soft": o vídeo de fundo aqui já é abstrato/desfocado
   (sem detalhe nítido competindo com o texto), então o scrim pode
   ficar mais leve — usada em "Por que investir" (lista curta). */
.l3-video-section--soft .l3-video-section__scrim {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.62) 100%);
}

/* Variante "dense": conteúdo com muito texto (tabela comparativa em
   "Diferenciais") precisa do scrim mais forte para garantir leitura. */
.l3-video-section--dense .l3-video-section__scrim {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
}

.l3-video-section__content {
  position: relative;
  z-index: 2;
  padding-block: var(--space-24);
}

.l3-video-section__content .l3-section-head h2,
.l3-video-section__content .l3-section-head p {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
}

/* =========================================================
   Palco do globo girando — "Por que investir" concentra o globo
   (WebGL, via cobe) num painel próprio, contido, em vez de espalhar
   o fundo pela seção inteira: assim ele fica o momento de destaque
   da seção, sem competir com a lista de motivos logo abaixo.
   Pontos de luz espalhados pelos continentes representam praças
   globais que já lideram a virada solar; Chapecó (base da L3)
   aparece em laranja entre eles.
   ========================================================= */
.l3-globe-stage {
  position: relative;
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--l3-grid-line);
  margin-bottom: var(--space-16);
  background:
    radial-gradient(60% 60% at 50% 42%, rgba(101, 129, 157, 0.22), transparent 70%),
    #030303;
}

/* Poster estático (gerado com IA, mesma direção de arte do globo em
   WebGL): fica ESCONDIDO por padrão. O JS só manda mostrar ele nos
   casos em que o canvas realmente não vai rodar (sem WebGL,
   reduced-motion, erro etc.) — assim nunca aparece um globo "errado"
   por um instante pra depois pular de posição quando o de verdade
   assume. Ou é um, ou é outro; nunca os dois em sequência
   (ver l3-globe-bg.js). */
.l3-globe-stage__poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../img/generated/globe-fallback-poster.webp') center / min(78%, 640px) no-repeat;
  opacity: 0;
  transition: opacity 500ms var(--ease-technical);
}

.l3-globe-stage__poster.is-visible {
  opacity: 1;
}

@media (max-width: 700px) {
  .l3-globe-stage {
    min-height: 56vh;
  }
}

.l3-globe-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.l3-globe-bg__canvas {
  width: min(100%, 720px);
  aspect-ratio: 1 / 1;
  max-width: 92vw;
  opacity: 0;
  cursor: grab;
  transition: opacity 700ms var(--ease-technical);
  touch-action: none;
}

.l3-globe-stage__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.45) 62%, rgba(0, 0, 0, 0.78) 100%);
}

.l3-globe-stage__content {
  position: relative;
  z-index: 2;
  max-width: 40rem;
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.l3-globe-stage__content p {
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7);
}

/* Título "neon": laranja com halo pulsante — o momento de destaque da
   seção precisa de vida própria mesmo depois que a montagem por
   partículas termina, então o brilho respira continuamente em vez de
   ficar uma cor chapada parada. */
.l3-globe-stage__content h2 {
  text-shadow:
    0 2px 20px rgba(0, 0, 0, 0.7),
    0 0 18px var(--l3-solar-glow),
    0 0 42px var(--l3-solar-glow);
  animation: l3-neon-pulse 3.6s ease-in-out infinite;
}

@keyframes l3-neon-pulse {
  0%, 100% {
    text-shadow:
      0 2px 20px rgba(0, 0, 0, 0.7),
      0 0 14px var(--l3-solar-glow),
      0 0 32px var(--l3-solar-glow);
  }
  50% {
    text-shadow:
      0 2px 20px rgba(0, 0, 0, 0.7),
      0 0 22px var(--l3-solar-glow),
      0 0 54px var(--l3-solar-glow);
  }
}

@media (prefers-reduced-motion: reduce) {
  .l3-globe-stage__content h2 {
    animation: none;
  }
}

.l3-globe-stage__content .l3-lede {
  margin-inline: auto;
}

/* =========================================================
   Título montado por partículas — o <h2> real (sempre acessível,
   sempre indexável) fica invisível só enquanto o canvas decorativo
   está "desenhando" por cima; ao terminar, o canvas some e o texto
   nítido reaparece no lugar exato. Estado de repouso: opacidade 1,
   sem depender do JS rodar.
   ========================================================= */
[data-l3-particle-heading-text] {
  transition: opacity 460ms var(--ease-technical);
}

[data-l3-particle-heading-text].is-assembling {
  opacity: 0;
}

[data-l3-particle-heading-text].is-revealed {
  opacity: 1;
}

.l3-particle-heading--active {
  position: relative;
}

.l3-particle-heading__canvas {
  position: absolute;
  pointer-events: none;
  opacity: 1;
  transition: opacity 460ms var(--ease-technical);
}

.l3-particle-heading__canvas.is-done {
  opacity: 0;
}

/* =========================================================
   Depoimentos
   ========================================================= */
.l3-testimonial {
  border-left: 2px solid var(--l3-solar);
  padding-left: var(--space-6);
}

.l3-testimonial--glass {
  border-left: none;
  padding: var(--space-6);
  background: rgba(2, 2, 2, 0.84);
  border: 1px solid var(--l3-grid-line);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  transition: border-color var(--dur-base) var(--ease-technical),
    transform var(--dur-base) var(--ease-technical);
}

.l3-testimonial--glass:hover {
  border-color: var(--l3-volt-glow);
  transform: translateY(-3px);
}

.l3-testimonial--glass .l3-testimonial__quote {
  border-left: 2px solid var(--l3-solar);
  padding-left: var(--space-4);
}

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

.l3-testimonial__quote {
  font-size: var(--fs-body-lg);
  color: var(--l3-white);
  font-style: italic;
}

.l3-testimonial__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--l3-mist-dim);
}

.l3-testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--l3-panel-2);
  border: 1px solid var(--l3-grid-line);
  overflow: hidden;
}

/* =========================================================
   FAQ editorial
   ========================================================= */
.l3-faq {
  position: relative;
  overflow: hidden;
  background: #000;
}

.l3-faq::before {
  content: none;
}

.l3-faq__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-12);
}

@media (min-width: 1024px) {
  .l3-faq__grid {
    grid-template-columns: minmax(18rem, 0.78fr) minmax(0, 1.22fr);
    align-items: start;
  }

  .l3-faq__intro {
    position: sticky;
    top: calc(var(--l3-header-height, 96px) + var(--space-8));
  }
}

.l3-faq__intro h2 {
  max-width: 11ch;
  margin-bottom: var(--space-4);
}

.l3-faq__intro .l3-lede {
  max-width: 34rem;
}

.l3-faq__note {
  margin-top: var(--space-6);
  padding: var(--space-5, 1.25rem);
  border-left: 2px solid var(--l3-solar);
  background: rgba(2, 2, 2, 0.78);
}

.l3-faq__note span,
.l3-faq__cta span {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--l3-volt);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.l3-faq__note p,
.l3-faq__cta p {
  margin: 0;
  color: var(--l3-mist);
}

.l3-faq-mode {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5, 1.25rem);
  align-items: center;
  margin-bottom: var(--space-7, 1.75rem);
  padding: var(--space-5, 1.25rem);
  border: 1px solid rgba(201, 211, 224, 0.16);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--l3-solar) 8%, transparent), transparent 48%),
    rgba(2, 2, 2, 0.86);
  box-shadow: var(--shadow-panel);
}

.l3-faq-mode__copy span {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--l3-solar-label, var(--l3-solar));
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.l3-faq-mode__copy strong {
  display: block;
  color: var(--l3-white);
  font-size: clamp(1.08rem, 0.7vw + 0.92rem, 1.35rem);
  line-height: var(--lh-snug);
}

.l3-faq-mode__copy p {
  max-width: 38rem;
  margin: 0.35rem 0 0;
  color: var(--l3-mist);
  font-size: var(--fs-small);
  line-height: 1.6;
}

.l3-sky-toggle {
  --toggle-size: clamp(1.16rem, 1.1vw, 1.55rem);
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  --container-light-bg: #3d7eae;
  --container-cloud-bg: #596f7d;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ecca2f;
  --moon-bg: #d7dee8;
  --spot-color: #8e99aa;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: rgba(255, 255, 255, 0.84);
  --clouds-color: #f3fdff;
  --back-clouds-color: #aacadf;
  --transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: 0.3s cubic-bezier(0, -0.02, 0.35, 1.17);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.l3-sky-toggle,
.l3-sky-toggle *,
.l3-sky-toggle *::before,
.l3-sky-toggle *::after {
  box-sizing: border-box;
}

.l3-sky-toggle__checkbox {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.l3-sky-toggle__container {
  position: relative;
  display: block;
  width: var(--container-width);
  height: var(--container-height);
  overflow: hidden;
  border-radius: var(--container-radius);
  background-color: var(--container-light-bg);
  box-shadow:
    0 -0.062em 0.062em rgba(0, 0, 0, 0.25),
    0 0.062em 0.125em rgba(255, 255, 255, 0.94);
  transition: background-color var(--transition), box-shadow var(--dur-base) var(--ease-technical);
  font-size: var(--toggle-size);
}

.l3-sky-toggle__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: var(--container-radius);
  box-shadow:
    0 0.05em 0.187em rgba(0, 0, 0, 0.25) inset,
    0 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
}

.l3-sky-toggle__checkbox:focus-visible + .l3-sky-toggle__container {
  outline: 2px solid var(--l3-volt);
  outline-offset: 6px;
}

.l3-sky-toggle__circle-container {
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  z-index: 2;
  display: flex;
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  border-radius: var(--container-radius);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 0 3.375em rgba(255, 255, 255, 0.1),
    0 0 0 0.625em rgba(255, 255, 255, 0.1),
    0 0 0 1.25em rgba(255, 255, 255, 0.1);
  pointer-events: none;
  transition: left var(--circle-transition);
}

.l3-sky-toggle__sun-moon-container {
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  overflow: hidden;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  box-shadow:
    0.062em 0.062em 0.062em 0 rgba(254, 255, 239, 0.61) inset,
    0 -0.062em 0.062em 0 #a1872a inset;
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25));
  transition: background-color var(--transition), box-shadow var(--transition);
}

.l3-sky-toggle__moon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: var(--moon-bg);
  box-shadow:
    0.062em 0.062em 0.062em 0 rgba(254, 255, 239, 0.61) inset,
    0 -0.062em 0.062em 0 #969696 inset;
  transform: translateX(100%);
  transition: transform var(--transition);
}

.l3-sky-toggle__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.l3-sky-toggle__spot:nth-of-type(2) {
  top: 0.937em;
  left: 1.375em;
  width: 0.375em;
  height: 0.375em;
}

.l3-sky-toggle__spot:nth-of-type(3) {
  top: 0.312em;
  left: 0.812em;
  width: 0.25em;
  height: 0.25em;
}

.l3-sky-toggle__clouds {
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  z-index: 1;
  width: 1.25em;
  height: 1.25em;
  border-radius: var(--container-radius);
  background-color: var(--clouds-color);
  box-shadow:
    0.937em 0.312em var(--clouds-color),
    -0.312em -0.312em var(--back-clouds-color),
    1.437em 0.375em var(--clouds-color),
    0.5em -0.125em var(--back-clouds-color),
    2.187em 0 var(--clouds-color),
    1.25em -0.062em var(--back-clouds-color),
    2.937em 0.312em var(--clouds-color),
    2em -0.312em var(--back-clouds-color),
    3.625em -0.062em var(--clouds-color),
    2.625em 0 var(--back-clouds-color),
    4.5em -0.312em var(--clouds-color),
    3.375em -0.437em var(--back-clouds-color),
    4.625em -1.75em 0 0.437em var(--clouds-color),
    4em -0.625em var(--back-clouds-color),
    4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition: bottom var(--transition), transform var(--transition), opacity var(--transition);
}

.l3-sky-toggle__stars {
  position: absolute;
  top: -100%;
  left: 0.312em;
  z-index: 1;
  width: 2.75em;
  height: auto;
  color: var(--stars-color);
  opacity: 0;
  transition: top var(--transition), opacity var(--transition), transform var(--transition);
}

.l3-sky-toggle__checkbox:checked + .l3-sky-toggle__container {
  background-color: var(--container-cloud-bg);
  box-shadow:
    0 -0.062em 0.062em rgba(0, 0, 0, 0.28),
    0 0 2rem rgba(170, 202, 223, 0.18);
}

.l3-sky-toggle__checkbox:checked + .l3-sky-toggle__container .l3-sky-toggle__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.l3-sky-toggle:hover .l3-sky-toggle__circle-container {
  left: calc(var(--circle-container-offset) + 0.187em);
}

.l3-sky-toggle:hover .l3-sky-toggle__checkbox:checked + .l3-sky-toggle__container .l3-sky-toggle__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
}

.l3-sky-toggle__checkbox:checked + .l3-sky-toggle__container .l3-sky-toggle__moon {
  transform: translate(0);
}

.l3-sky-toggle__checkbox:checked + .l3-sky-toggle__container .l3-sky-toggle__clouds {
  bottom: -0.25em;
  opacity: 0.92;
  transform: translateX(-0.45em);
}

.l3-sky-toggle__checkbox:checked + .l3-sky-toggle__container .l3-sky-toggle__stars {
  top: 48%;
  opacity: 0.28;
  transform: translateY(-50%);
}

.l3-faq-weather-panel[hidden] {
  display: none;
}

.l3-accordion--editorial {
  display: grid;
  gap: var(--space-4);
  border-top: 0;
}

.l3-accordion--editorial .l3-accordion-item {
  --glow-radius: 14;
  --glow-border: 1px;
  --glow-size: 260px;
  --glow-hue: calc(38 + (var(--l3-glow-xp, 0.4) * 176));
  position: relative;
  overflow: hidden;
  border: var(--glow-border) solid rgba(201, 211, 224, 0.13);
  border-radius: var(--radius-md);
  background:
    radial-gradient(
      var(--glow-size) var(--glow-size) at var(--l3-glow-x, -999px) var(--l3-glow-y, -999px),
      hsl(var(--glow-hue) 96% 62% / 0.09),
      transparent 72%
    ),
    linear-gradient(145deg, rgba(18, 30, 50, 0.76), rgba(7, 13, 23, 0.88));
  background-attachment: fixed, scroll;
  box-shadow: 0 1.2rem 2.2rem -1.8rem rgba(0, 0, 0, 0.92);
  isolation: isolate;
  transition:
    border-color var(--dur-base) var(--ease-technical),
    box-shadow var(--dur-base) var(--ease-technical),
    transform var(--dur-base) var(--ease-technical);
}

.l3-accordion--editorial .l3-accordion-item::before {
  content: "";
  position: absolute;
  inset: calc(var(--glow-border) * -1);
  pointer-events: none;
  border: var(--glow-border) solid transparent;
  border-radius: inherit;
  background:
    radial-gradient(
      calc(var(--glow-size) * 0.75) calc(var(--glow-size) * 0.75) at var(--l3-glow-x, -999px) var(--l3-glow-y, -999px),
      hsl(var(--glow-hue) 100% 58% / 0.78),
      transparent 100%
    );
  background-attachment: fixed;
  -webkit-mask:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(#fff, #fff) border-box;
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(#fff, #fff) border-box;
  mask-composite: intersect;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-technical);
}

.l3-accordion--editorial .l3-accordion-item::after {
  content: "";
  position: absolute;
  inset: calc(var(--glow-border) * -1);
  pointer-events: none;
  border: var(--glow-border) solid transparent;
  border-radius: inherit;
  background:
    radial-gradient(
      calc(var(--glow-size) * 0.45) calc(var(--glow-size) * 0.45) at var(--l3-glow-x, -999px) var(--l3-glow-y, -999px),
      rgba(255, 255, 255, 0.9),
      transparent 100%
    );
  background-attachment: fixed;
  -webkit-mask:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(#fff, #fff) border-box;
  -webkit-mask-composite: source-in;
  mask:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(#fff, #fff) border-box;
  mask-composite: intersect;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-technical);
}

.l3-glow-card__aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  filter: blur(28px);
  background:
    radial-gradient(
      calc(var(--glow-size) * 0.7) calc(var(--glow-size) * 0.7) at var(--l3-glow-x, -999px) var(--l3-glow-y, -999px),
      rgba(242, 179, 61, 0.15),
      rgba(120, 148, 166, 0.09) 44%,
      transparent 76%
    );
  background-attachment: fixed;
  transition: opacity var(--dur-base) var(--ease-technical);
}

.l3-accordion--editorial .l3-accordion-item[data-open="true"]::before {
  opacity: 1;
}

.l3-accordion--editorial .l3-accordion-item:hover,
.l3-accordion--editorial .l3-accordion-item[data-open="true"] {
  border-color: rgba(242, 179, 61, 0.32);
  box-shadow:
    0 1.4rem 2.8rem -1.9rem rgba(0, 0, 0, 0.96),
    0 0 3.5rem rgba(120, 148, 166, 0.08);
}

.l3-accordion--editorial .l3-accordion-item:hover::before,
.l3-accordion--editorial .l3-accordion-item:hover::after,
.l3-accordion--editorial .l3-accordion-item:hover .l3-glow-card__aura,
.l3-accordion--editorial .l3-accordion-item[data-open="true"]::before,
.l3-accordion--editorial .l3-accordion-item[data-open="true"] .l3-glow-card__aura {
  opacity: 1;
}

.l3-accordion--editorial .l3-accordion-item[data-open="true"]::after {
  opacity: 0.72;
}

.l3-accordion--editorial .l3-accordion-trigger {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) 2.75rem;
  gap: var(--space-4);
  align-items: center;
  min-height: 6.5rem;
  padding: var(--space-6);
  text-transform: none;
  letter-spacing: 0;
}

.l3-accordion--editorial .l3-accordion-trigger:focus-visible {
  outline: 2px solid var(--l3-volt);
  outline-offset: 6px;
}

.l3-accordion-index {
  color: var(--l3-solar-label, var(--l3-solar));
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
}

.l3-accordion-title {
  color: var(--l3-white);
  font-size: clamp(1.12rem, 1.1vw + 0.9rem, 1.75rem);
  font-weight: 650;
  line-height: var(--lh-snug);
}

.l3-accordion--editorial .l3-accordion-icon {
  position: relative;
  justify-self: end;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(201, 211, 224, 0.2);
  border-radius: 50%;
  background: rgba(2, 2, 2, 0.86);
}

.l3-accordion--editorial .l3-accordion-icon::before,
.l3-accordion--editorial .l3-accordion-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.85rem;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--l3-solar);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-technical);
}

.l3-accordion--editorial .l3-accordion-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.l3-accordion--editorial .l3-accordion-item[data-open="true"] .l3-accordion-icon {
  border-color: rgba(242, 179, 61, 0.44);
  box-shadow: 0 0 32px rgba(242, 179, 61, 0.16);
}

.l3-accordion--editorial .l3-accordion-item[data-open="true"] .l3-accordion-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.l3-accordion--editorial .l3-accordion-panel {
  position: relative;
  z-index: 2;
}

.l3-accordion--editorial .l3-accordion-panel__inner {
  max-width: 45rem;
  padding: 0 5.25rem var(--space-7, 1.75rem) 5.85rem;
  color: var(--l3-mist);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.l3-accordion--editorial .l3-accordion-panel__inner p {
  margin: 0;
}

.l3-faq__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding: var(--space-6);
  border: 1px solid rgba(242, 179, 61, 0.28);
  border-radius: var(--radius-md);
  background:
    linear-gradient(90deg, rgba(242, 179, 61, 0.11), transparent),
    rgba(2, 2, 2, 0.86);
  box-shadow: var(--shadow-panel);
}

@media (max-width: 820px) {
  .l3-faq__intro h2 {
    max-width: none;
  }

  .l3-faq__note {
    margin-top: var(--space-6);
    padding: var(--space-4);
  }

  .l3-faq-mode {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .l3-sky-toggle {
    justify-self: start;
  }

  .l3-accordion--editorial .l3-accordion-trigger {
    grid-template-columns: 2.4rem minmax(0, 1fr) 2.35rem;
    gap: var(--space-3);
    min-height: 5.75rem;
    padding: var(--space-5, 1.25rem);
  }

  .l3-accordion-title {
    font-size: 1.08rem;
  }

  .l3-accordion--editorial .l3-accordion-icon {
    width: 2.25rem;
    height: 2.25rem;
  }

  .l3-accordion--editorial .l3-accordion-panel__inner {
    padding: 0 var(--space-5, 1.25rem) var(--space-5, 1.25rem) 4rem;
  }

  .l3-faq__cta {
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-5, 1.25rem);
  }

  .l3-faq__cta .l3-btn {
    justify-content: center;
    width: 100%;
    white-space: normal;
    text-align: center;
  }
}

/* =========================================================
   CTA final / formulário de orçamento
   ========================================================= */
.l3-final-cta {
  position: relative;
  overflow: hidden;
  background: #000;
}

.l3-final-cta::before {
  content: none;
}

.l3-cta-form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-12);
}

@media (min-width: 1024px) {
  .l3-cta-form {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.l3-final-cta__copy h2 {
  max-width: 12ch;
  margin-bottom: var(--space-4);
}

.l3-final-cta__copy .l3-lede {
  max-width: 38rem;
}

.l3-final-cta__steps {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.l3-final-cta__steps li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid rgba(201, 211, 224, 0.14);
}

.l3-final-cta__steps span {
  grid-row: 1 / span 2;
  color: var(--l3-solar-label, var(--l3-solar));
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
}

.l3-final-cta__steps strong {
  grid-column: 2;
  display: block;
  color: var(--l3-white);
  font-size: 1.08rem;
  margin-bottom: var(--space-1);
}

.l3-final-cta__steps p,
.l3-final-cta__direct {
  grid-column: 2;
  margin: 0;
  color: var(--l3-mist);
  line-height: var(--lh-body);
}

.l3-final-cta__direct {
  margin-top: var(--space-8);
  font-size: var(--fs-small);
}

.l3-final-cta__form {
  border-color: rgba(242, 179, 61, 0.28);
  background:
    linear-gradient(180deg, rgba(2, 2, 2, 0.96), rgba(8, 8, 8, 0.96)),
    var(--l3-panel);
  box-shadow: var(--shadow-panel), 0 0 70px rgba(242, 179, 61, 0.08);
}

@media (max-width: 820px) {
  .l3-final-cta {
    padding-block: var(--space-16);
  }

  .l3-final-cta__copy h2 {
    max-width: none;
  }

  .l3-final-cta__steps {
    margin-top: var(--space-6);
  }

  .l3-final-cta__steps li {
    grid-template-columns: 2.4rem 1fr;
  }

  .l3-final-cta__form {
    margin-inline: calc(var(--container-pad) * -0.25);
  }
}