/* ===================================================================
   ILUMISOL ENERGIA SOLAR — folha de estilo do site
   Base do template CDW Tech. Tokens de marca + o que o Bootstrap 5.3
   não cobre. Nenhum CSS inline nas views (regra 5 do CLAUDE.md).

   Índice
     1  Tokens (:root) e ponte com o Bootstrap
     2  Fallback métrico das webfonts
     3  Reset e base
     4  Tipografia utilitária
     5  Botões
     6  Header + navegação desktop
     7  Offcanvas mobile
     8  Componentes compartilhados
     9  HOME (por seção, ao fim do arquivo)
    10  Rodapé
    11  WhatsApp flutuante
    12  Página 404 e stub "em breve"
    13  Utilidades de performance e acessibilidade

   O CSS das seções que só aparecem rolando vive em style-adiado.css,
   carregado sem bloquear a renderização (ver o cabeçalho de lá). Cada
   bloco que saiu daqui deixou um comentário "→ style-adiado.css".
   =================================================================== */

/* ============================================================
   1  TOKENS
   ------------------------------------------------------------
   A paleta vem do CSS compilado do site atual (Next/Tailwind),
   para o rebuild continuar reconhecível como Ilumisol.

   Sobre as --color-<slug> do painel CDW (CLAUDE.md, regra de cores):
   o painel do id_site 32 hoje publica UM slug só — custom-primary
   com #62AC20, um verde que não aparece em lugar nenhum do site
   atual (o CTA de lá é #B9D66B). Ligar os tokens nele repintaria os
   botões para uma cor que a marca não usa, então a paleta fica em
   hex e a ponte com o painel está pronta logo abaixo, comentada.
   Assim que o painel receber as cores certas, é descomentar.
   ============================================================ */
:root {
  /* ---------- Superfícies ---------- */
  --il-navy-900: #001530;  /* poço mais profundo: hero, rodapé          */
  --il-navy-800: #0d1626;  /* fundo dominante do site                    */
  --il-navy-700: #1a2c4c;  /* cards e superfícies elevadas               */
  --il-navy-600: #284371;  /* bordas e divisores — decorativo, nunca texto */
  --il-ink: #051024;       /* preto de marca, para texto sobre claro     */
  --il-cloud: #ecf1f8;     /* texto claro sobre escuro                   */
  --il-cloud-70: rgba(236, 241, 248, 0.7);
  --il-cloud-56: rgba(236, 241, 248, 0.56);
  --il-cloud-16: rgba(236, 241, 248, 0.16);
  --il-cloud-08: rgba(236, 241, 248, 0.08);

  /* ---------- Marca ---------- */
  --il-sun: #f8b707;       /* amarelo solar — acento principal           */
  --il-sun-soft: #fcde8d;
  --il-lime: #b9d66b;      /* verde-limão — cor de ação                  */
  --il-deep: #00395c;      /* botão secundário                           */

  /* Ponte com o painel CDW — ativar quando os slugs certos existirem:
     --il-sun:  var(--color-custom-secondary, #f8b707);
     --il-lime: var(--color-custom-primary,   #b9d66b); */

  /* ---------- Gradientes e luz ---------- */
  --il-grad-sun: linear-gradient(135deg, #fcde8d 0%, #f8b707 52%, #fbbf24 100%);
  --il-grad-navy: linear-gradient(180deg, #0d1626 0%, #001530 100%);
  /* Malha que ecoa a geometria de um módulo fotovoltaico. Usada em
     ::before de seção, sempre com opacidade baixa. */
  --il-grid: linear-gradient(rgba(236, 241, 248, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 241, 248, 0.045) 1px, transparent 1px);
  --il-grid-size: 68px 68px;

  /* ---------- Tipografia ---------- */
  /* Titillium Web é a fonte única: display e texto saem da mesma família, e a
     hierarquia vem do peso e do tracking, não da troca de tipo. Os dois tokens
     continuam separados de propósito — é o ponto de troca se algum dia o display
     virar outra família. */
  --il-font-display: "Titillium Web", "Titillium Fallback", system-ui, sans-serif;
  --il-font-body: "Titillium Web", "Titillium Fallback", system-ui, sans-serif;

  /* Pesos disponíveis na família (não há 100, 500 nem 800 — pedir um deles faz
     o navegador sintetizar e o texto sai deformado). Use sempre os tokens. */
  --il-fw-light: 300;
  --il-fw-normal: 400;
  --il-fw-semibold: 600;
  --il-fw-bold: 700;
  --il-fw-black: 900;

  --il-fs-3xs: 0.75rem;
  --il-fs-2xs: 0.8125rem;
  --il-fs-sm: clamp(0.875rem, 0.85rem + 0.14vw, 0.9375rem);
  /* A Titillium tem altura-x menor que a Archivo: no mesmo tamanho nominal o
     texto parece um corpo menor. Um degrau a mais devolve a leitura. */
  --il-fs-md: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);
  --il-fs-lg: clamp(1.0625rem, 1rem + 0.32vw, 1.1875rem);
  --il-fs-xl: clamp(1.25rem, 1.14rem + 0.48vw, 1.5rem);
  --il-fs-h3: clamp(1.375rem, 1.2rem + 0.78vw, 1.75rem);
  --il-fs-h2: clamp(1.75rem, 1.36rem + 1.72vw, 2.75rem);
  --il-fs-h1: clamp(2.25rem, 1.66rem + 2.6vw, 4rem);

  --il-lh-tight: 1.04;
  --il-lh-snug: 1.18;
  --il-lh-normal: 1.55;
  --il-lh-relaxed: 1.72;
  /* A Titillium já é uma humanista estreita: o -0.022em que servia à Bricolage
     fecha demais as contrapunções aqui. -0.012em mantém o título compacto sem
     colar as letras. */
  --il-track-tight: -0.012em;
  --il-track-wide: 0.085em;

  /* ---------- Espaço (base 4px) ---------- */
  --il-space-1: 0.25rem;
  --il-space-2: 0.5rem;
  --il-space-3: 0.75rem;
  --il-space-4: 1rem;
  --il-space-5: 1.5rem;
  --il-space-6: 2rem;
  --il-space-7: 2.5rem;
  --il-space-8: 3rem;
  --il-space-10: 4rem;
  --il-space-12: 5rem;
  --il-section-y: clamp(3.5rem, 2.2rem + 5vw, 7rem);
  --il-header-h: 84px;

  /* ---------- Raio ---------- */
  --il-radius-xs: 0.375rem;
  --il-radius-sm: 0.5rem;
  --il-radius-md: 0.75rem;
  --il-radius-lg: 1.25rem;
  --il-radius-xl: 1.75rem;
  --il-radius-pill: 999px;

  /* ---------- Sombra e brilho ---------- */
  --il-shadow-lg: 0 28px 60px -24px rgba(0, 10, 25, 0.66);
  --il-glow-sun: 0 0 0 1px rgba(248, 183, 7, 0.26), 0 14px 34px -12px rgba(248, 183, 7, 0.38);
  --il-ring: 0 0 0 3px rgba(248, 183, 7, 0.45);

  /* ---------- Movimento ---------- */
  --il-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --il-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --il-dur: 240ms;
  --il-dur-slow: 420ms;

  /* ---------- Camadas ---------- */
  --il-z-header: 1030;
  --il-z-float: 1060;
}

/* Ponte com o Bootstrap 5.3 — faz .form-control, .dropdown-menu, .modal
   e .btn-close herdarem a marca sem precisar de override caso a caso. */
:root {
  --bs-body-font-family: var(--il-font-body);
  --bs-body-font-size: var(--il-fs-md);
  --bs-body-line-height: var(--il-lh-normal);
  --bs-body-color: var(--il-cloud);
  --bs-body-bg: var(--il-navy-800);
  --bs-secondary-color: var(--il-cloud-70);
  --bs-border-color: var(--il-cloud-16);
  --bs-border-radius: var(--il-radius-md);
  --bs-link-color: var(--il-sun);
  --bs-link-hover-color: var(--il-sun-soft);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --il-dur: 0ms;
    --il-dur-slow: 0ms;
  }
}

/* ============================================================
   2  FALLBACK MÉTRICO DAS WEBFONTS
   ------------------------------------------------------------
   As webfonts carregam com display=swap. Sem um fallback de
   métrica parecida, a troca empurra o layout e gera CLS. Estas
   duas famílias sintéticas ajustam a fonte local para ocupar
   quase o mesmo espaço da webfont enquanto ela não chega.
   ============================================================ */
/* Fallback métrico da Titillium Web.
   Sem ele, a troca de fonte no fim do `display=swap` empurra o layout (CLS).
   Os valores foram medidos no navegador, comparando o mesmo texto nas duas
   fontes a 1000px:
     Titillium   largura 1302,4 · ascendente 1,133em · descendente 0,388em
     Helvetica   largura 1404,6 · ascendente 0,966em · descendente 0,227em
   size-adjust = 1302,4 / 1404,6 = 92,7%
   Os overrides são relativos ao em já reduzido pelo size-adjust, por isso
   passam de 100%:  ascent = 1,133 / 0,927 = 122,2%  ·  descent = 0,388 / 0,927 = 41,9%
   Conferido depois de aplicar: largura com 0,02% de diferença e caixa de linha
   de 153px contra os 152px da Titillium. */
@font-face {
  font-family: "Titillium Fallback";
  src: local("Helvetica Neue"), local("Arial");
  size-adjust: 92.7%;
  ascent-override: 122.2%;
  descent-override: 41.9%;
  line-gap-override: 0%;
}

/* ============================================================
   3  RESET E BASE
   ============================================================ */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--il-font-body);
  font-size: var(--il-fs-md);
  line-height: var(--il-lh-normal);
  color: var(--il-cloud);
  background: var(--il-navy-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

section[id] {
  scroll-margin-top: var(--il-header-h);
}

/* Trava de rolagem horizontal.
   Uma .row com gutter maior que o do container (caso do g-5) recebe
   margin-inline de -24px, enquanto o .container-xxl só tem 12px de padding —
   sobram 12px para cada lado, o suficiente para o mobile ganhar barra
   horizontal. `clip` corta esse excedente sem criar contexto de rolagem, então
   o position:sticky do header e o scroll-margin das âncoras continuam valendo
   (overflow:hidden quebraria os dois). */
main,
.site-footer {
  overflow-x: clip;
}

section {
  position: relative;
}

h1,
h2,
h3,
h4 {
  font-family: var(--il-font-display);
  font-weight: var(--il-fw-bold);
  letter-spacing: var(--il-track-tight);
  line-height: var(--il-lh-snug);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--il-dur) var(--il-ease);
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--il-sun);
  color: var(--il-ink);
}

:focus-visible {
  outline: none;
  box-shadow: var(--il-ring);
  border-radius: var(--il-radius-xs);
}

/* Link de pulo — só aparece quando recebe foco pelo teclado */
.il-skip {
  position: absolute;
  left: var(--il-space-4);
  top: -100%;
  z-index: 2000;
  background: var(--il-sun);
  color: var(--il-ink);
  font-weight: var(--il-fw-bold);
  padding: var(--il-space-3) var(--il-space-5);
  border-radius: 0 0 var(--il-radius-md) var(--il-radius-md);
  transition: top var(--il-dur) var(--il-ease);
}

.il-skip:focus {
  top: 0;
  color: var(--il-ink);
}

/* ============================================================
   4  TIPOGRAFIA UTILITÁRIA
   ============================================================ */
.il-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--il-space-2);
  font-family: var(--il-font-body);
  font-size: var(--il-fs-2xs);
  font-weight: var(--il-fw-bold);
  letter-spacing: var(--il-track-wide);
  text-transform: uppercase;
  color: var(--il-sun);
  margin-bottom: var(--il-space-4);
}

/* Traço curto antes do rótulo, no lugar de um ícone */
.il-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--il-grad-sun);
  border-radius: 2px;
}

.il-h1 {
  font-size: var(--il-fs-h1);
  line-height: var(--il-lh-tight);
}

.il-h2 {
  font-size: var(--il-fs-h2);
  line-height: var(--il-lh-snug);
  margin-bottom: var(--il-space-4);
}

.il-h3 {
  font-size: var(--il-fs-h3);
  line-height: var(--il-lh-snug);
}

.il-lead {
  font-size: var(--il-fs-lg);
  line-height: var(--il-lh-relaxed);
  color: var(--il-cloud-70);
  max-width: 62ch;
}

.il-body {
  color: var(--il-cloud-70);
  line-height: var(--il-lh-relaxed);
}

/* Destaque inline: o sol atrás da palavra */
.il-hi {
  color: var(--il-sun);
}

.il-narrow {
  max-width: 58ch;
}

.il-center {
  margin-inline: auto;
  text-align: center;
}

/* ============================================================
   5  BOTÕES
   ============================================================ */
.il-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--il-space-2);
  font-family: var(--il-font-body);
  font-size: var(--il-fs-sm);
  font-weight: var(--il-fw-bold);
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 0.9375rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--il-radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--il-dur) var(--il-ease),
    box-shadow var(--il-dur) var(--il-ease),
    background-color var(--il-dur) var(--il-ease),
    color var(--il-dur) var(--il-ease),
    border-color var(--il-dur) var(--il-ease);
}

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

.il-btn:active {
  transform: translateY(0);
}

/* Ação principal — padrão único de botão do projeto.
   Todo CTA usa esta variante: hero, "Comece agora", "Saiba mais", envio de
   formulário. O verde-limão continua na paleta como cor de acento (checks,
   setas, checkbox marcado), mas não é mais um estilo de botão — dois primários
   competindo só diluíam a hierarquia. */
.il-btn-primary {
  background: var(--il-grad-sun);
  color: var(--il-ink);
}

.il-btn-primary:hover {
  color: var(--il-ink);
  box-shadow: var(--il-glow-sun);
}

/* Secundário sobre escuro */
.il-btn-ghost {
  background: transparent;
  border-color: var(--il-cloud-16);
  color: var(--il-cloud);
}

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

.il-btn-lg {
  font-size: var(--il-fs-md);
  padding: 1.0625rem 1.875rem;
}

.il-btn-block {
  width: 100%;
}

/* A seta acompanha o movimento do botão */
.il-btn-arrow {
  display: inline-block;
  transition: transform var(--il-dur) var(--il-ease);
}

.il-btn:hover .il-btn-arrow {
  transform: translate(2px, -2px);
}

/* ============================================================
   6  HEADER + NAVEGAÇÃO DESKTOP
   ============================================================ */
/* Ícones da primeira dobra — cópia de theme/css/bootstrap-icons-subset.css.
   O subset carrega adiado (ver header.php). Estes três aparecem no primeiro
   render — hambúrguer, seta do menu desktop e WhatsApp flutuante — e não podem
   esperar por ele. As regras são idênticas às do subset, então a ordem de
   chegada não muda a cascata. Ao regenerar o subset, atualizar esta cópia. */
.bi {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--bi) no-repeat center / contain;
  mask: var(--bi) no-repeat center / contain;
}

.bi::before {
  content: none;
}

.bi-list { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5'/> </svg>"); }
.bi-chevron-down { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/> </svg>"); }
.bi-whatsapp { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path d='M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232'/> </svg>"); }

.site-header-wrap {
  position: sticky;
  top: 0;
  z-index: var(--il-z-header);
}

.site-header,
.header-mobile {
  background: rgba(0, 21, 48, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--il-cloud-08);
  padding: var(--il-space-4) 0;
}

.header-logo img {
  height: 60px;
  width: auto;
  display: block;
}

.site-header .nav-link {
  color: var(--il-cloud);
  font-family: var(--il-font-body);
  font-weight: var(--il-fw-semibold);
  font-size: var(--il-fs-sm);
  padding: 0;
  background: transparent;
  border: 0;
  position: relative;
  transition: color var(--il-dur) var(--il-ease);
}

/* Sublinhado que cresce do centro no hover e fica no item ativo */
.site-header .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--il-grad-sun);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform var(--il-dur) var(--il-ease);
}

.site-header .nav-link:hover,
.site-header .nav-link.active,
.site-header .nav-link[aria-expanded="true"] {
  color: var(--il-sun);
}

.site-header .nav-link:hover::after,
.site-header .nav-link.active::after {
  transform: scaleX(1);
}

/* O caret nativo do Bootstrap é um triângulo cheio; um chevron fino
   combina melhor com o peso da tipografia. */
.site-header .dropdown-toggle::after {
  display: none;
}

.il-nav-caret {
  display: inline-block;
  margin-left: 0.3rem;
  font-size: 0.7em;
  transition: transform var(--il-dur) var(--il-ease);
}

.site-header .nav-link[aria-expanded="true"] .il-nav-caret {
  transform: rotate(180deg);
}

.il-dropdown {
  --bs-dropdown-bg: var(--il-navy-700);
  --bs-dropdown-border-color: var(--il-cloud-16);
  --bs-dropdown-link-color: var(--il-cloud);
  --bs-dropdown-link-hover-bg: var(--il-cloud-08);
  --bs-dropdown-link-hover-color: var(--il-sun);
  --bs-dropdown-link-active-bg: var(--il-cloud-08);
  --bs-dropdown-link-active-color: var(--il-sun);
  border-radius: var(--il-radius-md);
  box-shadow: var(--il-shadow-lg);
  padding: var(--il-space-2);
  margin-top: var(--il-space-4);
  min-width: 15rem;
}

.il-dropdown .dropdown-item {
  border-radius: var(--il-radius-xs);
  font-size: var(--il-fs-sm);
  font-weight: var(--il-fw-semibold);
  padding: 0.625rem 0.875rem;
}

.header-mobile-menu {
  background: transparent;
  border: 1px solid var(--il-cloud-16);
  border-radius: var(--il-radius-sm);
  color: var(--il-cloud);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.375rem 0.625rem;
  transition: border-color var(--il-dur) var(--il-ease),
    color var(--il-dur) var(--il-ease);
}

.header-mobile-menu:hover {
  border-color: var(--il-sun);
  color: var(--il-sun);
}

/* ============================================================
   7  OFFCANVAS MOBILE
   ------------------------------------------------------------
   O submenu usa collapse, não dropdown: o dropdown do Bootstrap
   posiciona com Popper em coordenadas fixas e escapa do offcanvas.
   ============================================================ */
.main-nav-offcanvas {
  /* No Bootstrap 5.3 a largura do offcanvas vem da custom property, não de
     `width` — declarar width direto é sobrescrito pelo var() do componente. */
  --bs-offcanvas-width: min(21rem, 88vw);
  background: var(--il-navy-900);
  color: var(--il-cloud);
}

.mobile-sidebar-header {
  border-bottom: 1px solid var(--il-cloud-08);
  /* O bundle deste projeto não traz o justify-content do .offcanvas-header,
     e sem ele o botão de fechar cola no logo em vez de ir para a direita. */
  justify-content: space-between;
}

.mobile-sidebar-logo img {
  height: 36px;
  width: auto;
}

.mobile-sidebar-close {
  background: transparent;
  border: 0;
  color: var(--il-cloud);
  font-size: 1.15rem;
}

.mobile-sidebar-nav {
  list-style: none;
  margin: 0;
  padding: var(--il-space-5);
}

.mobile-sidebar-nav > li + li {
  border-top: 1px solid var(--il-cloud-08);
}

.mobile-sidebar-nav a,
.mobile-sidebar-sub-toggle {
  color: var(--il-cloud);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-family: var(--il-font-body);
  font-size: var(--il-fs-lg);
  font-weight: var(--il-fw-semibold);
  padding: 0.875rem 0;
  background: transparent;
  border: 0;
  text-align: left;
}

.mobile-sidebar-nav a:hover,
.mobile-sidebar-nav a.active,
.mobile-sidebar-sub-toggle:hover,
.mobile-sidebar-sub-toggle[aria-expanded="true"] {
  color: var(--il-sun);
}

.mobile-sidebar-sub-toggle i {
  font-size: 0.85em;
  transition: transform var(--il-dur) var(--il-ease);
}

.mobile-sidebar-sub-toggle[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.mobile-sidebar-subnav {
  list-style: none;
  margin: 0 0 var(--il-space-3);
  padding: 0 0 0 var(--il-space-4);
  border-left: 2px solid var(--il-cloud-16);
}

.mobile-sidebar-subnav a {
  font-size: var(--il-fs-md);
  font-weight: var(--il-fw-normal);
  color: var(--il-cloud-70);
  padding: 0.5rem 0;
}

.mobile-sidebar-cta {
  padding: 0 var(--il-space-5) var(--il-space-5);
}

.mobile-sidebar-contact {
  padding: 0 var(--il-space-5) var(--il-space-5);
  font-size: var(--il-fs-sm);
}

.mobile-sidebar-contact span {
  color: var(--il-cloud-56);
  display: block;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: var(--il-track-wide);
  font-size: var(--il-fs-3xs);
}

.mobile-sidebar-contact a {
  color: var(--il-cloud);
  display: inline-flex;
  align-items: center;
  gap: var(--il-space-2);
}

.mobile-sidebar-contact a:hover {
  color: var(--il-sun);
}

/* ============================================================
   8  COMPONENTES COMPARTILHADOS
   ============================================================ */
.il-section {
  padding-block: var(--il-section-y);
}

.il-section-deep {
  background: var(--il-navy-900);
}

/* Malha fotovoltaica de fundo. Fica no ::before para não competir
   com o conteúdo e para poder ser recortada por máscara. */
.il-grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--il-grid);
  background-size: var(--il-grid-size);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 78%);
  pointer-events: none;
}

/* → style-adiado.css: card (MVV de /a-ilumisol) */

.il-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--il-space-2);
  background: var(--il-cloud-08);
  border: 1px solid var(--il-cloud-16);
  border-radius: var(--il-radius-pill);
  padding: 0.4375rem 0.9375rem;
  font-size: var(--il-fs-2xs);
  font-weight: var(--il-fw-semibold);
}

/* → style-adiado.css: trilho horizontal e fachada de vídeo */

/* ============================================================
   9  HOME
   ------------------------------------------------------------
   Uma sub-seção por bloco, na mesma ordem da view.
   ============================================================ */

/* ---------- 1. Hero ---------- */
.il-hero {
  position: relative;
  min-height: clamp(30rem, 24rem + 20vw, 40rem);
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--il-header-h) + var(--il-space-8)) var(--il-space-12);
  overflow: hidden;
  background: var(--il-navy-900);
}

/* A foto cobre só a faixa de cima do hero, não o hero inteiro. O motivo é
   aritmético: bg-hero-usina tem 1920x486 e, com object-fit:cover num hero de
   ~1440x800, o navegador teria de ampliá-la 1,65x. Encurtando a área de mídia
   para 82%, a ampliação cai para ~1,3x. O resto do hero é navy-900 sólido —
   exatamente a cor em que o véu termina, então a emenda não aparece.
   Quando chegar a foto de hero em alta (pendência 8), esta altura pode voltar
   a 100% sem mais nada. */
.il-hero-media {
  position: absolute;
  inset: 0 0 auto 0;
  height: 82%;
}

.il-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A usina ocupa a metade de baixo do quadro; 62% mantém as fileiras de
     módulos visíveis e joga a lavoura para fora do corte. */
  object-position: center 62%;
}

/* Véu duplo: um gradiente vertical para o texto assentar, e um brilho
   quente vindo do canto, que é o sol implícito da marca.
   O topo é mais fechado que na versão anterior porque esta foto é clara
   ali em cima (lavoura ao sol) e o eyebrow amarelo sumia. */
.il-hero-veu {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 88% 8%, rgba(248, 183, 7, 0.2) 0%, transparent 62%),
    linear-gradient(180deg, rgba(0, 21, 48, 0.82) 0%, rgba(0, 21, 48, 0.46) 26%, rgba(0, 21, 48, 0.86) 74%, var(--il-navy-900) 100%);
}

.il-hero-conteudo {
  position: relative;
}

.il-hero-titulo {
  max-width: 22ch;
  margin-bottom: var(--il-space-5);
  font-size: 4.2rem;
  /* O 700 da Titillium é um bold de texto, não de display: no corpo do hero
     ele some. O 900 (Black) é o peso que a família reserva para títulos
     grandes — e já está carregado por causa dos contadores. */
  font-weight: normal;
  text-shadow: 0 2px 28px rgba(0, 10, 25, 0.55);
}

/* Abaixo de lg as quebras explícitas do <h1> saem de cena e o título flui —
   e foi aí que "energia solar" partia em duas linhas. O termo é o que o <h1>
   entrega ao buscador; parti-lo enfraquece as duas metades. Cabe inteiro até
   em 320px, onde o clamp do --il-fs-hero já está no piso de 2,5rem. */
.il-hero-titulo .il-hi {
  white-space: nowrap;
}

.il-hero-lead {
  max-width: 54ch;
  color: var(--il-cloud);
  /* O 300 só entra em texto grande: abaixo de ~1.25rem, sobre fundo escuro,
     o afinamento óptico come o traço e a leitura piora. */
  font-size: var(--il-fs-xl);
  font-weight: var(--il-fw-light);
  line-height: 1.5;
}

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

/* Faixa de indicadores da primeira dobra */
.il-hero-faixa {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: var(--il-space-8) 0 0;
  padding: 0;
  border-top: 1px solid var(--il-cloud-16);
}

.il-hero-faixa li {
  padding: var(--il-space-5) var(--il-space-5) 0;
  border-right: 1px solid var(--il-cloud-08);
}

.il-hero-faixa li:first-child {
  padding-left: 0;
}

.il-hero-faixa li:last-child {
  border-right: 0;
}

.il-hero-faixa-v {
  display: block;
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  font-weight: normal;
  line-height: 1;
  letter-spacing: var(--il-track-tight);
  /* Mesmo tratamento dos contadores da seção 3: largura de dígito fixa. */
  font-variant-numeric: tabular-nums;
}

.il-hero-faixa-u {
  font-style: normal;
  font-size: var(--il-fs-sm);
  font-weight: var(--il-fw-semibold);
  color: var(--il-sun);
  margin-left: 0.25rem;
}

.il-hero-faixa-l {
  display: block;
  font-size: var(--il-fs-3xs);
  font-weight: var(--il-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--il-cloud-56);
  margin-top: var(--il-space-2);
}

/* Entrada escalonada do hero: um movimento só, no carregamento */
@media (prefers-reduced-motion: no-preference) {
  .il-hero-conteudo > * {
    animation: il-sobe var(--il-dur-slow) var(--il-ease-out) backwards;
  }
  .il-hero-conteudo > :nth-child(1) { animation-delay: 60ms; }
  .il-hero-conteudo > :nth-child(2) { animation-delay: 140ms; }
  .il-hero-conteudo > :nth-child(3) { animation-delay: 220ms; }
  .il-hero-conteudo > :nth-child(4) { animation-delay: 300ms; }
}

@keyframes il-sobe {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 2. Quem somos ---------- */
.il-quem {
  background: var(--il-navy-800);
}

.il-linha-tempo {
  list-style: none;
  margin: var(--il-space-6) 0 0;
  padding: 0 0 0 var(--il-space-5);
  border-left: 1px solid var(--il-cloud-16);
  display: grid;
  gap: var(--il-space-3);
}

.il-linha-tempo li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--il-space-3);
  font-size: var(--il-fs-sm);
  color: var(--il-cloud-70);
}

/* Marcador na linha do tempo, alinhado à borda da <ol> */
.il-linha-tempo li::before {
  content: "";
  position: absolute;
  left: calc(var(--il-space-5) * -1 - 4px);
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--il-sun);
}

.il-linha-ano {
  font-family: var(--il-font-display);
  font-weight: var(--il-fw-bold);
  font-size: var(--il-fs-md);
  color: var(--il-sun);
  min-width: 3.5ch;
  font-variant-numeric: tabular-nums;
}

.il-quem-foto {
  margin: 0;
  border-radius: var(--il-radius-lg);
  overflow: hidden;
  box-shadow: var(--il-shadow-lg);
}

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

/* → style-adiado.css: seção 3, Números */

/* ---------- 4. Por que investir ---------- */
/* → style-adiado.css: .il-porque */

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

.il-checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--il-space-3);
  color: var(--il-cloud-70);
  font-size: var(--il-fs-sm);
}

.il-checks i {
  color: var(--il-lime);
  font-size: 1.1rem;
  line-height: 1.3;
}

/* → style-adiado.css: cards de benefício */

/* ---------- 5. Nossas obras ---------- */

/* Cabeçalho de seção: título à esquerda, ação à direita; empilha no mobile */
.il-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--il-space-5);
}

.il-cabecalho > div:first-child {
  max-width: 62ch;
}

/* Atalhos por tipo — continuam levando às páginas de serviço */
.il-obras-tipos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--il-space-2);
  margin: var(--il-space-6) 0 0;
  padding: 0;
}

.il-obras-tipo {
  transition: background-color var(--il-dur) var(--il-ease),
    border-color var(--il-dur) var(--il-ease),
    color var(--il-dur) var(--il-ease);
}

/* → style-adiado.css: ícone do atalho de tipo */

.il-obras-tipo:hover {
  background: var(--il-cloud);
  border-color: var(--il-cloud);
  color: var(--il-ink);
}

/* → style-adiado.css: trilho de obras */

/* → style-adiado.css: seções 6 a 10 (Ametista, Processo, Aplicativo, Depoimentos, Clientes) */

/* ---------- 11. Novidades ---------- */
.il-blog-trilho {
  --il-por-vista: 4;
}

.il-post-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--il-space-4);
  background: var(--il-navy-700);
  border: 1px solid var(--il-cloud-08);
  border-radius: var(--il-radius-lg);
  overflow: hidden;
  transition: border-color var(--il-dur) var(--il-ease),
    transform var(--il-dur) var(--il-ease);
}

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

.il-post-link img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* Card sem capa — post sem imagem no painel, ou capa que não carregou e o
   site.js removeu. O respiro do card vem do gap entre irmãos, que não vale
   antes do primeiro: sem isto o título encosta na borda de cima. */
.il-post-link > :first-child:not(img) {
  padding-top: var(--il-space-5);
}

.il-post-title {
  font-family: var(--il-font-display);
  font-size: var(--il-fs-lg);
  line-height: var(--il-lh-snug);
  margin: 0;
  padding-inline: var(--il-space-5);
}

.il-post-mais {
  margin-top: auto;
  padding: 0 var(--il-space-5) var(--il-space-5);
  color: var(--il-lime);
  font-size: var(--il-fs-2xs);
  font-weight: var(--il-fw-bold);
  letter-spacing: var(--il-track-wide);
  text-transform: uppercase;
}

/* → style-adiado.css: Perguntas frequentes e Paginação */

/* ---------- 12 + 13. Contato ---------- */
.il-contato {
  background: var(--il-navy-900);
}

.il-contato-dados {
  list-style: none;
  margin: var(--il-space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--il-space-4);
  font-size: var(--il-fs-sm);
  color: var(--il-cloud-70);
}

.il-contato-dados li {
  display: flex;
  align-items: flex-start;
  gap: var(--il-space-3);
}

.il-contato-dados i {
  color: var(--il-sun);
  margin-top: 0.15rem;
}

.il-contato-dados a:hover {
  color: var(--il-sun);
}

/* Mapa por fachada — o <iframe> do Google Maps só entra no clique.
   A fachada é a mesma malha de módulo usada nas seções (--il-grid), para o
   cartão não parecer um buraco esperando carregar. */
.il-mapa {
  position: relative;
  margin-top: var(--il-space-6);
  aspect-ratio: 16 / 10;
  border: 1px solid var(--il-cloud-08);
  border-radius: var(--il-radius-xl);
  overflow: hidden;
  background: var(--il-navy-700);
}

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

.il-mapa-abrir {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--il-space-3);
  width: 100%;
  padding: var(--il-space-5);
  border: 0;
  cursor: pointer;
  color: var(--il-cloud);
  background: linear-gradient(160deg, var(--il-navy-700) 0%, var(--il-navy-900) 100%);
  transition: background-color var(--il-dur) var(--il-ease);
}

.il-mapa-grade {
  position: absolute;
  inset: 0;
  background-image: var(--il-grid);
  background-size: var(--il-grid-size);
  /* Decorativo: some nas bordas para não virar uma grade de planilha. */
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%);
          mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 100%);
}

.il-mapa-pino {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--il-radius-pill);
  font-size: 1.5rem;
  color: var(--il-ink);
  background: var(--il-grad-sun);
  transition: transform var(--il-dur) var(--il-ease), box-shadow var(--il-dur) var(--il-ease);
}

.il-mapa-abrir:hover .il-mapa-pino {
  transform: translateY(-3px);
  box-shadow: var(--il-glow-sun);
}

.il-mapa-rotulo {
  position: relative;
  text-align: center;
}

.il-mapa-rotulo strong {
  display: block;
  font-size: var(--il-fs-md);
  font-weight: var(--il-fw-bold);
}

.il-mapa-rotulo small {
  display: block;
  font-size: var(--il-fs-2xs);
  font-weight: var(--il-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--il-cloud-56);
  margin-top: var(--il-space-1);
}

.il-mapa-link {
  display: inline-flex;
  align-items: center;
  gap: var(--il-space-2);
  margin-top: var(--il-space-4);
  font-size: var(--il-fs-2xs);
  font-weight: var(--il-fw-semibold);
  color: var(--il-cloud-70);
}

.il-mapa-link:hover {
  color: var(--il-sun);
}

.il-form-card {
  background: var(--il-navy-700);
  border: 1px solid var(--il-cloud-08);
  border-radius: var(--il-radius-xl);
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.75rem);
}

.il-form-card .form-label {
  font-size: var(--il-fs-2xs);
  font-weight: var(--il-fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--il-cloud-70);
  margin-bottom: var(--il-space-2);
}

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

.il-input {
  background: rgba(0, 21, 48, 0.6);
  border: 1px solid var(--il-cloud-16);
  color: var(--il-cloud);
  border-radius: var(--il-radius-sm);
  padding: 0.75rem 0.9375rem;
  transition: border-color var(--il-dur) var(--il-ease),
    box-shadow var(--il-dur) var(--il-ease);
}

.il-input:focus {
  background: rgba(0, 21, 48, 0.85);
  border-color: var(--il-sun);
  color: var(--il-cloud);
  box-shadow: var(--il-ring);
}

.il-input::placeholder {
  color: var(--il-cloud-56);
}

/* O Bootstrap pinta :disabled com --bs-secondary-bg, um cinza claro que dentro
   do card navy parece caixa quebrada. O select de cidade nasce desabilitado —
   é o primeiro estado que o visitante vê — então precisa parecer um campo em
   espera, não um defeito. background-color, e não o shorthand, para a seta do
   select (que é background-image) continuar no lugar. */
.il-input:disabled {
  background-color: rgba(0, 21, 48, 0.3);
  border-color: var(--il-cloud-08);
  color: var(--il-cloud-56);
  cursor: not-allowed;
}

/* O select herda do Bootstrap uma seta escura, invisível no fundo navy.
   Como .il-input usa o shorthand `background`, ele zera position/size/repeat
   junto — por isso as três precisam ser redeclaradas aqui, senão a seta
   ladrilha a partir do canto superior esquerdo. */
select.il-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ECF1F8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 14px 10px;
  padding-right: 2.25rem;
}

select.il-input option {
  background: var(--il-navy-700);
  color: var(--il-cloud);
}

.il-textarea {
  min-height: 8rem;
  resize: vertical;
}

.il-check .form-check-input {
  background-color: rgba(0, 21, 48, 0.6);
  border-color: var(--il-cloud-16);
}

.il-check .form-check-input:checked {
  background-color: var(--il-lime);
  border-color: var(--il-lime);
}

.il-check .form-check-label {
  font-size: var(--il-fs-sm);
  color: var(--il-cloud-70);
}

.il-check a {
  color: var(--il-sun);
  text-decoration: underline;
}

/* Honeypot: tem que existir no DOM e ser inalcançável por gente.
   display:none faria alguns robôs ignorarem o campo — daí o deslocamento. */
.il-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Responsivo da home ---------- */
/* Só o que vale para a primeira tela (hero e cabeçalho de seção). O responsivo
   das seções de baixo foi junto com elas para style-adiado.css. */
@media (max-width: 991.98px) {
  .il-hero {
    min-height: 30rem;
    align-items: center;
    text-align: center;
  }

  .il-hero-titulo,
  .il-hero-lead {
    margin-inline: auto;
  }

  .il-hero-acoes {
    justify-content: center;
  }

  /* Quatro colunas de indicador não cabem em tela estreita; viram 2x2 e as
     bordas verticais saem da vez do meio. */
  .il-hero-faixa {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--il-space-4);
  }

  .il-hero-faixa li,
  .il-hero-faixa li:first-child {
    padding: var(--il-space-4) var(--il-space-3) 0;
  }

  .il-hero-faixa li:nth-child(2n) {
    border-right: 0;
  }

  .il-cabecalho {
    align-items: flex-start;
  }
}

/* → style-adiado.css: Modal de vídeo */

/* ============================================================
   9b  PÁGINA A ILUMISOL
   ============================================================ */

/* ---------- Somos Ilumisol ---------- */
.il-hashtag {
  font-family: var(--il-font-display);
  font-size: var(--il-fs-lg);
  font-weight: var(--il-fw-bold);
  letter-spacing: var(--il-track-tight);
  color: var(--il-sun);
  margin-top: var(--il-space-5);
}

/* → style-adiado.css: Missão/visão/valores, Energia solar, Depoimentos em vídeo e Chamada final */

/* ============================================================
   9c  BLOG — LISTAGEM E POST
   ============================================================ */

/* ---------- Destaque ---------- */
.il-destaque-link {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  gap: var(--il-space-8);
  background: var(--il-navy-700);
  border: 1px solid var(--il-cloud-08);
  border-radius: var(--il-radius-xl);
  overflow: hidden;
  color: var(--il-cloud);
  transition: border-color var(--il-dur) var(--il-ease);
}

.il-destaque-link:hover {
  border-color: rgba(248, 183, 7, 0.32);
}

.il-destaque-foto {
  margin: 0;
  height: 100%;
}

.il-destaque-foto img {
  width: 100%;
  height: 100%;
  min-height: 20rem;
  object-fit: cover;
  display: block;
  transition: transform var(--il-dur-slow) var(--il-ease-out);
}

.il-destaque-link:hover .il-destaque-foto img {
  transform: scale(1.03);
}

.il-destaque-texto {
  padding: var(--il-space-7) var(--il-space-7) var(--il-space-7) 0;
}

.il-destaque-title {
  margin-bottom: var(--il-space-4);
}

/* ---------- Grade de posts ---------- */
.il-post-grade {
  height: 100%;
}

.il-post-grade .il-post-link {
  height: 100%;
}

.il-post-meta {
  margin: 0;
  padding-inline: var(--il-space-5);
  font-size: var(--il-fs-2xs);
  color: var(--il-cloud-56);
}

/* No cabeçalho do post a meta não está dentro de um card */
.il-page-hero .il-post-meta {
  padding-inline: 0;
  margin-bottom: var(--il-space-4);
}

/* ---------- Post ---------- */
.il-artigo-title {
  max-width: 24ch;
}

.il-artigo-conteudo {
  background: var(--il-navy-800);
}

/* O corpo vem do editor do painel com marcação livre (Froala): as regras abaixo
   normalizam o que chega, para o post não depender de disciplina de redação. */
.il-artigo-corpo {
  max-width: 68ch;
  margin-inline: auto;
  font-size: var(--il-fs-lg);
  line-height: var(--il-lh-relaxed);
  color: var(--il-cloud-70);
}

.il-artigo-corpo > * + * {
  margin-top: var(--il-space-5);
}

.il-artigo-corpo h2,
.il-artigo-corpo h3,
.il-artigo-corpo h4 {
  color: var(--il-cloud);
  margin-top: var(--il-space-8);
}

.il-artigo-corpo h2 { font-size: var(--il-fs-h2); }
.il-artigo-corpo h3 { font-size: var(--il-fs-h3); }
.il-artigo-corpo h4 { font-size: var(--il-fs-xl); }

.il-artigo-corpo strong,
.il-artigo-corpo b {
  color: var(--il-cloud);
  font-weight: var(--il-fw-bold);
}

.il-artigo-corpo a {
  color: var(--il-sun);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* width e height chegam no <img> pelo Home::dimensionarImagensDoCorpo(), com a
   medida real do arquivo: é o que reserva a altura antes de a imagem baixar
   (CLS). max-width + height:auto encolhem a caixa mantendo a proporção.
   Não declarar `width: auto` aqui: ele anula o atributo e a reserva some. */
.il-artigo-corpo img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
  border-radius: var(--il-radius-lg);
}

.il-artigo-corpo ul,
.il-artigo-corpo ol {
  padding-left: var(--il-space-6);
}

.il-artigo-corpo li + li {
  margin-top: var(--il-space-2);
}

.il-artigo-corpo blockquote {
  margin: var(--il-space-6) 0;
  padding-left: var(--il-space-5);
  border-left: 3px solid var(--il-sun);
  color: var(--il-cloud);
  font-style: italic;
}

.il-artigo-corpo iframe,
.il-artigo-corpo video {
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--il-radius-lg);
}

.il-artigo-corpo table {
  width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}

.il-artigo-rodape {
  max-width: 68ch;
  margin: var(--il-space-10) auto 0;
  padding-top: var(--il-space-6);
  border-top: 1px solid var(--il-cloud-08);
  display: flex;
  flex-wrap: wrap;
  gap: var(--il-space-3);
  justify-content: space-between;
}

@media (max-width: 991.98px) {
  .il-destaque-link {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .il-destaque-foto img {
    min-height: 14rem;
    max-height: 18rem;
  }

  .il-destaque-texto {
    padding: var(--il-space-6);
  }
}

/* ============================================================
   9d  SERVIÇOS, GALERIA DE OBRAS E USINAS
   ============================================================ */

/* ---------- Índice de serviços ---------- */
.il-servico-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--il-navy-700);
  border: 1px solid var(--il-cloud-08);
  border-radius: var(--il-radius-lg);
  overflow: hidden;
  color: var(--il-cloud);
  transition: transform var(--il-dur) var(--il-ease),
    border-color var(--il-dur) var(--il-ease);
}

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

.il-servico-foto {
  margin: 0;
  overflow: hidden;
}

.il-servico-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform var(--il-dur-slow) var(--il-ease-out);
}

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

.il-servico-texto {
  display: flex;
  flex-direction: column;
  gap: var(--il-space-3);
  padding: var(--il-space-5);
  flex: 1;
}

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

.il-servico-mais {
  margin-top: auto;
  padding-top: var(--il-space-3);
  color: var(--il-lime);
  font-size: var(--il-fs-2xs);
  font-weight: var(--il-fw-bold);
  letter-spacing: var(--il-track-wide);
  text-transform: uppercase;
}

.il-servico-card:hover .il-servico-mais i {
  transform: translateX(4px);
}

.il-servico-mais i {
  display: inline-block;
  transition: transform var(--il-dur) var(--il-ease);
}

/* ---------- Galeria de obras ---------- */
.il-obras-tipo-ativo {
  background: var(--il-grad-sun);
  border-color: transparent;
  color: var(--il-ink);
}

.il-obras-tipo-ativo:hover {
  background: var(--il-grad-sun);
  color: var(--il-ink);
}

.il-galeria-grade {
  list-style: none;
  margin: var(--il-space-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--il-space-5);
}

.il-galeria-item figure {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--il-space-3);
}

.il-galeria-item picture {
  display: block;
  border-radius: var(--il-radius-lg);
  overflow: hidden;
  border: 1px solid var(--il-cloud-08);
}

.il-galeria-item img {
  width: 100%;
  /* As fotos vêm do painel em proporções variadas; a razão fixa alinha a grade */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform var(--il-dur-slow) var(--il-ease-out);
}

.il-galeria-item figure:hover img {
  transform: scale(1.05);
}

.il-galeria-item figcaption {
  font-size: var(--il-fs-sm);
  line-height: var(--il-lh-relaxed);
  color: var(--il-cloud-70);
}

/* ---------- Usinas ---------- */
.il-usina {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.il-usina + .il-usina {
  margin-top: var(--il-section-y);
  padding-top: var(--il-section-y);
  border-top: 1px solid var(--il-cloud-08);
}

.il-usina-invertida .il-usina-galeria {
  order: 2;
}

/* Mosaico: a primeira foto ocupa a linha toda, as demais dividem abaixo */
.il-usina-galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--il-space-3);
}

.il-usina-foto {
  display: block;
  border-radius: var(--il-radius-md);
  overflow: hidden;
  border: 1px solid var(--il-cloud-08);
}

.il-usina-foto-principal {
  grid-column: 1 / -1;
  border-radius: var(--il-radius-lg);
}

.il-usina-foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}

.il-usina-foto-principal img {
  aspect-ratio: 16 / 9;
}

.il-usina-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--il-space-5);
  margin: var(--il-space-6) 0 0;
  padding-top: var(--il-space-5);
  border-top: 1px solid var(--il-cloud-08);
}

.il-usina-ficha dt {
  font-size: var(--il-fs-3xs);
  font-weight: var(--il-fw-semibold);
  letter-spacing: var(--il-track-wide);
  text-transform: uppercase;
  color: var(--il-cloud-56);
  margin-bottom: var(--il-space-2);
}

.il-usina-ficha dd {
  margin: 0;
  font-family: var(--il-font-display);
  font-size: var(--il-fs-h3);
  font-weight: var(--il-fw-black);
  line-height: 1;
  color: var(--il-sun);
  font-variant-numeric: tabular-nums;
}

.il-usina-ficha dd span {
  font-size: var(--il-fs-md);
  font-weight: var(--il-fw-normal);
  color: var(--il-cloud-70);
}

.il-usina-situacao {
  font-size: var(--il-fs-lg) !important;
  color: var(--il-lime) !important;
}

@media (max-width: 991.98px) {
  .il-usina {
    grid-template-columns: 1fr;
  }

  .il-usina-invertida .il-usina-galeria {
    order: 0;
  }
}

/* ---------- Fale conosco ---------- */
.il-form-title {
  margin-bottom: var(--il-space-5);
  padding-bottom: var(--il-space-4);
  border-bottom: 1px solid var(--il-cloud-08);
}

.il-contato-redes-rotulo {
  margin: var(--il-space-6) 0 0;
  font-size: var(--il-fs-sm);
  color: var(--il-cloud-70);
}

/* O bloco de redes é o mesmo do rodapé; aqui ele não deve herdar a margem de lá */
.il-contato .site-footer-social {
  margin-top: var(--il-space-3);
}

/* ---------- Formulário de orçamento ---------- */
.il-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--il-space-7);
}

.il-fieldset:last-of-type {
  margin-bottom: 0;
}

.il-legend {
  float: none;
  width: auto;
  font-family: var(--il-font-display);
  font-size: var(--il-fs-lg);
  font-weight: var(--il-fw-bold);
  margin-bottom: var(--il-space-4);
  padding-bottom: var(--il-space-3);
  border-bottom: 1px solid var(--il-cloud-08);
}

.il-form-ajuda {
  margin: var(--il-space-2) 0 var(--il-space-4);
  font-size: var(--il-fs-2xs);
  color: var(--il-cloud-56);
  line-height: var(--il-lh-relaxed);
}

/* Prefixo "R$" colado ao campo, sem input-group do Bootstrap para não herdar
   as bordas claras dele */
.il-input-prefixo {
  position: relative;
}

.il-input-prefixo span {
  position: absolute;
  left: 0.9375rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--il-cloud-56);
  font-size: var(--il-fs-sm);
  pointer-events: none;
}

.il-input-prefixo .il-input {
  padding-left: 2.75rem;
}

/* ---------- Passos ---------- */
.il-passos {
  list-style: none;
  margin: var(--il-space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--il-space-5);
}

.il-passos li {
  display: flex;
  gap: var(--il-space-4);
}

.il-passos strong {
  display: block;
  margin-bottom: var(--il-space-1);
}

.il-passo-n {
  flex: 0 0 auto;
  font-family: var(--il-font-display);
  font-size: var(--il-fs-lg);
  font-weight: var(--il-fw-black);
  color: var(--il-sun);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   10  RODAPÉ
   ============================================================ */
.site-footer {
  background: var(--il-navy-900);
  border-top: 1px solid var(--il-cloud-08);
  padding-block: var(--il-space-10) var(--il-space-6);
}

.site-footer-logo img {
  height: 60px;
  width: auto;
}

.site-footer-titulo {
  font-family: var(--il-font-body);
  font-size: var(--il-fs-3xs);
  font-weight: var(--il-fw-bold);
  letter-spacing: var(--il-track-wide);
  text-transform: uppercase;
  color: var(--il-sun);
  margin-bottom: var(--il-space-4);
}

.site-footer-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}

.site-footer-lista a,
.site-footer-contato a,
.site-footer-contato span {
  color: var(--il-cloud-70);
  font-size: var(--il-fs-sm);
}

.site-footer-lista a:hover,
.site-footer-contato a:hover {
  color: var(--il-sun);
}

.site-footer-contato {
  display: grid;
  gap: 0.75rem;
}

.site-footer-contato li {
  display: flex;
  gap: var(--il-space-3);
  align-items: flex-start;
}

.site-footer-contato i {
  color: var(--il-sun);
  font-size: 1rem;
  margin-top: 0.15rem;
}

.site-footer-social {
  display: flex;
  gap: var(--il-space-2);
  margin-top: var(--il-space-5);
}

.site-footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--il-cloud-16);
  display: inline-grid;
  place-items: center;
  color: var(--il-cloud);
  font-size: 1.05rem;
  transition: border-color var(--il-dur) var(--il-ease),
    color var(--il-dur) var(--il-ease),
    transform var(--il-dur) var(--il-ease);
}

.site-footer-social a:hover {
  border-color: var(--il-sun);
  color: var(--il-sun);
  transform: translateY(-2px);
}

.site-footer-legal {
  margin-top: var(--il-space-8);
  padding-top: var(--il-space-5);
  border-top: 1px solid var(--il-cloud-08);
  color: var(--il-cloud-56);
  font-size: var(--il-fs-2xs);
}

/* O botão flutuante do WhatsApp (56px, fixo a 1rem da direita) fica exatamente
   sobre o fim desta linha quando se chega ao rodapé — e cobria o "Voltar ao topo":
   o clique abria o WhatsApp. Reserva a faixa do botão só quando ele existe. */
body:has(.whatsapp-float-btn) .site-footer-legal {
  padding-right: calc(56px + 1rem + var(--il-space-3));
}

.site-footer-legal a {
  color: var(--il-cloud-70);
}

.site-footer-legal a:hover {
  color: var(--il-sun);
}

.site-footer-topo {
  display: inline-flex;
  align-items: center;
  gap: var(--il-space-2);
  color: var(--il-cloud-70);
  font-size: var(--il-fs-sm);
  font-weight: var(--il-fw-semibold);
}

.site-footer-topo:hover {
  color: var(--il-sun);
}

/* ============================================================
   11  WHATSAPP FLUTUANTE
   ============================================================ */
@keyframes il-whatsapp-pulse {
  0% {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(37, 211, 102, 0.45);
  }
  70% {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-float-btn {
  position: fixed;
  right: 1rem;
  bottom: 1.25rem;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: var(--il-z-float);
  cursor: pointer;
  animation: il-whatsapp-pulse 2.5s ease-out infinite;
  transition: transform var(--il-dur) var(--il-ease);
}

.whatsapp-float-btn:hover {
  color: #fff;
  transform: translateY(-2px) scale(1.04);
  animation-play-state: paused;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

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

@media (min-width: 992px) {
  .whatsapp-float-btn {
    right: 1.5rem;
    bottom: 1.5rem;
    width: 60px;
    height: 60px;
    font-size: 1.85rem;
  }
}

/* ============================================================
   12  PÁGINA 404 E STUB "EM BREVE"
   ============================================================ */
.il-page-hero {
  position: relative;
  background: var(--il-grad-navy);
  padding-block: calc(var(--il-section-y) * 0.8);
  border-bottom: 1px solid var(--il-cloud-08);
  overflow: hidden;
}

.il-breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--il-space-2);
  margin: 0 0 var(--il-space-4);
  padding: 0;
  font-size: var(--il-fs-2xs);
  color: var(--il-cloud-56);
}

.il-breadcrumb a:hover {
  color: var(--il-sun);
}

.il-breadcrumb li + li::before {
  content: "/";
  margin-right: var(--il-space-2);
  color: var(--il-cloud-16);
}

.il-404-codigo {
  font-family: var(--il-font-display);
  font-size: clamp(5rem, 3rem + 10vw, 11rem);
  line-height: 0.9;
  letter-spacing: var(--il-track-tight);
  background: var(--il-grad-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   13  UTILIDADES DE PERFORMANCE E ACESSIBILIDADE
   ============================================================ */

/* Pula render e layout do que está fora da viewport. O
   contain-intrinsic-size é obrigatório: sem ele o browser assume
   altura zero e a barra de rolagem pula durante o scroll. */
@supports (content-visibility: auto) {
  .il-defer {
    content-visibility: auto;
    contain-intrinsic-size: auto 760px;
  }
}

.il-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}