/* ===================================================================
   ILUMISOL — estilos abaixo da dobra (carregamento adiado)
   -------------------------------------------------------------------
   Este arquivo NÃO bloqueia a renderização: o header.php o carrega com
   rel="preload" + onload, depois do style.css. Aqui só entram componentes
   que não aparecem na primeira tela de nenhuma página, em nenhuma largura:
   as seções da home a partir de "Números", FAQ, paginação, modal de vídeo,
   as seções de baixo de /a-ilumisol, a chamada final, o trilho, a fachada
   de vídeo e o mapa por fachada.

   Onde colocar uma regra nova:
     - o elemento aparece na primeira tela de alguma página, em 375px ou
       em 1440px?                                   -> style.css
     - só aparece rolando, ou só depois de um clique? -> pode vir para cá
   Na dúvida, style.css. Errar para lá custa alguns bytes bloqueantes;
   errar para cá faz o componente piscar sem estilo.

   Os blocos estão na mesma ordem em que estavam no style.css, e este
   arquivo carrega DEPOIS dele: uma regra daqui não pode depender de
   perder, por ordem, para uma regra de mesma especificidade do style.css.
   No style.css, cada bloco que saiu deixou um comentário "→ style-adiado.css".
   =================================================================== */

/* ============================================================
   8  COMPONENTES COMPARTILHADOS — os que só aparecem rolando
   ============================================================ */

/* ---------- Card ---------- */
.il-card {
  background: var(--il-navy-700);
  border: 1px solid var(--il-cloud-08);
  border-radius: var(--il-radius-lg);
  padding: var(--il-space-6);
  height: 100%;
  transition: transform var(--il-dur) var(--il-ease),
    border-color var(--il-dur) var(--il-ease),
    box-shadow var(--il-dur) var(--il-ease);
}

.il-card:hover {
  transform: translateY(-4px);
  border-color: rgba(248, 183, 7, 0.32);
  box-shadow: var(--il-shadow-lg);
}

/* ---------- Trilho e fachada de vídeo ---------- */
/* Trilho horizontal com encaixe. Substitui carrossel de biblioteca:
   funciona sem JS, continua arrastável, e o HTML tem o conteúdo
   uma vez só em vez dos clones que um slider costuma gerar. */
.il-track {
  display: flex;
  gap: var(--il-space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Sem `scroll-behavior: smooth` aqui de propósito: ele também transformaria a
     atribuição direta de scrollLeft em animação, e é justamente essa atribuição
     que serve de rede quando o ambiente desliga rolagem animada. Quem decide o
     comportamento é o site.js, que passa `behavior` no scrollBy. */
  padding-bottom: var(--il-space-4);
  scrollbar-width: thin;
  scrollbar-color: var(--il-cloud-16) transparent;
}

.il-track > * {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

/* Cards que preenchem a largura em número inteiro.
   `--il-por-vista` diz quantos cabem por vez; a largura sai daí descontando os
   gaps. Assim o último card visível nunca aparece cortado — a rolagem é
   sinalizada pelas setas do cabeçalho, não por um card pela metade. */
.il-track-exato > * {
  flex: 0 0 calc(
    (100% - (var(--il-por-vista) - 1) * var(--il-space-5)) / var(--il-por-vista)
  );
  width: auto;
}

.il-track::-webkit-scrollbar {
  height: 6px;
}

.il-track::-webkit-scrollbar-thumb {
  background: var(--il-cloud-16);
  border-radius: var(--il-radius-pill);
}

.il-track-nav {
  display: inline-flex;
  gap: var(--il-space-2);
}

.il-track-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--il-cloud-16);
  background: transparent;
  color: var(--il-cloud);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: border-color var(--il-dur) var(--il-ease),
    color var(--il-dur) var(--il-ease),
    background-color var(--il-dur) var(--il-ease);
}

.il-track-btn:hover {
  border-color: var(--il-sun);
  color: var(--il-sun);
  background: var(--il-cloud-08);
}

/* Fachada de vídeo: a thumbnail local no lugar do iframe.
   O iframe do YouTube só é injetado no clique (theme/js/site.js). */
.il-facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--il-navy-900);
  border-radius: var(--il-radius-lg);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
}

.il-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--il-dur-slow) var(--il-ease-out);
}

.il-facade:hover img {
  transform: scale(1.04);
}

.il-facade-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.il-facade-play span {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--il-grad-sun);
  color: var(--il-ink);
  display: grid;
  place-items: center;
  font-size: 2rem;
  box-shadow: var(--il-glow-sun);
  transition: transform var(--il-dur) var(--il-ease);
}

.il-facade:hover .il-facade-play span {
  transform: scale(1.08);
}

.il-facade iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   9  HOME — seções abaixo do hero
   ============================================================ */

/* ---------- 3. Números ---------- */
.il-numeros {
  background: var(--il-navy-800);
  padding-bottom: var(--il-section-y);
}

/* Cartão claro que quebra a sequência escura — o mesmo gesto do site atual */
.il-numeros-card {
  background: var(--il-cloud);
  color: var(--il-ink);
  border-radius: var(--il-radius-xl);
  padding: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
  box-shadow: var(--il-shadow-lg);
}

.il-numeros-card .il-h2 {
  color: var(--il-ink);
}

.il-hi-sun {
  background: var(--il-grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.il-numeros-grade {
  margin-top: var(--il-space-6);
}

.il-numero {
  text-align: center;
  height: 100%;
}

.il-numero img {
  height: 44px;
  width: auto;
  margin: 0 auto var(--il-space-3);
  display: block;
}

.il-numero-valor {
  font-family: var(--il-font-display);
  font-size: 3.5rem;
  font-weight: normal;
  line-height: 1;
  letter-spacing: var(--il-track-tight);
  color: var(--il-ink);
  margin: 0 0 var(--il-space-2);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.12em;
}

/* tabular-nums + largura mínima: os dígitos não reflowam durante a contagem,
   então o contador anima com CLS zero. */
.il-num {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 2ch;
}

.il-numero-prefixo {
  color: var(--il-sun);
}

.il-numero-unidade {
  font-family: var(--il-font-body);
  font-size: var(--il-fs-md);
  /* Fundo claro: o 300 aqui é seguro e cria contraste de peso com o 900 do
     número ao lado, em vez de competir com ele. */
  font-weight: var(--il-fw-light);
  color: rgba(5, 16, 36, 0.62);
}

.il-numero-desc {
  font-size: var(--il-fs-sm);
  color: rgba(5, 16, 36, 0.66);
  margin: 0;
}

/* ---------- 4. Por que investir ---------- */
.il-porque {
  background: var(--il-navy-800);
}

/* Cards de benefício: imagem com a legenda já composta pelo cliente.
   Ficam em pé e legíveis — nada de rotação, porque o texto está dentro da arte.
   O escalonamento do card do meio dá ritmo sem atrapalhar a leitura. */
.il-beneficios {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--il-space-4);
  margin: 0;
  padding: 0;
}

.il-beneficios li {
  border-radius: var(--il-radius-lg);
  overflow: hidden;
  box-shadow: var(--il-shadow-lg);
  transition: transform var(--il-dur) var(--il-ease);
}

.il-beneficios li:nth-child(2) {
  transform: translateY(-1.75rem);
}

.il-beneficios li:hover {
  transform: translateY(-2.25rem);
}

.il-beneficios li:nth-child(2):hover {
  transform: translateY(-3.5rem);
}

.il-beneficios img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 5. Nossas obras ---------- */
.il-obras-tipo i {
  font-size: 0.85em;
  opacity: 0;
  margin-left: -0.9em;
  transition: opacity var(--il-dur) var(--il-ease),
    margin-left var(--il-dur) var(--il-ease);
}

.il-obras-tipo:hover i {
  opacity: 1;
  margin-left: 0;
}

/* Slide de obras executadas.
   Os cards não são links de propósito — as páginas internas ainda são stubs. */
.il-obras-trilho {
  --il-por-vista: 4;
  margin-top: var(--il-space-6);
}

.il-obra {
  display: flex;
  flex-direction: column;
  gap: var(--il-space-4);
}

.il-obra-foto {
  position: relative;
  margin: 0;
  border-radius: var(--il-radius-lg);
  overflow: hidden;
  border: 1px solid var(--il-cloud-08);
  background: var(--il-navy-700);
}

.il-obra-foto img {
  display: block;
  width: 100%;
  /* As fotos vêm do painel em proporções diferentes (algumas quadradas):
     a razão fixa mantém o trilho alinhado. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--il-dur-slow) var(--il-ease-out);
}

.il-obra:hover .il-obra-foto img {
  transform: scale(1.04);
}

.il-obra-tag {
  position: absolute;
  top: var(--il-space-3);
  left: var(--il-space-3);
  padding: 0.3125rem 0.75rem;
  border-radius: var(--il-radius-pill);
  background: rgba(0, 21, 48, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--il-cloud-16);
  color: var(--il-sun);
  font-size: var(--il-fs-3xs);
  font-weight: var(--il-fw-semibold);
  letter-spacing: var(--il-track-wide);
  text-transform: uppercase;
}

.il-obra-legenda {
  margin: 0;
  font-size: var(--il-fs-sm);
  line-height: var(--il-lh-relaxed);
  color: var(--il-cloud-70);
}

/* ---------- 6. Projeto Ametista ---------- */
.il-ametista {
  background: var(--il-navy-800);
  overflow: hidden;
}

/* Globo girando.
   A imagem é um render de esfera com a iluminação já pintada. Girar a imagem
   inteira giraria a luz junto e o resultado lê como um disco rodando, não como
   um planeta. Por isso a textura gira por baixo e a luz fica numa camada fixa
   por cima: a silhueta e o ponto de luz não se movem, só o mapa. */
.il-globo {
  position: relative;
  width: min(28rem, 84%);
  margin-inline: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

/* Halo quente atrás da esfera */
.il-globo::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(248, 183, 7, 0.26), transparent 70%);
  filter: blur(26px);
}

.il-globo-esfera {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 30px 70px -28px rgba(0, 10, 25, 0.9);
}

.il-globo-esfera img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: il-girar 140s linear infinite;
}

/* Camada de luz fixa: realce em cima à esquerda e terminador embaixo à direita.
   É o que ancora a percepção de esfera enquanto a textura gira. */
.il-globo-esfera::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.3) 0%, transparent 46%),
    radial-gradient(circle at 72% 78%, rgba(0, 12, 30, 0.62) 0%, transparent 58%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(0, 12, 30, 0.5) 100%);
}

@keyframes il-girar {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .il-globo-esfera img {
    animation: none;
  }
}

/* ---------- 7. Processo em 6 etapas ---------- */
.il-etapas {
  list-style: none;
  margin: var(--il-space-10) 0 0;
  padding: 0;
  display: grid;
  gap: var(--il-space-5);
  grid-template-columns: repeat(3, 1fr);
}

.il-etapa {
  position: relative;
  padding: var(--il-space-6) var(--il-space-5);
  border: 1px solid var(--il-cloud-08);
  border-radius: var(--il-radius-lg);
  background: linear-gradient(180deg, rgba(26, 44, 76, 0.5) 0%, rgba(26, 44, 76, 0.16) 100%);
  transition: border-color var(--il-dur) var(--il-ease),
    transform var(--il-dur) var(--il-ease);
}

.il-etapa:hover {
  border-color: rgba(248, 183, 7, 0.3);
  transform: translateY(-4px);
}

.il-etapa-n {
  position: absolute;
  top: var(--il-space-4);
  right: var(--il-space-5);
  font-family: var(--il-font-display);
  font-size: 2.75rem;
  font-weight: var(--il-fw-black);
  line-height: 1;
  color: var(--il-cloud-08);
  font-variant-numeric: tabular-nums;
}

.il-etapa-icone {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--il-radius-sm);
  background: var(--il-grad-sun);
  color: var(--il-ink);
  font-size: 1.25rem;
  margin-bottom: var(--il-space-4);
}

.il-etapa-title {
  font-family: var(--il-font-display);
  font-size: var(--il-fs-xl);
  margin-bottom: var(--il-space-2);
}

/* ---------- 8. Aplicativo ---------- */
.il-app {
  background: var(--il-navy-800);
}

.il-app-card {
  position: relative;
  border-radius: var(--il-radius-xl);
  padding: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  background:
    radial-gradient(70% 90% at 88% 20%, rgba(248, 183, 7, 0.16) 0%, transparent 64%),
    var(--il-navy-700);
  border: 1px solid var(--il-cloud-08);
  overflow: hidden;
}

.il-app-celular {
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(0, 10, 25, 0.6));
}

/* ---------- 9. Depoimentos ---------- */
/* Grade de três colunas ocupando a largura toda do container.
   Antes eram cards de largura fixa num trilho: com só três depoimentos sobrava
   vão à direita e as setas não tinham para onde levar. */
.il-depo-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--il-space-5);
  margin-top: var(--il-space-7);
}

.il-depo-card {
  display: flex;
  flex-direction: column;
  gap: var(--il-space-4);
  padding: var(--il-space-5);
  background: var(--il-navy-700);
  border: 1px solid var(--il-cloud-08);
  border-radius: var(--il-radius-lg);
}

.il-depo-video {
  border-radius: var(--il-radius-md);
}

/* Vídeo vertical dentro de uma capa 16:9: a camada de trás preenche o quadro
   desfocada e a da frente mostra a arte inteira, sem corte e sem tarja preta. */
.il-facade-fundo,
.il-facade-frente {
  position: absolute;
  inset: 0;
  display: block;
}

.il-facade-fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(18px) saturate(1.15) brightness(0.72);
  transform: scale(1.15);
}

.il-facade-frente img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* O zoom do hover fica só na camada nítida */
.il-facade:hover .il-facade-fundo img {
  transform: scale(1.15);
}

.il-depo-fala {
  margin: 0;
  font-size: var(--il-fs-sm);
  line-height: var(--il-lh-relaxed);
  color: var(--il-cloud-70);
  quotes: "\201C" "\201D";
}

.il-depo-fala::before {
  content: open-quote;
  color: var(--il-sun);
  font-family: var(--il-font-display);
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.28em;
  margin-right: 0.1em;
}

.il-depo-autor {
  display: flex;
  align-items: center;
  gap: var(--il-space-3);
  margin-top: auto;
  padding-top: var(--il-space-4);
  border-top: 1px solid var(--il-cloud-08);
}

.il-depo-autor img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.il-depo-autor strong {
  display: block;
  font-size: var(--il-fs-sm);
}

.il-depo-autor small {
  color: var(--il-cloud-56);
  font-size: var(--il-fs-2xs);
}

/* ---------- 10. Clientes ---------- */
.il-clientes {
  background: var(--il-navy-800);
}

.il-marquee {
  margin-top: var(--il-space-8);
  overflow: hidden;
  /* Desvanece nas pontas para o corte não parecer erro de layout */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.il-marquee-trilho {
  display: flex;
  align-items: center;
  gap: var(--il-space-8);
  list-style: none;
  margin: 0;
  padding: 0;
  width: max-content;
  animation: il-marquee 48s linear infinite;
}

.il-marquee:hover .il-marquee-trilho,
.il-marquee:focus-within .il-marquee-trilho {
  animation-play-state: paused;
}

/* Sem chip de fundo: os arquivos que o cliente publica já são as versões para
   fundo escuro (Sicoob e Café Tia Luiza, por exemplo, têm o logotipo em branco).
   Sobre um chip claro eles desapareceriam. */
.il-marquee li {
  display: grid;
  place-items: center;
  height: 4rem;
}

.il-marquee img {
  height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.86;
  transition: opacity var(--il-dur) var(--il-ease),
    transform var(--il-dur) var(--il-ease);
}

.il-marquee li:hover img {
  opacity: 1;
  transform: scale(1.06);
}

@keyframes il-marquee {
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .il-marquee-trilho {
    animation: none;
    width: 100%;
    overflow-x: auto;
  }
}

/* ---------- Perguntas frequentes ---------- */
/* <details> nativo: abre e fecha sem JS e a resposta fica no HTML mesmo
   fechada, que é o que a busca e os modelos de linguagem leem. */
.il-faq-lista {
  max-width: 52rem;
  margin: var(--il-space-8) auto 0;
  display: grid;
  gap: var(--il-space-3);
}

.il-faq-item {
  border: 1px solid var(--il-cloud-16);
  border-radius: var(--il-radius-md);
  background: var(--il-navy-700);
  transition: border-color var(--il-dur) var(--il-ease);
}

.il-faq-item[open],
.il-faq-item:hover {
  border-color: var(--il-cloud-56);
}

.il-faq-pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--il-space-4);
  padding: var(--il-space-4) var(--il-space-5);
  cursor: pointer;
  font-weight: var(--il-fw-semibold);
  font-size: var(--il-fs-md);
  line-height: var(--il-lh-snug);
  list-style: none;
}

/* O triângulo padrão do Safari e do Chrome, que a seta própria substitui */
.il-faq-pergunta::-webkit-details-marker {
  display: none;
}

.il-faq-pergunta:focus-visible {
  box-shadow: var(--il-ring);
  border-radius: var(--il-radius-md);
}

.il-faq-pergunta i {
  flex: 0 0 auto;
  color: var(--il-sun);
  transition: transform var(--il-dur) var(--il-ease);
}

.il-faq-item[open] .il-faq-pergunta i {
  transform: rotate(180deg);
}

.il-faq-resposta {
  padding: 0 var(--il-space-5) var(--il-space-5);
  color: var(--il-cloud-70);
}

.il-faq-rodape {
  margin: var(--il-space-6) 0 0;
  text-align: center;
  color: var(--il-cloud-70);
  font-size: var(--il-fs-sm);
}

.il-faq-rodape a {
  color: var(--il-sun);
}

/* ---------- Paginação (listagem de notícias) ---------- */
.il-paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--il-space-3);
  margin-top: var(--il-space-8);
  padding-top: var(--il-space-6);
  border-top: 1px solid var(--il-cloud-08);
}

.il-paginacao-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--il-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.il-paginacao-num,
.il-paginacao-seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--il-space-2);
  font-size: var(--il-fs-sm);
  font-weight: var(--il-fw-semibold);
  line-height: 1;
  color: var(--il-cloud);
  border: 1px solid var(--il-cloud-16);
  border-radius: var(--il-radius-pill);
  transition: border-color var(--il-dur) var(--il-ease),
    color var(--il-dur) var(--il-ease),
    background-color var(--il-dur) var(--il-ease);
}

/* Quadrado para o número, pílula para as setas — e nunca abaixo de 44px, que é
   o alvo mínimo de toque. */
.il-paginacao-num {
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: var(--il-space-2);
  font-variant-numeric: tabular-nums;
}

.il-paginacao-seta {
  height: 2.75rem;
  padding-inline: var(--il-space-4);
}

a.il-paginacao-num:hover,
a.il-paginacao-seta:hover {
  border-color: var(--il-sun);
  color: var(--il-sun);
}

.il-paginacao-atual {
  background: var(--il-grad-sun);
  border-color: transparent;
  color: var(--il-ink);
  font-weight: var(--il-fw-bold);
}

/* Extremos da lista: o botão continua ocupando o lugar para a barra não pular
   de largura entre a primeira página e as do meio. */
.il-paginacao-inerte {
  opacity: 0.35;
  border-color: var(--il-cloud-08);
  cursor: default;
}

.il-paginacao-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 2.75rem;
  color: var(--il-cloud-56);
}

@media (max-width: 575.98px) {
  /* Em tela estreita as setas viram só o ícone: "Anterior" e "Próxima" ao lado
     de seis números estouravam a linha. */
  .il-paginacao-seta {
    padding-inline: var(--il-space-3);
    font-size: 0;
  }

  .il-paginacao-seta i {
    font-size: 1rem;
  }
}

/* ---------- Responsivo das seções da home ---------- */
@media (max-width: 991.98px) {
  .il-obras-trilho,
  .il-blog-trilho {
    --il-por-vista: 2;
  }

  .il-depo-grade {
    grid-template-columns: 1fr 1fr;
  }

  .il-etapas {
    grid-template-columns: repeat(2, 1fr);
  }

  /* O escalonamento não cabe em tela estreita: tudo volta para a mesma linha */
  .il-beneficios li,
  .il-beneficios li:nth-child(2) {
    transform: none;
  }
}

@media (max-width: 575.98px) {
  .il-obras-trilho,
  .il-blog-trilho {
    --il-por-vista: 1;
  }

  .il-depo-grade {
    grid-template-columns: 1fr;
  }

  .il-etapas {
    grid-template-columns: 1fr;
  }

  .il-beneficios {
    grid-template-columns: 1fr 1fr;
  }

  .il-beneficios li:last-child {
    grid-column: span 2;
    max-width: 60%;
    margin-inline: auto;
  }

  .il-numero-valor {
    font-size: clamp(2rem, 1.4rem + 4vw, 2.75rem);
  }

  .il-marquee-trilho {
    gap: var(--il-space-6);
  }

  .il-marquee img {
    height: 46px;
  }
}

/* ---------- Modal de vídeo ---------- */
/* A proporção é variável: os depoimentos são verticais (9:16) e um quadro 16:9
   fixo os deixaria com tarja preta dos dois lados. Cada fachada informa a sua
   em data-il-video-w/h; 16:9 é só o padrão de quem não informa. */
.il-video-modal {
  --il-video-w: 16;
  --il-video-h: 9;
}

/* A altura da janela é o limite real num vídeo em pé: a largura sai dela. */
.il-video-modal .modal-dialog {
  max-width: min(92vw, calc(74vh * var(--il-video-w) / var(--il-video-h)));
}

.il-video-modal .modal-content {
  background: var(--il-navy-900);
  border: 1px solid var(--il-cloud-16);
  border-radius: var(--il-radius-lg);
  overflow: hidden;
}

.il-video-modal .modal-header {
  border-bottom: 1px solid var(--il-cloud-08);
  padding: var(--il-space-4) var(--il-space-5);
}

.il-video-modal .modal-title {
  font-family: var(--il-font-display);
  font-size: var(--il-fs-lg);
  margin: 0;
}

.il-video-modal .modal-body {
  padding: 0;
}

.il-video-fechar {
  background: transparent;
  border: 1px solid var(--il-cloud-16);
  border-radius: 50%;
  color: var(--il-cloud);
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  font-size: 0.95rem;
  transition: border-color var(--il-dur) var(--il-ease),
    color var(--il-dur) var(--il-ease);
}

.il-video-fechar:hover {
  border-color: var(--il-sun);
  color: var(--il-sun);
}

/* A proporção fica no contêiner, não no iframe: o quadro já nasce com a altura
   certa e o modal não pula de tamanho quando o embed entra. */
.il-video-quadro {
  aspect-ratio: var(--il-video-w) / var(--il-video-h);
  background: #000;
}

.il-video-quadro iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   9b  PÁGINA A ILUMISOL (e chamada final das internas)
   ============================================================ */

/* ---------- Missão, visão e valores ---------- */
.il-mvv-card {
  display: flex;
  flex-direction: column;
  gap: var(--il-space-4);
}

.il-mvv-icone {
  width: 54px;
  height: 54px;
  border-radius: var(--il-radius-md);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--il-ink);
  background: var(--il-grad-sun);
}

.il-mvv-title {
  margin: 0;
}

.il-mvv-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--il-space-3);
}

.il-mvv-lista li {
  position: relative;
  padding-left: var(--il-space-5);
  font-size: var(--il-fs-sm);
  line-height: var(--il-lh-relaxed);
  color: var(--il-cloud-70);
}

/* Marcador próprio: o disco padrão da <ul> não acompanha a entrelinha larga */
.il-mvv-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 2px;
  background: var(--il-sun);
  border-radius: 2px;
}

/* ---------- Energia solar ---------- */
.il-energia {
  background: var(--il-navy-800);
}

/* ---------- Depoimentos em vídeo ---------- */
.il-depo-video-card {
  display: flex;
  flex-direction: column;
  gap: var(--il-space-3);
}

.il-depo-video-card .il-facade {
  border-radius: var(--il-radius-md);
}

.il-depo-video-nome {
  margin: 0;
  font-weight: var(--il-fw-semibold);
  font-size: var(--il-fs-sm);
}

.il-depo-video-nome small {
  display: block;
  font-weight: var(--il-fw-normal);
  font-size: var(--il-fs-2xs);
  color: var(--il-cloud-56);
}

/* ---------- Chamada final ---------- */
.il-cta-card {
  position: relative;
  border-radius: var(--il-radius-xl);
  padding: clamp(2rem, 1.2rem + 3.4vw, 4rem);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(248, 183, 7, 0.16) 0%, transparent 62%),
    var(--il-navy-700);
  border: 1px solid var(--il-cloud-08);
  text-align: center;
}

.il-cta-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--il-space-3);
  justify-content: center;
  margin-top: var(--il-space-7);
}