/* ==========================================================================
   La Casa de EPS — CSS do projeto para WordPress/Elementor

   Gerado por entrega/_gerador/css-tema.py a partir de css/style.css.
   NÃO edite este arquivo: edite o css/style.css do preview e rode o gerador.

   A única diferença para o original são as variáveis de layout acrescentadas
   junto de cada regra de container — é assim que o Elementor lê o layout.
   ========================================================================== */

/* Padrões do container do Elementor, redeclarados com o peso de uma classe
   simples: sem isso um container filho herdaria a variável do pai. Como estas
   vêm antes das regras do projeto, qualquer regra do projeto ganha delas. */
.e-con {
  --display: flex;
  --flex-direction: column;
  --flex-grow: 0;
  --flex-shrink: 1;
  --flex-basis: auto;
  --order: 0;
  --gap: 0px;
}

/* display de cada container, medido no preview (layout.json).

   Serve de piso: qualquer regra do projeto, depois, ganha desta. */

.aplicacoes, .camadas, .camadas__fio, .camadas__nota, .card-app, .card-app__corpo,
.card-app__topo, .card-materia__img, .card-quero__texto, .card-solucao, .carrossel,
.depo__col-car, .depo__col-txt, .entrada__conteudo, .faixa-cta__txt, .feito__col-txt,
.feito__visual, .hero, .hero__cena, .hero__palco, .materias__col-car,
.materias__col-txt, .obras__col-txt, .obras__item, .pilar, .pilar__caixa,
.possibilidades__col-txt, .possibilidades__img, .possibilidades__linha,
.post__col-lado, .post__col-txt, .post__destaque, .pronto__col-cards, .pronto__col-txt,
.pronto__grade, .rodape, .rodape__barra, .rodape__col-txt, .sec, .selos__divisor,
.selos__txt, .sistema__col-txt, .solucoes__cabecalho, .sustenta__intro, .topo, .wrap { --display: block; }

.card-quero__acao { --display: grid; }

.aplicacoes__linha, .badge, .beneficio, .card-depo, .card-materia,
.card-materia__corpo, .card-porque, .card-quero, .card-solucao__figura, .card-verde,
.carrossel__trilho, .depo__linha, .entrada, .entrada__base, .entrada__palco,
.entrada__palco-foto, .faixa-cta, .feito__linha, .hero__texto, .indicado__linha,
.materias__linha, .menu, .menu__nav, .nav-setas, .obras__galeria, .obras__linha,
.post__linha, .post__share, .quero, .selos__col, .selos__linha, .selos__marcas,
.sistema__linha, .sustenta__bloco { --display: flex; }

/* ==========================================================================
   La Casa de EPS — landing page
   Preview HTML/CSS. Estrutura pensada para conversão 1:1 em Elementor:
   cada <section> = um Container full-width; cada .wrap = Container boxed 1200px;
   linhas e colunas = Containers flex. Sem CSS Grid complexo, sem clip-path.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens  →  viram Global Colors / Global Fonts no Elementor
   -------------------------------------------------------------------------- */
:root {
  /* cores */
  --azul:           #0095ff;
  --azul-escuro:    #002946;
  --azul-card:      #002037;
  --azul-profundo:  #003e6a;
  --azul-medio:     #0065ac;
  --branco:         #ffffff;
  --placeholder:    #d9d9d9;

  --vidro-azul:     rgba(0, 149, 255, .2);
  --vidro-branco:   rgba(255, 255, 255, .05);
  --azul-noite:     #0c2536;   /* preenchimento das setas no hover (Figma) */

  --verde:          #07c26f;
  --verde-escuro:   #005e00;
  --verde-menta:    #85ffae;
  --verde-vidro:    rgba(133, 255, 174, .6);
  --verde-vidro-esc: rgba(0, 94, 0, .6);

  /* gradientes */
  --grad-hero:    linear-gradient(123deg, #002946 33.5%, #002a47 44.6%, #0065ac 97%);
  --grad-secao:   linear-gradient(146.6deg, #002946 33.5%, #0065ac 98.8%);
  --grad-secao-b: linear-gradient(122.6deg, #002946 33.5%, #0065ac 98.8%);
  --grad-card:    linear-gradient(109.8deg, #002946 33.5%, #0065ac 98.8%);
  --grad-verde:   linear-gradient(180deg, #07c26f 32%, rgba(7, 194, 111, 0) 89%);

  /* tipografia */
  --fonte: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --t-h2:      40px;
  --t-titulo:  16px;
  --t-corpo:   14px;
  --t-peq:     12px;
  --t-micro:   10px;

  /* medidas */
  --wrap:      1200px;
  --raio:      10px;
  --raio-btn:  5px;
  --raio-mini: 2px;
  --vidro:     blur(10px);
  --transicao: .25s ease;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  font-weight: 400;
  line-height: 1.45;
  color: var(--branco);
  background: var(--azul-escuro);
  -webkit-font-smoothing: antialiased;
}

/* Cada <img> carrega width/height, para o navegador reservar o espaço antes
   de baixar a imagem (com `loading="lazy"` isso é o que evita a página pular).
   O `height: auto` é o par obrigatório disso: sem ele o atributo vira altura
   fixa e a imagem estica. Quem precisa de outra altura declara na própria
   classe, que tem peso maior que este seletor. */
img { max-width: 100%; height: auto; display: block; }
/* o <button> traz borda e relevo próprios do navegador — zeramos aqui */
button { font: inherit; color: inherit; border: 0; background: none; -webkit-appearance: none; appearance: none; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}
/* Elementor */ .e-con.wrap { --width: 100%; }
/* em 1440 o conteúdo fica exatamente em 1200px com margem de 120px, como no Figma;
   abaixo disso entra a calha lateral */
@media (max-width: 1279px) { .wrap { padding-inline: 20px; } }

/* seções full-width */
.sec { position: relative; overflow: hidden; }
.sec--escura   { background: var(--azul-escuro); }
.sec--grad     { background: var(--grad-secao); }
.sec--grad-b   { background: var(--grad-secao-b); }
.sec--azul     { background: var(--azul); }

/* --------------------------------------------------------------------------
   2b. Borda em degradê
   No Figma nenhuma borda é sólida: todas são um GRADIENT_LINEAR de #0095FF
   opaco para transparente. Como o Elementor não tem borda em degradê nativa,
   isso é feito com um pseudo-elemento mascarado — vira um trecho de CSS
   customizado aplicado à classe do Container.
   O ângulo muda por componente porque no Figma o degradê acompanha a
   proporção da caixa.
   -------------------------------------------------------------------------- */
.borda-grad { position: relative; }
.borda-grad::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: var(--borda-peso, .7px);
  background: linear-gradient(var(--borda-angulo, 120deg),
              var(--borda-cor, #0095ff) 0%, var(--borda-cor-fim, rgba(0, 149, 255, 0)) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  transition: opacity var(--transicao);
}
/* Interruptor para o builder: escreva `sem-borda` no campo de classes CSS do
   container e a borda em degradê some naquele elemento, sem mexer no tema. */
.sem-borda::before { display: none; }

/* A borda só desaparece no hover nos componentes que, no Figma, invertem para
   fundo branco: os cards "Quero...", os cards de matéria e os dois tipos de CTA.
   Nos demais (badges, menu, cards de aplicação, bloco verde) ela permanece. */
.card-quero:hover::before,
.card-materia:hover::before,
.btn--vidro:hover::before,
.btn-mini:hover::before { opacity: 0; }

/* --------------------------------------------------------------------------
   3. Tipografia de apoio
   -------------------------------------------------------------------------- */
.eyebrow {
  font-size: var(--t-peq);
  font-weight: 600;
  color: var(--azul);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 18px;
}

.titulo-secao {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.12;
  color: var(--branco);
}
.titulo-secao .azul { color: var(--azul); display: block; }
.titulo-secao .azul--inline { display: inline; }
/* Nas secoes desenhadas por ultimo o Figma usa a entrelinha automatica do
   Montserrat (~1.218). O restante da pagina segue 1.12; enquanto os dois
   convivem, quem precisa do valor do Figma pede por esta classe. */
.titulo-secao--solto { line-height: 1.218; }

.texto { font-size: var(--t-corpo); line-height: 1.5; }
.texto .destaque { color: var(--azul); font-weight: 700; }
.texto p + p { margin-top: 1.15em; }
/* quebra de linha que só existe no mobile */
.quebra-mobile { display: none; }

/* --------------------------------------------------------------------------
   4. Botões
   Padrão de hover do design: inverte para fundo branco e conteúdo azul.
   -------------------------------------------------------------------------- */
/* a seta do Figma aponta para cima; a base gira 90deg para apontar à direita.
   A partir daqui ela NÃO gira mais no hover — mantém sempre a mesma posição. */
.seta { width: 15px; height: 15px; flex: none; transform: rotate(90deg); }
.seta path { fill: currentColor; }

/* — CTA sólido (azul → branco) — */
.btn {
  display: inline-flex; flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 40px;
  padding: 0 6px 0 14px;
  white-space: nowrap;
  border: 0;
  border-radius: var(--raio-btn);
  background: var(--azul);
  color: var(--branco);
  font: 600 var(--t-corpo)/1 var(--fonte);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.btn__quadro {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--raio-btn);
  background: var(--branco);
  color: var(--azul);
  transition: background var(--transicao), color var(--transicao);
}
.btn:hover { background: var(--branco); color: var(--azul); }
.btn:hover .btn__quadro { background: var(--azul); color: var(--branco); }

/* — CTA outline de vidro (usado no menu) — */
.btn--vidro {
  --borda-angulo: 153.5deg;
  border-radius: var(--raio);
  background: var(--vidro-azul);
  backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
}
/* neste botão o quadrado permanece azul nos dois estados */
.btn--vidro .btn__quadro { background: var(--azul); color: var(--branco); }
.btn--vidro:hover { background: var(--branco); color: var(--azul); }
.btn--vidro:hover .btn__quadro { background: var(--azul); color: var(--branco); }

/* — Botão pequeno "saiba mais" — */
.btn-mini {
  display: inline-flex; flex-direction: row;
  align-items: center;
  justify-content: space-between;
  --borda-angulo: 147.4deg;
  width: 117px;                /* Figma: caixa de 117x26, texto em x=13, seta em x=103 */
  height: 26px;
  padding: 0 4px 0 13px;
  border: 0;
  border-radius: var(--raio-mini);
  background: var(--vidro-azul);
  backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
  color: var(--branco);
  font: 600 var(--t-peq)/1 var(--fonte);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.btn-mini .seta { width: 10px; height: 10px; }
.btn-mini:hover { background: var(--branco); border-color: var(--branco); color: var(--azul); }
/* no hover o texto fica azul, mas a seta é azul-escura — conferido no Figma
   (componente cta-saiba-mais-02, variante de hover: texto #0095FF, seta #002946) */
.btn-mini:hover .seta path { fill: var(--azul-escuro); }

/* — Botão sólido pequeno dentro do card de matéria — */
.btn-mini--solido {
  width: auto;
  height: 22px;
  padding: 0 8px;
  gap: 6px;
  justify-content: flex-start;
  border: 0;
  background: var(--azul);
  font-size: var(--t-micro);
}
.btn-mini--solido .seta { width: 9px; height: 9px; }
/* o botão dentro do card de matéria não muda de estado no Figma:
   segue azul com texto e seta brancos nas duas variantes */
.btn-mini--solido:hover { background: var(--azul); color: var(--branco); }
.btn-mini--solido:hover .seta path { fill: var(--branco); }

/* — Setas de carrossel — */
.nav-setas { display: flex; flex-direction: row; justify-content: center; gap: 25px; margin-top: 30px; }
/* Elementor */ .e-con.nav-setas { --display: flex; --flex-direction: row; --gap: 25px; --justify-content: center; }
.nav-seta {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--azul);
  background: var(--vidro-branco);
  color: var(--branco);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
/* O glifo do Figma é um traço fino com ponta aberta, e não o bloco cheio dos
   CTAs. Medido no arquivo, num círculo de 34: 15,5 de comprimento, 1,7 de
   espessura e a ponta avançando 7,5 — metade do traço. A caixa é 17 porque a
   viewBox tem 1 unidade de folga para as pontas arredondadas. */
.nav-seta .seta-nav { width: 17px; height: 17px; display: block; }
.nav-seta .seta-nav path { fill: none; stroke: currentColor; }
.nav-seta .seta-nav--dir { transform: rotate(180deg); }
.nav-seta:hover { background: var(--azul-noite); border-color: var(--azul); }
.nav-seta--claro { border-color: var(--branco); background: rgba(0, 46, 74, .1); }
.nav-seta--claro:hover { background: var(--azul-noite); border-color: var(--branco); }
.nav-seta[disabled],
.nav-seta[data-inativo] { opacity: .35; cursor: default; }
.nav-seta[disabled]:hover,
.nav-seta[data-inativo]:hover { background: var(--vidro-branco); border-color: var(--azul); }
.nav-seta--claro[disabled]:hover { background: rgba(0, 46, 74, .1); border-color: var(--branco); }

/* --------------------------------------------------------------------------
   5. Menu
   -------------------------------------------------------------------------- */
/* Fixo, e não sticky: no Elementor o menu entra dentro de um widget de Modelo,
   e um elemento sticky só se move dentro do pai — que ali tem a altura exata do
   próprio menu, ou seja, zero curso. Fixo funciona em qualquer aninhamento, e
   como o menu já é sobreposto ao hero no Figma, o desenho não muda. */
.topo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 41px 0 0;
  pointer-events: none;
}
.topo .wrap { pointer-events: auto; }

/* medidas do Figma: barra 1200x60, logo 157px a 30px da borda,
   primeiro item do menu em x=344 e CTA de 230px encostado à direita */
.menu {
  --borda-angulo: 171.8deg;
  --borda-peso: 1px;
  display: flex; flex-direction: row;
  align-items: center;
  height: 60px;
  padding: 0 13px 0 30px;
  border-radius: var(--raio);
  background: rgba(0, 41, 70, .5);
  backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
}
/* Elementor */ .e-con.menu { --display: flex; --flex-direction: row; --align-items: center; }
.menu__logo { width: 157px; flex: none; }
.menu__nav { display: flex; flex-direction: row; align-items: center; gap: 52px; margin-left: 157px; }
/* Elementor */ .e-con.menu__nav { --display: flex; --flex-direction: row; --gap: 52px; --align-items: center; }
.menu .btn--vidro { margin-left: auto; padding: 0 5px 0 15px; }   /* largura acompanha o texto */
/* O `:where` tira o peso destas regras: elas continuam sendo o padrão do
   projeto, mas qualquer ajuste feito no widget pelo builder passa a ganhar
   delas. Sem isso, editar a tipografia do menu no Elementor não surtia efeito. */
:where(.menu__link) {
  font-size: var(--t-corpo);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  transition: font-weight var(--transicao);
}
/* Figma (Style Guide): o item ganha negrito e sublinhado — no hover e também
   quando é a seção que está na tela. O sublinhado precisa ir no <a> de dentro
   porque o reset do projeto zera a decoração de todo link. */
.menu__link:hover,
.menu__link:focus-visible,
.menu__link[aria-current="true"] { font-weight: 700; }
.menu__link:hover a,
.menu__link:focus-visible a,
.menu__link[aria-current="true"] a,
a.menu__link:hover,
a.menu__link:focus-visible,
a.menu__link[aria-current="true"] {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* Os três traços viram um X quando o menu abre. O botão é uma coluna flex
   centrada: com margens soltas nos traços a pilha escapava pelo topo e o ícone
   ficava acima da linha do logo. */
.menu__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  margin-left: auto;
  border: 0; background: none; padding: 0;
  cursor: pointer;
}
/* O Hello Elementor pinta `button:hover/:focus` de #CC3366 (um rosa que vem do
   tema, não do projeto). O reset geral de `button` não alcança os estados, então
   eles são zerados aqui — com o foco continuando visível, na cor do projeto. */
.menu .menu__toggle,
.menu .menu__toggle:hover,
.menu .menu__toggle:focus,
.menu .menu__toggle:active {
  color: inherit;
  background: none;
  border: 0;
  box-shadow: none;
  outline: 0;
}
.menu .menu__toggle:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}
.menu .menu__toggle span {
  display: block; height: 2px; width: 22px; margin: 0;
  background: var(--branco); border-radius: 2px;
  transition: transform var(--transicao), opacity var(--transicao);
}
.menu.aberto .menu__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu.aberto .menu__toggle span:nth-child(2) { opacity: 0; }
.menu.aberto .menu__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   6. Hero
   Reprodução do frame do Figma: 1440x940, conteúdo em 1200px a partir de x=120.
   Todas as posições abaixo são as do Figma — o "palco" tem 1200x940 e os
   valores em % são relativos a essa caixa. No Elementor cada peça vira um
   elemento com Custom Position dentro do Container do hero.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 940px;
  background: var(--grad-hero);
}
.hero > .wrap { height: 100%; }

.hero__palco { position: relative; height: 940px; }
.hero__palco > * { position: absolute; }

/* --- cena: plantas + equipe + casa (Figma: 758x645 a partir de 575,119) --- */
.hero__cena {
  left: 37.9167%;          /* 575px  */
  top: 119px;
  width: 63.1667%;         /* 758px  */
  aspect-ratio: 758 / 645;
  z-index: 1;
}
/* Elementor */ .e-con.hero__cena { --width: 63.1667%; }
.hero__cena img { position: absolute; }
.hero__planta--a { left: 51.450%; top: 1.085%;  width: 33.773%; }  /* 965,126 · 256 */
.hero__planta--b { left: 11.346%; top: 7.907%;  width: 19.261%; }  /* 661,170 · 146 */
.hero__equipe    { left: 15.172%; top: 0;       width: 70.976%; }  /* 690,119 · 538 */
.hero__casa      { left: 0;       top: 33.643%; width: 100%;    }  /* 575,336 · 758 */

/* --- bloco de texto (Figma: logo 375px em 222,231) --- */
.hero__texto {
  left: 8.5%;
  top: 231px;
  width: 31.25%;           /* 375px */
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: center;
}
/* Elementor */ .e-con.hero__texto { --display: flex; --flex-direction: column; --align-items: flex-start; --width: 31.25%; }
.hero__logo { width: 100%; }
/* no Figma o subtítulo e o CTA têm 337px e começam em x=224 — ou seja,
   alinhados à esquerda do logo (375px em x=222), não centralizados */
.hero__sub {
  margin: 14px 0 0 .533%;
  width: 89.87%;           /* 337px */
  font-size: var(--t-corpo);
  font-weight: 600;
  line-height: 1.2;
}
.hero__cta { margin: 19px 0 0 .533%; width: 89.87%; }

/* --- badges flutuantes (282x45) --- */
.badge {
  --borda-angulo: 155.4deg;
  z-index: 4;
  display: flex; flex-direction: row;
  align-items: center;
  width: 23.5%;            /* 282px */
  height: 45px;
  border-radius: var(--raio);
  background: var(--vidro-azul);
  backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
  box-shadow: 0 2px 30px rgba(0, 149, 255, .5);
}
/* Elementor */ .e-con.badge { --display: flex; --flex-direction: row; --align-items: center; --width: 23.5%; }
.badge__icone {
  position: absolute;
  left: 8px; top: 7px;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--raio-btn);
  background: var(--azul);
}
.badge__icone img { width: 18px; height: 18px; }
.badge__texto {
  position: relative;
  z-index: 2;
  font-size: var(--t-corpo);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}
/* cada badge tem seu próprio recuo de texto no Figma */
.badge--seguranca  .badge__texto { margin-left: 95px; }
.badge--custo      .badge__texto { margin-left: 73px; }
.badge--processo   .badge__texto { margin-left: 60px; }
.badge--desempenho .badge__texto { margin-left: 88px; }
.badge--custo      { left: 73.5000%; top: 476px; }   /* 1002,476 */
.badge--seguranca  { left: 47.1667%; top: 505px; }   /*  686,505 */
.badge--processo   { left: 60.8333%; top: 568px; }   /*  850,568 */
.badge--desempenho { left: 71.5000%; top: 631px; }   /*  978,631 */

/* Flutuação contínua dos badges sobre a casa.
   Durações e atrasos diferentes (e negativos) para os quatro nunca ficarem
   em sincronia e já começarem em fases distintas, sem espera no carregamento.
   No Elementor isso é nativo: Avançado → Floating Effects → Float, eixo Y. */
@keyframes flutuar {
  from, to { transform: translateY(calc(var(--flutua-amp) * -1)); }
  50%      { transform: translateY(var(--flutua-amp)); }
}
.badge {
  --flutua-amp: 5px;
  animation: flutuar var(--flutua-dur, 6s) var(--flutua-atraso, 0s) ease-in-out infinite;
  will-change: transform;
}
.badge--custo      { --flutua-dur: 4.4s; --flutua-atraso: -0.6s; --flutua-amp: 5px; }
.badge--seguranca  { --flutua-dur: 5.0s; --flutua-atraso: -3.1s; --flutua-amp: 6px; }
.badge--processo   { --flutua-dur: 4.0s; --flutua-atraso: -1.4s; --flutua-amp: 4px; }
.badge--desempenho { --flutua-dur: 4.8s; --flutua-atraso: -4.0s; --flutua-amp: 5px; }

/* --------------------------------------------------------------------------
   7. Cards "Quero..."  (Figma: 4 x 282x170 em y=728, gap 24)
   -------------------------------------------------------------------------- */
.quero {
  left: 0;
  top: 728px;
  width: 100%;
  z-index: 5;
  display: flex; flex-direction: row;
  gap: 24px;
}
/* Elementor */ .e-con.quero { --display: flex; --flex-direction: row; --gap: 24px; --width: 100%; }
.card-quero {
  display: flex; flex-direction: row;
  align-items: center;     /* ícone + título + lista centralizados na vertical */
  gap: 17px;
  flex: 1 1 0;
  min-height: 170px;
  padding: 20px 14px 20px 16px;
  border-radius: var(--raio);
  background: var(--vidro-branco);
  backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
  transition: background var(--transicao);
}
/* Elementor */ .e-con.card-quero { --display: flex; --flex-direction: row; --gap: 17px; --align-items: center; --flex-grow: 1; --flex-shrink: 1; --flex-basis: 0; }
.card-quero__icone { display: block; width: 56px; flex: none; line-height: 0; color: var(--branco); transition: color var(--transicao); }
.card-quero__icone svg { width: 100%; height: auto; }
.card-quero__texto { position: relative; z-index: 2; }
/* no Figma a caixa do título tem 96–111px e o texto quebra em duas linhas;
   entre o título e a lista há apenas 7px */
.card-quero__titulo {
  display: block;
  max-width: 111px;
  margin-bottom: 7px;
  font-size: var(--t-titulo);
  font-weight: 600;
  line-height: 1.25;
  color: var(--azul);
  text-transform: uppercase;
}
.card-quero__lista { font-size: var(--t-corpo); line-height: 1.2; transition: color var(--transicao); }
.card-quero__lista li { position: relative; padding-left: 14px; }
.card-quero__lista li::before {
  content: '·';
  position: absolute; left: 2px; top: -1px;
  font-size: 18px; line-height: 1;
}
.card-quero__acao {
  position: absolute;
  right: 10px; bottom: 11px;
  z-index: 2;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--raio-btn);
  background: var(--azul);
  color: var(--branco);
}
/* Elementor */ .e-con.card-quero__acao { --display: grid; --width: 30px; }
.card-quero__acao svg { width: 15px; height: 15px; }
.card-quero__acao svg path { fill: currentColor; }

.card-quero:hover { background: var(--branco); }
.card-quero:hover .card-quero__icone { color: var(--azul); }
.card-quero:hover .card-quero__lista { color: var(--azul-escuro); }

/* --------------------------------------------------------------------------
   8. "Afinal, o que é uma Casa de EPS?"
   Seção de 1440x690 no Figma. Coluna de texto: 486px em x=120, do y=56 ao y=635.
   Grupo da direita: 654x542 em x=652 — imagem, fios e legendas.
   As duas colunas são centralizadas verticalmente uma em relação à outra.
   -------------------------------------------------------------------------- */
.sistema { padding: 56px 0 55px; }
.sistema__linha {
  display: flex; flex-direction: row;
  align-items: center;      /* imagem + fios + legendas centralizados com o texto */
  gap: 46px;
}
/* Elementor */ .e-con.sistema__linha { --display: flex; --flex-direction: row; --gap: 46px; --align-items: center; }
.sistema__col-txt { width: 486px; flex: none; }
/* Elementor */ .e-con.sistema__col-txt { --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; --width: 486px; }
/* no Figma o bloco de texto tem 418x245 dentro de um card de 486x300:
   entrelinha ~1.25 e um espaço de linha em branco entre parágrafos */
.sistema__card.texto { line-height: 1.25; }
.sistema__card.texto p + p { margin-top: 15px; }
.sistema__card {
  --borda-angulo: 119.4deg;
  margin-top: 27px;
  padding: 30px 35px;
  border-radius: var(--raio);
  background: var(--vidro-branco);
  backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
}
.sistema__reforco {
  margin: 26px 0 26px;
  font-size: var(--t-titulo);
  font-weight: 600;
  line-height: 1.22;
}
.sistema__reforco .azul { color: var(--azul); }

/* --- grupo da direita --- */
.camadas {
  position: relative;
  flex: 0 0 654px;
  max-width: 654px;
  aspect-ratio: 654 / 542;
}
/* Elementor */ .e-con.camadas { --flex-grow: 0; --flex-shrink: 0; --flex-basis: 654px; }
.camadas > * { position: absolute; }
.camadas__img {
  left: 0;
  top: 18.266%;            /* y=99  */
  width: 100%;
  height: 70.664%;         /* 383px */
  filter: drop-shadow(6px 6px 10px rgba(0, 0, 0, .25));
}

/* fios indicadores: 1px de largura, 109px de altura, com o ponto na ponta
   que fica junto ao texto — a outra ponta encosta no painel sem marcação */
.camadas__fio {
  width: 1px;
  height: 20.111%;         /* 109px */
  background: var(--azul);
  transform: translateX(-.5px);
}
/* Elementor */ .e-con.camadas__fio { --width: 1px; }
.camadas__fio::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -7px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--azul);
}
/* Elementor */ .e-con.camadas__fio::before { --width: 10px; }
/* o fio da segunda camada sobe: o ponto fica embaixo */
.camadas__fio--sobe::before { top: auto; bottom: -7px; }

.camadas__fio--nucleo   { left: 22.936%; top: 17.712%; }   /* x=150, y=96  */
.camadas__fio--primeira { left: 68.196%; top: 22.140%; }   /* x=446, y=120 */
.camadas__fio--segunda  { left: 60.245%; top: 58.487%; }   /* x=394, y=317 */

/* --- legendas: blocos de 193px centralizados no fio --- */
.camadas__nota { width: 29.511%; text-align: center; }
/* Elementor */ .e-con.camadas__nota { --width: 29.511%; }
.camadas__nota h3 {
  margin-bottom: 7px;
  font-size: var(--t-corpo);
  font-weight: 600;
  line-height: 1.2;
  color: var(--azul);
  text-transform: uppercase;
}
.camadas__nota p { font-size: var(--t-peq); line-height: 1.22; }

.camadas__nota--nucleo   { left:  8.180%; top:  0;       }  /* y=0   */
.camadas__nota--primeira { left: 53.440%; top:  3.875%;  }  /* y=21  */
.camadas__nota--segunda  { left: 45.489%; top: 81.919%;  }  /* y=444 */

/* --------------------------------------------------------------------------
   9. Matérias (carrossel)
   -------------------------------------------------------------------------- */
/* Seção de 1440x430 no Figma.
   Coluna de texto: 279px em x=120, começando em y=98.
   Carrossel: 4 cards de 205px com gap de 25, de x=425 a x=1320 (895 de largura),
   começando em y=61. Setas em y=351, centralizadas sobre os quatro cards. */
.materias { padding: 61px 0 45px; }
.materias__linha { display: flex; flex-direction: row; align-items: flex-start; gap: 26px; }
/* Elementor */ .e-con.materias__linha { --display: flex; --flex-direction: row; --gap: 26px; --align-items: flex-start; }
.materias__col-txt { width: 279px; flex: none; padding-top: 37px; }
/* Elementor */ .e-con.materias__col-txt { --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; --width: 279px; }
.materias__col-txt .texto { margin-top: 17px; max-width: 203px; }

.materias__col-car { flex: 1 1 auto; min-width: 0; }
/* Elementor */ .e-con.materias__col-car { --flex-grow: 1; --flex-shrink: 1; --flex-basis: auto; }   /* 895px */
.carrossel { overflow: hidden; }
.carrossel__trilho {
  display: flex; flex-direction: row;
  gap: 25px;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
/* Elementor */ .e-con.carrossel__trilho { --display: flex; --flex-direction: row; --gap: 25px; }
.carrossel__trilho > * { flex: 0 0 205px; }

.card-materia {
  display: flex;
  flex-direction: column;
  --borda-angulo: 105.3deg;
  min-height: 260px;
  border-radius: var(--raio);
  background: var(--vidro-azul);
  backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
  overflow: hidden;
  transition: background var(--transicao), border-color var(--transicao), color var(--transicao);
}
/* Elementor */ .e-con.card-materia { --display: flex; --flex-direction: column; }
.card-materia__img {
  height: 110px;
  flex: none;
  overflow: hidden;
  background: var(--placeholder);
}
/* Elementor */ .e-con.card-materia__img { --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; }
/* com a imagem destaque do post dentro, ela preenche a faixa sem deformar */
.card-materia__img img { width: 100%; height: 100%; object-fit: cover; }
.card-materia__corpo { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; flex: 1 1 auto; }
/* Elementor */ .e-con.card-materia__corpo { --display: flex; --flex-direction: column; --gap: 8px; --flex-grow: 1; --flex-shrink: 1; --flex-basis: auto; }
.card-materia__titulo { font-size: var(--t-peq); font-weight: 600; }
.card-materia__texto { font-size: var(--t-micro); line-height: 1.4; }
.card-materia .btn-mini--solido { margin-top: auto; align-self: flex-start; }
.card-materia:hover { background: var(--branco); border-color: var(--branco); color: var(--azul-escuro); }

/* --------------------------------------------------------------------------
   10. "Como o Monopainel® é feito?"
   -------------------------------------------------------------------------- */
/* Seção de 1440x540 no Figma (y 2060 a 2600).
   Coluna de texto: 421px em x=121, começando em y=115.
   Grupo da direita: 617x453 a partir de (697, 2147) — o rótulo, a imagem dos
   painéis e os quatro selos. A imagem vai até y=2600, ou seja, encosta na
   borda de baixo da seção, onde começa o bloco verde. */
.feito { padding: 87px 0 0; }
.feito__linha { display: flex; flex-direction: row; align-items: flex-start; gap: 156px; }
/* Elementor */ .e-con.feito__linha { --display: flex; --flex-direction: row; --gap: 156px; --align-items: flex-start; }
.feito__col-txt { width: 421px; flex: none; padding-top: 28px; }
/* Elementor */ .e-con.feito__col-txt { --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; --width: 421px; }
.feito__col-txt .eyebrow { margin-bottom: 17px; }
.feito__col-txt .texto { margin-top: 17px; }

.feito__visual { position: relative; flex: 0 0 617px; height: 453px; }
/* Elementor */ .e-con.feito__visual { --flex-grow: 0; --flex-shrink: 0; --flex-basis: 617px; }
.feito__visual > * { position: absolute; }
.feito__visual .eyebrow {
  left: 35.49%;            /* x=916 */
  top: 0;                  /* y=2147 */
  width: 35.17%;           /* 217px */
  margin: 0;
  text-align: left;
  white-space: nowrap;
}
.feito__img {
  left: 7.78%;             /* x=745  */
  top: 2.65%;              /* y=2159 */
  width: 82.66%;           /* 510px  */
  height: 97.35%;          /* 441px — encosta na base da seção */
}

.beneficio {
  position: absolute;
  z-index: 3;
  display: flex; flex-direction: row;
  align-items: center;
  gap: 14px;
  --borda-angulo: 140.6deg;
  width: 45.38%;          /* 280px */
  min-height: 80px;
  padding: 12px 16px;
  border-radius: var(--raio);
  background: var(--vidro-azul);
  backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
}
/* Elementor */ .e-con.beneficio { --display: flex; --flex-direction: row; --gap: 14px; --align-items: center; --width: 45.38%; }
.beneficio img { width: 34px; height: 34px; flex: none; }
.beneficio h3 { font-size: var(--t-corpo); font-weight: 700; text-transform: uppercase; margin-bottom: 3px; }
.beneficio p { font-size: var(--t-peq); line-height: 1.3; }
.beneficio--leveza     { left:  0;      top: 32.67%; }   /*  697,2295 */
.beneficio--resistencia{ left: 51.86%;  top: 39.74%; }   /* 1017,2327 */
.beneficio--reciclavel { left:  2.76%;  top: 56.07%; }   /*  714,2401 */
.beneficio--termico    { left: 54.62%;  top: 62.47%; }   /* 1034,2430 */

/* --------------------------------------------------------------------------
   11. "Você sabia?" — bloco sustentabilidade
   -------------------------------------------------------------------------- */
/* Bloco de 1050x430 no Figma, colado na seção anterior.
   Grade de 3 colunas de 282px (gap 24) e 2 linhas (gap 28); a primeira célula
   é o texto de introdução. Respiro: 31 no topo, 78 nas laterais, 61 embaixo. */
.sustenta { padding: 0; }
.sustenta__bloco {
  max-width: 1050px;
  margin-inline: auto;
  padding: 31px 78px 61px;
  border-radius: 20px 20px 0 0;
  background: var(--grad-verde);
  display: flex; flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px 24px;
}
/* Elementor */ .e-con.sustenta__bloco { --display: flex; --flex-direction: row; --gap: 28px 24px; --align-items: flex-start; --flex-wrap: wrap; }
.sustenta__intro { width: 282px; height: 155px; flex: none; }
/* Elementor */ .e-con.sustenta__intro { --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; --width: 282px; }
.sustenta__intro h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.02;
  color: var(--verde-escuro);
}
.sustenta__intro em {
  display: block;
  margin: 17px 0;
  font-size: var(--t-titulo);
  font-weight: 600;
  font-style: italic;
  line-height: 1.2;
}
.sustenta__intro p { font-size: var(--t-corpo); line-height: 1.2; }

.card-verde {
  width: 282px;
  min-height: 155px;
  padding: 20px 19px 20px 20px;
  display: flex; flex-direction: row;
  align-items: center;         /* ícone e texto centralizados na altura do card */
  gap: 8px;
  border-radius: var(--raio);
  backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
}
/* Elementor */ .e-con.card-verde { --display: flex; --flex-direction: row; --gap: 8px; --align-items: center; --width: 282px; }
.card-verde__icone {
  display: grid; place-items: center;
  width: 51px; height: 51px; flex: none;
  border-radius: 50%;
}
.card-verde__icone img { width: 30px; height: auto; }
.card-verde h3 {
  font-size: var(--t-corpo);
  font-weight: 700;
  line-height: 1.21;
  margin-bottom: 14px;                     /* texto em y=83 */
}
.card-verde p { font-size: var(--t-peq); font-weight: 500; line-height: 1.25; }

.card-verde--claro {
  --borda-angulo: 122.3deg;
  --borda-cor: #005e00;
  --borda-cor-fim: rgba(0, 94, 0, 0);
  background: var(--verde-vidro);
  color: var(--verde-escuro);
}
.card-verde--claro .card-verde__icone { background: var(--verde-vidro-esc); }
.card-verde--escuro {
  --borda-angulo: 122.3deg;
  --borda-cor: #85ffae;
  --borda-cor-fim: rgba(133, 255, 174, 0);
  background: var(--verde-vidro-esc);
  color: var(--verde-menta);
}
.card-verde--escuro .card-verde__icone { background: var(--verde-vidro); }

/* --------------------------------------------------------------------------
   12. "Monopainel® é indicado para"
   Seção de 520px, logo abaixo do bloco verde (o título começa 11px depois).
   Quatro pilares de 241x283 (gap 60), com um círculo de 110px encaixado num
   recorte semicircular no topo do card. Ímpares são vidro azul com borda em
   degradê; pares são azul sólido sem borda. Tudo com blur de fundo.
   -------------------------------------------------------------------------- */
.indicado { padding: 11px 0 65px; }

.indicado__titulo { text-align: center; }
.indicado__titulo strong {
  display: block;
  font-size: var(--t-h2);
  font-weight: 700;
  font-style: italic;
  line-height: 1.22;
  color: var(--azul);
}
.indicado__titulo span {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
}

.indicado__linha {
  display: flex; flex-direction: row;
  justify-content: center;
  gap: 60px;
  margin-top: 22px;
}
/* Elementor */ .e-con.indicado__linha { --display: flex; --flex-direction: row; --gap: 60px; --justify-content: center; }

.pilar {
  position: relative;
  width: 241px;
  padding-top: 55px;          /* metade do círculo que sobra acima do card */
}
/* Elementor */ .e-con.pilar { --width: 241px; }

.pilar__circulo {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
  transition: transform var(--transicao);
}
.pilar__circulo img { width: auto; height: auto; max-width: 60px; max-height: 60px; }

.pilar__caixa {
  min-height: 283px;
  padding: 110px 16px 24px;
  border-radius: var(--raio);
  text-align: center;
  backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
  /* recorte semicircular no topo, onde o círculo se encaixa */
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 54.5px, #000 55.5px);
          mask: radial-gradient(circle at 50% 0, transparent 54.5px, #000 55.5px);
}

.pilar h3 {
  min-height: 37px;           /* mantém o texto sempre na mesma altura */
  font-size: var(--t-titulo);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 14px;
}
.pilar p { font-size: var(--t-corpo); line-height: 1.2; }

/* --- variante de vidro (1º e 3º) --- */
.pilar--vidro .pilar__circulo,
.pilar--vidro .pilar__caixa {
  background: var(--vidro-azul);
}
.pilar--vidro .pilar__circulo { --borda-angulo: 109.2deg; }
.pilar--vidro .pilar__caixa   { --borda-angulo: 106.5deg; }

/* --- variante sólida (2º e 4º) --- */
.pilar--solido .pilar__circulo,
.pilar--solido .pilar__caixa {
  background: var(--azul);
}
.pilar--solido .pilar__caixa::before,
.pilar--solido .pilar__circulo::before { display: none; }
/* Elementor */ .pilar--solido .e-con.pilar__caixa::before { --display: none; }   /* sem borda no Figma */

/* no Figma os títulos longos são 14px, para caberem em duas linhas.
   É uma classe explícita — assim continua valendo se um pilar for
   adicionado ou removido no builder. */
.pilar--titulo-longo h3 { font-size: var(--t-corpo); }

/* movimento no hover (não existe no Figma — mantido a pedido) */
.pilar:hover .pilar__circulo { transform: translateX(-50%) translateY(-6px); }

/* --------------------------------------------------------------------------
   13. "Conheça as soluções"
   Seção de 1440x550 (y 3550 a 4100), fundo azul sólido.
   Quatro cards de 246x310 com gap 26 — 1062px no total, centrados na seção.
   -------------------------------------------------------------------------- */
.solucoes { padding: 30px 0 32px; }
.solucoes__cabecalho { text-align: center; margin-bottom: 35px; }
.solucoes__cabecalho h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 14px;
}
.solucoes__cabecalho p { font-size: var(--t-corpo); line-height: 1.2; }
.solucoes__cabecalho strong { font-weight: 700; }

/* A faixa tem a largura exata dos quatro cards e fica centrada. Os cards ficam
   em linha já na importação, com a medida do Figma; o `>` limita a regra aos
   filhos diretos, então cards dentro de um carrossel montado no builder (que
   ficam mais fundo, dentro do slide) não são afetados. */
.carrossel--solucoes { max-width: 1062px; margin-inline: auto; }
/* Os cards em linha só quando são filhos diretos da faixa — que é como o
   modelo os entrega. No preview quem fica aqui dentro é o trilho do carrossel,
   e transformar isto em flex encolhia os cards no celular. */
.carrossel--solucoes:has(> .card-solucao) { display: flex; flex-direction: row; flex-wrap: wrap;
  justify-content: center; gap: 26px; }
/* Elementor */ .carrossel--solucoes:has(> .e-con.card-solucao) { --display: flex; --flex-direction: row; --gap: 26px; --justify-content: center; --flex-wrap: wrap; }
.carrossel--solucoes > .card-solucao { flex: 0 0 246px; }
/* Elementor */ .carrossel--solucoes > .e-con.card-solucao { --flex-grow: 0; --flex-shrink: 0; --flex-basis: 246px; }
.carrossel--solucoes .carrossel__trilho { gap: 26px; }
/* Elementor */ .carrossel--solucoes .e-con.carrossel__trilho { --gap: 26px; }
.carrossel--solucoes .carrossel__trilho > * { flex: 0 0 246px; }

.card-solucao {
  position: relative;
  display: block;
  height: 310px;
  cursor: pointer;
  border-radius: var(--raio);
  background: var(--grad-card);
  overflow: hidden;
}
/* Elementor */ .e-con.card-solucao { --display: block; }

/* figura: cada produto tem largura e recuo próprios no Figma */
.card-solucao__figura {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 240px;
  display: flex; flex-direction: row;
  justify-content: center;
}
/* Elementor */ .e-con.card-solucao__figura { --display: flex; --flex-direction: row; --justify-content: center; }
.card-solucao__figura img {
  object-fit: contain;
  object-position: top center;
  transition: transform var(--transicao);
}
/* padrão para um card novo, criado no builder sem modificador */
.card-solucao__figura img { width: 200px; height: 220px; margin-top: 12px; }
.card-solucao--estrutural .card-solucao__figura img { width: 162px; height: 230px; margin-top:  0; }
.card-solucao--escadas    .card-solucao__figura img { width: 205px; height: 206px; margin-top: 19px; }
.card-solucao--fechamento .card-solucao__figura img { width: 218px; height: 234px; margin-top: 14px; }
.card-solucao--canto      .card-solucao__figura img { width: 188px; height: 220px; margin-top: 22px; }

.card-solucao__selo { position: absolute; top: 22px; right: 15px; width: 58px; z-index: 2; }

.card-solucao__nome {
  position: absolute;
  top: 240px;
  left: 0; right: 0;
  font-size: var(--t-corpo);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.card-solucao .btn-mini {
  position: absolute;
  top: 267px;
  left: 50%;
  transform: translateX(-50%);
}
/* o card inteiro é um link, como os de "Quero..." e os de matéria: passar o
   mouse em qualquer ponto já leva o CTA ao estado de hover do Figma */
.card-solucao:hover .card-solucao__figura img { transform: scale(1.04); }
.card-solucao:hover .btn-mini {
  background: var(--branco);
  color: var(--azul);
}
.card-solucao:hover .btn-mini::before { opacity: 0; }
.card-solucao:hover .btn-mini .seta path { fill: var(--azul-escuro); }

/* --------------------------------------------------------------------------
   14. "Uma tecnologia. Diferentes possibilidades"
   -------------------------------------------------------------------------- */
/* Seção de 1440x1020 no Figma (y 4100 a 5120).
   A imagem (722x468 em y=57) é mais alta do que o espaço até a faixa, e no
   Figma as duas caixas se sobrepõem. Por isso a imagem fica posicionada por
   cima da linha, que tem altura fixa — assim a faixa cai sempre em y=451,
   independente de quanto texto houver na coluna da esquerda. */
.possibilidades { padding: 57px 0 47px; }
.possibilidades__linha { position: relative; height: 394px; }
.possibilidades__col-txt { width: 382px; padding-top: 38px; }
/* Elementor */ .e-con.possibilidades__col-txt { --width: 382px; }   /* h2 em y=95 */
.possibilidades .titulo-secao { line-height: 1.22; }
.possibilidades__col-txt .texto { margin-top: 42px; line-height: 1.2; }
.possibilidades__img {
  z-index: 2; position: absolute; right: 0; top: 0; width: 722px; }
/* Elementor */ .e-con.possibilidades__img { --width: 722px; }

/* Faixa de 996x180 centrada (x 222 a 1218). Dentro dela: bloco de texto de
   384px em x=102 e CTA de 410px em x=532, ambos centrados na vertical. */
.faixa-cta {
  display: flex; flex-direction: row;
  align-items: center;
  gap: 46px;
  max-width: 996px;
  margin-inline: auto;
  height: 180px;
  padding: 0 54px 0 102px;
  border-radius: var(--raio);
  background: var(--azul-escuro);
}
/* Elementor */ .e-con.faixa-cta { --display: flex; --flex-direction: row; --gap: 46px; --align-items: center; }
.faixa-cta__txt { width: 384px; flex: none; }
/* Elementor */ .e-con.faixa-cta__txt { --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; --width: 384px; }
.faixa-cta .faixa-cta__titulo { font-size: var(--t-titulo); font-weight: 700; line-height: 1.22; margin-bottom: 14px; }
.faixa-cta__titulo .azul { color: var(--azul); display: block; }
.faixa-cta p { font-size: var(--t-corpo); line-height: 1.2; }
.faixa-cta strong { font-weight: 700; }
/* O texto do Figma tem um erro de digitação ("POSSILIDADES"); com a palavra
   correta, 15px mais larga, o rótulo não cabe na caixa de 410px. Mantemos a
   caixa do Figma e usamos os recuos originais (11 / 8 / 7) mais um leve
   estreitamento de tracking, imperceptível a olho nu. */
.faixa-cta .btn {
  width: 410px;
  flex: none;
  gap: 8px;
  padding: 0 7px 0 11px;
  letter-spacing: -.028em;
}

.aplicacoes { margin-top: 31px; }
.aplicacoes__titulo {
  text-align: center;
  font-size: var(--t-titulo);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 48px;   /* o Figma traz 31; aumentado a pedido, para respirar */
}
.aplicacoes__linha { display: flex; flex-direction: row; justify-content: center; gap: 25px; }
/* Elementor */ .e-con.aplicacoes__linha { --display: flex; --flex-direction: row; --gap: 25px; --justify-content: center; }

.card-app {
  position: relative;
  width: 205px;
  --borda-angulo: 105.3deg;
  min-height: 260px;
  border-radius: var(--raio);
  background: var(--vidro-azul);
  backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
/* Elementor */ .e-con.card-app { --width: 205px; }
/* Figma: card 205x260 com faixa escura de 140. Ícone de ~30px em (12,163),
   título em (52,163) e texto de 128px em (52,185). */
.card-app__topo { height: 140px; background: var(--azul-card); }
.card-app__corpo { padding: 23px 14px 0 52px; }
.card-app__icone {
  position: absolute;
  left: 11px;
  top: 160px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 36px;
  color: var(--branco);
}
.card-app__icone svg,
.card-app__icone img {
  width: auto;
  height: auto;
  max-width: 30px;
  max-height: 33px;
}
.card-app h3 {
  font-size: var(--t-peq);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 7px;
}
.card-app p { width: 128px; font-size: var(--t-micro); line-height: 1.2; }
.card-app:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0, 0, 0, .28); }

/* --------------------------------------------------------------------------
   15. "Obras reais, resultados concretos"
   -------------------------------------------------------------------------- */
/* A faixa do Figma tem 410px de altura: 48 + 310 de conteudo + 52.
   As duas colunas (421 + 129 de intervalo + 650) fecham os 1200 do container. */
.obras { padding: 48px 0 52px; }
.obras__linha { display: flex; flex-direction: row; align-items: center; gap: 129px; }
/* Elementor */ .e-con.obras__linha { --display: flex; --flex-direction: row; --gap: 129px; --align-items: center; }

.obras__col-txt { width: 421px; flex: none; }
/* Elementor */ .e-con.obras__col-txt { --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; --width: 421px; }
/* caixa do rotulo com os mesmos 14px do Figma, para o titulo cair no lugar */
.obras__col-txt .eyebrow { line-height: 1.167; margin-bottom: 17px; }
.obras__col-txt .texto { max-width: 416px; margin-top: 17px; }
.obras__col-txt .btn { width: 180px; margin-top: 26px; padding: 0 5px 0 11px; }

.obras__galeria {
  width: 650px;
  flex: none;
  display: flex; flex-direction: row;
  flex-wrap: wrap;
  gap: 25px;
}
/* Elementor */ .e-con.obras__galeria { --display: flex; --flex-direction: row; --gap: 25px; --flex-wrap: wrap; --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; --width: 650px; }
/* Sem imagem o bloco fica cinza, igual ao Figma. Ao inserir um <img> pelo
   Elementor ele preenche o card sem alterar o enquadramento. */
.obras__item {
  position: relative;
  width: 200px;
  aspect-ratio: 5 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--placeholder);
}
/* Elementor */ .e-con.obras__item { --width: 200px; }
.obras__item img { width: 100%; height: 100%; object-fit: cover; }

/* etiqueta encostada no canto inferior esquerdo; o raio de 10px do canto
   inferior acompanha o do card e o do canto superior direito faz o recorte. */
.obras__tag {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex; flex-direction: row;
  align-items: center;
  height: 20px;
  padding: 0 15px;
  border-radius: 0 var(--raio) 0 var(--raio);
  background: var(--azul);
  color: var(--branco);
  font-size: var(--t-micro);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   16. "#QuemTestaEvoluí" — depoimentos
   Faixa de 1440x360. Coluna de texto de 421px em x=120; carrossel de 650px
   em x=670, com as setas centradas sob o card.
   -------------------------------------------------------------------------- */
.depo {
  padding: 73px 0 42px;
  background: linear-gradient(104.9deg, #002946 0%, #0065ac 100%);
}
.depo__linha { display: flex; flex-direction: row; align-items: flex-start; gap: 129px; }
/* Elementor */ .e-con.depo__linha { --display: flex; --flex-direction: row; --gap: 129px; --align-items: flex-start; }

.depo__col-txt { width: 421px; flex: none; padding-top: 5px; }
/* Elementor */ .e-con.depo__col-txt { --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; --width: 421px; }
.depo__col-txt .texto { max-width: 286px; margin-top: 23px; }

/* a seta aponta da chamada para os depoimentos e vai e volta devagar */
.depo__seta { display: block; width: 382px; max-width: 100%; margin-top: 19px; color: var(--azul); }
.depo__seta img { display: block; width: 100%; height: auto; animation: correr 2.6s ease-in-out infinite alternate; }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(14px); } }

.depo__col-car { width: 650px; flex: none; min-width: 0; }
/* Elementor */ .e-con.depo__col-car { --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; --width: 650px; }
/* um depoimento por vez: o card ocupa a largura inteira do carrossel */
.depo .carrossel__trilho > * { flex: 0 0 100%; }
.depo__nav { margin-top: 19px; }

.card-depo {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 20px 46px 19px 94px;
  border: 1px solid var(--azul);
  border-radius: var(--raio);
}
/* Elementor */ .e-con.card-depo { --display: flex; --flex-direction: column; }
/* aspas de 96px do Figma, ancoradas no canto superior esquerdo do card */
.card-depo { position: relative; }
.card-depo__aspas {
  position: absolute;
  left: 47px; top: 0;
  font-size: 96px;
  line-height: 1.218;
  color: var(--azul);
  pointer-events: none;
}
.card-depo__texto { margin: 0; }
.card-depo__autor { margin-top: 18px; font-size: var(--t-corpo); font-weight: 700; line-height: 1.2; color: var(--azul); }


/* --------------------------------------------------------------------------
   17. Faixa de certificados
   1440x240 em azul, três colunas separadas por filetes de 1x142.
   -------------------------------------------------------------------------- */
.selos { padding: 0; background: var(--azul); }
.selos__linha {
  display: flex; flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 240px;
}
/* Elementor */ .e-con.selos__linha { --display: flex; --flex-direction: row; --gap: 20px; --align-items: center; --justify-content: center; }
.selos__col { display: flex; flex-direction: row; align-items: center; }
/* Elementor */ .e-con.selos__col { --display: flex; --flex-direction: row; --align-items: center; }
.selos__divisor { width: 1px; height: 142px; flex: none; background: var(--branco); }
/* Elementor */ .e-con.selos__divisor { --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; --width: 1px; }

.selos__col--entrega { gap: 14px; }
/* Elementor */ .e-con.selos__col--entrega { --gap: 14px; }
.selos__col--eco     { gap: 11px; }
/* Elementor */ .e-con.selos__col--eco { --gap: 11px; }
.selos__col--cert    { gap: 21px; }
/* Elementor */ .e-con.selos__col--cert { --gap: 21px; }

.selos__circulo {
  display: grid;
  place-items: center;
  width: 70px; height: 70px;
  flex: none;
  border-radius: 50%;
  background: var(--azul-escuro);
}
.selos__circulo img { width: 44px; height: 31px; }
.selos__marca { width: 73px; height: 62px; flex: none; object-fit: contain; }
.selos__marcas { display: flex; flex-direction: row; align-items: center; gap: 18px; flex: none; }
/* Elementor */ .e-con.selos__marcas { --display: flex; --flex-direction: row; --gap: 18px; --align-items: center; --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; }
.selos__marcas img { width: auto; }
/* Medidas do Figma. Ficam na classe (e não nos atributos do <img>) porque o
   widget de Imagem do Elementor escreve os atributos com o tamanho do arquivo,
   e porque os atributos passaram a servir só para reservar espaço. */
.selos__marca--sgs img,       .selos__marca--sgs       { width: 66px; height: 64px; }
.selos__marca--gbc img,       .selos__marca--gbc       { width: 68px; height: 79px; }
.selos__marca--qualidade img, .selos__marca--qualidade { width: 72px; height: 72px; }

.selos__txt { width: 182px; flex: none; min-width: 0; }
/* Elementor */ .e-con.selos__txt { --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; --width: 182px; }
.selos__txt h3 { font-size: var(--t-corpo); font-weight: 700; line-height: 1.2; margin-bottom: 8px; }
.selos__txt p  { font-size: var(--t-peq); line-height: 1.35; }

/* --------------------------------------------------------------------------
   18. "Pronto para mudar a forma que você constrói?"
   Faixa de 1440x400. Foto e diagonal saem do container e vão até as bordas.
   -------------------------------------------------------------------------- */
.pronto {
  position: relative;
  min-height: 400px;
  padding: 0;
  overflow: hidden;
  background: var(--azul-escuro);
}
.pronto__diagonal {
  position: absolute;
  left: calc(50% - 205px);       /* x=515 num palco de 1440 */
  top: 0;
  width: 402px; height: 100%;
}
.pronto__foto {
  position: absolute;
  left: calc(50% - 174px);       /* x=546 */
  bottom: 0;
  width: 349px; height: 390px;
  object-fit: cover;
}
.pronto .wrap { position: relative; z-index: 2; display: flex; flex-direction: row; min-height: 400px; }
/* Elementor */ .pronto .e-con.wrap { --display: flex; --flex-direction: row; }

.pronto__col-txt { width: 411px; flex: none; padding-top: 63px; }
/* Elementor */ .e-con.pronto__col-txt { --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; --width: 411px; }
.pronto__col-txt .texto { max-width: 408px; margin-top: 19px; }
.pronto__cta { width: 245px; margin-top: 27px; padding: 0 5px 0 14px; }
.pronto__selo {
  display: flex; flex-direction: row;
  align-items: center;
  gap: 7px;
  margin-top: 25px;
  font-size: var(--t-corpo);
  font-weight: 700;
  color: var(--azul);
}
.pronto__selo img { width: 20px; height: 22px; flex: none; }

/* A grade da direita repete o escalonamento do Figma: as duas colunas de
   cards nascem em alturas iguais, mas cada linha entra um pouco deslocada. */
.pronto__col-cards { position: relative; flex: 1 1 auto; }
/* Elementor */ .e-con.pronto__col-cards { --flex-grow: 1; --flex-shrink: 1; --flex-basis: auto; }
.pronto__titulo-cards {
  position: absolute;
  left: 414px; top: 43px;
  font-size: var(--t-titulo);
  font-weight: 700;
}
.pronto__grade { position: absolute; left: 241px; top: 75px; width: 550px; height: 260px; }
/* Elementor */ .e-con.pronto__grade { --width: 550px; }

.card-porque {
  --borda-angulo: 111.9deg;
  --borda-peso: .7px;
  position: absolute;
  display: flex; flex-direction: row;
  align-items: center;
  gap: 14px;
  width: 250px;
  height: 70px;
  padding: 0 12px 0 17px;
  border-radius: var(--raio);
  background: var(--vidro-azul);
  backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
  animation: flutuar var(--flutua-dur, 6s) var(--flutua-atraso, 0s) ease-in-out infinite;
  will-change: transform;
}
/* Elementor */ .e-con.card-porque { --display: flex; --flex-direction: row; --gap: 14px; --align-items: center; --width: 250px; }
.card-porque__icone { display: grid; place-items: center; width: 30px; height: 32px; flex: none; }
.card-porque__icone img { width: auto; height: auto; max-width: 30px; max-height: 32px; }
.card-porque h3 { font-size: var(--t-corpo); font-weight: 700; line-height: 1.2; }
.card-porque p  { width: 168px; margin-top: 3px; font-size: var(--t-peq); line-height: 1.25; }

/* posições do Figma, relativas ao início da grade (x=772, y=75) */
.card-porque--1 { left:  31px; top:   0; --flutua-dur: 4.6s; --flutua-atraso: -0.9s; --flutua-amp: 5px; }
.card-porque--2 { left: 299px; top:   0; --flutua-dur: 5.2s; --flutua-atraso: -2.7s; --flutua-amp: 6px; }
.card-porque--3 { left:   0;   top:  95px; --flutua-dur: 4.1s; --flutua-atraso: -1.6s; --flutua-amp: 4px; }
.card-porque--4 { left: 268px; top:  95px; --flutua-dur: 4.9s; --flutua-atraso: -3.8s; --flutua-amp: 5px; }
.card-porque--5 { left:  14px; top: 190px; --flutua-dur: 5.5s; --flutua-atraso: -0.3s; --flutua-amp: 6px; }
.card-porque--6 { left: 282px; top: 190px; --flutua-dur: 4.3s; --flutua-atraso: -2.2s; --flutua-amp: 4px; }

/* --------------------------------------------------------------------------
   19. Rodapé
   Faixa azul de 1440x248 com a maquete à direita + barra escura de 34px.
   -------------------------------------------------------------------------- */
.rodape { position: relative; overflow: hidden; background: var(--azul); }
/* `cover` é o mesmo enquadramento do Figma (fill) e garante que a base da
   maquete encoste na barra escura, sem a sobra de meio pixel do `contain`. */
.rodape__casa {
  position: absolute;
  left: calc(50% - 146px);       /* x=574 */
  bottom: 34px;                  /* encosta na barra escura */
  display: block;
  width: 716px; height: 250px;
}
.rodape__casa img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: bottom;
}
.rodape .wrap { position: relative; z-index: 2; min-height: 248px; }
/* A coluna acompanha o CTA (307), que no Figma é mais largo que o parágrafo.
   Antes ela tinha os 282 do texto e o botão transbordava — no preview isso
   passava, mas o Elementor limita todo widget a 100% do container, então o CTA
   ficava preso em 282 e não havia ajuste no builder que o alargasse.
   O texto mantém a quebra dele pelo próprio max-width. */
.rodape__col-txt { width: 307px; padding-top: 61px; }
/* Elementor */ .e-con.rodape__col-txt { --width: 307px; }
.rodape__chamada { max-width: 282px; font-size: var(--t-titulo); font-weight: 700; line-height: 1.25; }
/* A largura fica em `:where` — peso zero. É o padrão do Figma, mas o controle
   de largura do widget no Elementor passa a ganhar dela, que é o que faltava
   para dar para ajustar o CTA pelo builder. Recuo e margem continuam no lugar. */
.rodape__cta { margin-top: 26px; padding: 0 5px 0 11px; }
:where(.rodape__cta) { width: 307px; }

.rodape__barra { background: var(--azul-escuro); }
.rodape__barra p {
  padding: 9px 22px 10px;
  font-size: var(--t-peq);
  line-height: 1.25;
  text-align: center;
}

/* CTA claro: fundo branco, texto azul e quadrado azul (estado do rodapé) */
.btn--claro { background: var(--branco); color: var(--azul); }
.btn--claro .btn__quadro { background: var(--azul); color: var(--branco); }
.btn--claro:hover { background: var(--azul-escuro); color: var(--branco); }
.btn--claro:hover .btn__quadro { background: var(--branco); color: var(--azul-escuro); }

/* --------------------------------------------------------------------------
   20. Marcador de asset pendente (só no preview)
   -------------------------------------------------------------------------- */
.pendente {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255, 255, 255, .55);
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .8);
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px;
  line-height: 1.3;
}

/* --------------------------------------------------------------------------
   20. Página de post  (Figma 249:370 — faixa de 1440x920)
   Coluna de texto de 484px em x=120 e coluna lateral de 590px em x=730;
   as duas começam em y=236. A altura da seção acompanha o conteúdo: o texto
   do post é variável, então nada de altura fixa aqui.
   -------------------------------------------------------------------------- */
/* NÃO renomear para `.post`: o WordPress carimba a classe `post` em todo item
   de loop (`<div class="... post-1 post type-post ...">`), e uma regra `.post`
   aqui alcançava cada card do carrossel de matérias — era isso que enchia os
   cards de degradê e esticava a seção em 334px de recuo. */
.artigo {
  padding: 236px 0 98px;
  background: linear-gradient(122.6deg, #002946 0%, #002a47 16.8%, #0065ac 96.6%);
}
.post__linha { display: flex; flex-direction: row; align-items: flex-start; gap: 126px; }
/* Elementor */ .e-con.post__linha { --display: flex; --flex-direction: row; --gap: 126px; --align-items: flex-start; }
.post__col-txt  { width: 484px; flex: none; }
/* Elementor */ .e-con.post__col-txt { --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; --width: 484px; }
.post__col-lado { width: 590px; flex: none; }
/* Elementor */ .e-con.post__col-lado { --flex-grow: 0; --flex-shrink: 0; --flex-basis: auto; --width: 590px; }

/* caixa do rótulo com os 15px do Figma, para o título cair em y=270 */
.post__categoria { line-height: 1.25; margin-bottom: 19px; }
.post__titulo { max-width: 482px; }
.post__corpo { margin-top: 39px; }
.post__corpo p + p { margin-top: 1.15em; }

/* imagem destaque: 590x372 no Figma; sem <img> fica cinza, como no arquivo */
.post__destaque {
  width: 100%;
  aspect-ratio: 590 / 372;
  margin: 0;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--placeholder);
}
/* Elementor */ .e-con.post__destaque { --width: 100%; }
.post__destaque img { width: 100%; height: 100%; object-fit: cover; }

/* caixa de compartilhamento: 590x158, vidro branco com borda em degradê */
.post__share {
  --borda-angulo: 111deg;
  --borda-peso: .7px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  min-height: 158px;
  margin-top: 37px;
  padding: 20px 55px 20px 43px;
  border-radius: var(--raio);
  background: var(--vidro-branco);
  backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
}
/* Elementor */ .e-con.post__share { --display: flex; --flex-direction: row; --align-items: center; --justify-content: space-between; }
.post__share-txt {
  width: 225px;
  flex: none;
  font-size: var(--t-titulo);
  font-weight: 600;
  line-height: 1.25;
}
.post__redes { display: flex; flex-direction: row; gap: 17px; flex: none; }

/* cada rede repete o círculo de vidro das setas de carrossel */
.rede {
  --borda-angulo: 145.1deg;
  --borda-peso: .7px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--vidro-branco);
  transition: background var(--transicao);
}
.rede img { width: auto; height: auto; max-width: 16px; max-height: 16px; }
.rede:hover { background: var(--azul); }
.rede:hover::before { opacity: 0; }

/* "Leia também" reaproveita a seção de matérias; só o fundo é próprio */
.materias--leia { background: linear-gradient(107.6deg, #002946 0%, #0065ac 100%); }

/* --------------------------------------------------------------------------
   20b. Página de categoria  (Figma 259:567 — faixa de 1440x780)

   Mesmo degradê das outras seções de conteúdo. No Figma: rótulo em y=204,
   título em 244, texto em 317 e a lista de matérias em 405. A foto da equipe
   ocupa 541x397 a partir de (683, 143).

   A lista fica VAZIA de propósito: o carrossel é montado no builder. O
   `min-height` guarda a altura que ela tem no Figma (260 do card + 30 de folga
   + 34 da seta), para a seção não chegar achatada.
   -------------------------------------------------------------------------- */
.categoria { position: relative; padding: 204px 0 51px; }
.categoria__col-txt { width: 482px; max-width: 100%; position: relative; z-index: 2; }
.categoria__col-txt .eyebrow { margin-bottom: 25px; }
/* 1.2 dá a caixa de 48 que o Figma mostra para o título de 40 */
.categoria__titulo { font-size: var(--t-h2); font-weight: 700; line-height: 1.2; }
.categoria__col-txt .texto { max-width: 203px; margin-top: 25px; }

.categoria__foto {
  position: absolute;
  top: 143px;
  left: calc(50% - 37px);      /* x=683 num palco de 1440 */
  width: 541px;
  max-width: 42%;
  height: auto;
}

.categoria__lista { margin-top: 36px; min-height: 324px; }

/* --------------------------------------------------------------------------
   21. Animação de entrada
   -------------------------------------------------------------------------- */
.revelar { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.revelar.visivel { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .badge, .card-porque { animation: none; }
  .depo__seta img { animation: none; }
  .revelar { opacity: 1; transform: none; transition: none; }
  .carrossel__trilho { transition: none; }
}

/* --------------------------------------------------------------------------
   22. Responsivo — breakpoints do Elementor (1024 tablet / 767 mobile)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .camadas__img { width: 100%; }
}

@media (max-width: 1024px) {
  :root { --t-h2: 32px; }

  /* do tablet para baixo o menu colapsa — igual ao widget Nav Menu do Elementor.
     O CTA principal continua acessível dentro do menu aberto. */
  .menu { position: relative; flex-wrap: wrap; height: auto; padding: 14px 16px; }
/* Elementor */ .e-con.menu { --flex-wrap: wrap; }
  .menu__toggle { display: flex; flex-direction: column; }
  .menu__nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin: 0;
    padding-top: 18px;
  }
/* Elementor */ .e-con.menu__nav { --display: none; --flex-direction: column; --order: 3; --gap: 18px; --align-items: flex-start; --width: 100%; }
  .menu.aberto .menu__nav { display: flex; flex-direction: column; }
/* Elementor */ .menu.aberto .e-con.menu__nav { --display: flex; --flex-direction: column; }
  .menu .btn { display: none; }
  /* aberto, o CTA acompanha o alinhamento dos itens do menu (à esquerda) */
  .menu.aberto .btn { display: inline-flex; flex-direction: row; order: 4; margin: 18px auto 0 0; }

  /* hero passa a empilhar: texto → cena → badges → cards */
  .hero { height: auto; padding-bottom: 50px; }
  .hero__palco {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding-top: 130px;
  }
/* Elementor */ .e-con.hero__palco { --display: flex; --flex-direction: column; --gap: 14px; --align-items: center; }
  .hero__palco > * { position: relative; left: auto; top: auto; width: 100%; }
  /* ordem do empilhamento: texto → cena → badges → cards */
  .hero__texto { order: -1; max-width: 375px; margin-inline: auto; align-items: center; }
/* Elementor */ .e-con.hero__texto { --order: -1; --align-items: center; }
  /* a imagem "entrega" a base para os selos: eles sobem e ficam por cima dela */
  .hero__cena { order: 0; margin: 26px 0 -60px; }
/* Elementor */ .e-con.hero__cena { --order: 0; }
  .badge--seguranca  { order: 1; }
/* Elementor */ .e-con.badge--seguranca { --order: 1; }
  .badge--custo      { order: 2; }
/* Elementor */ .e-con.badge--custo { --order: 2; }
  .badge--processo   { order: 3; }
/* Elementor */ .e-con.badge--processo { --order: 3; }
  .badge--desempenho { order: 4; }
/* Elementor */ .e-con.badge--desempenho { --order: 4; }
  .quero { order: 5; }
/* Elementor */ .e-con.quero { --order: 5; }
  /* empilhado, o badge vira uma linha simples: ícone + rótulo — mas mantém a
     mesma flutuação automática do desktop, cada um no seu ritmo */
  .badge { width: 100%; max-width: 420px; }
/* Elementor */ .e-con.badge { --width: 100%; }
  .badge__icone { position: static; flex: none; }
  .badge__texto { margin-left: 14px !important; }
  .hero__sub, .hero__cta { margin-left: 0; }

  /* os quatro cards sobem para logo abaixo dos selos */
  .quero { flex-wrap: wrap; gap: 16px; margin-top: 16px; padding-top: 0; }
/* Elementor */ .e-con.quero { --gap: 16px; --flex-wrap: wrap; }
  .card-quero { flex: 1 1 calc(50% - 8px); min-height: 0; }
/* Elementor */ .e-con.card-quero { --flex-grow: 1; --flex-shrink: 1; --flex-basis: calc(50% - 8px); }

  /* dois produtos por tela, como o widget de carrossel faz no tablet */
  .carrossel--solucoes .carrossel__trilho > * { flex: 0 0 calc(50% - 13px); }

  .categoria { padding-top: 160px; }

  .sistema__linha,
  .materias__linha,
  .feito__linha,
  .possibilidades__linha,
  .obras__linha,
  .depo__linha { flex-direction: column; gap: 40px; }
/* Elementor */ .e-con.sistema__linha, .e-con.materias__linha, .e-con.feito__linha, .e-con.possibilidades__linha, .e-con.obras__linha, .e-con.depo__linha { --flex-direction: column; --gap: 40px; }

  .sistema__col-txt,
  .materias__col-txt,
  .materias__col-car,
  .feito__col-txt,
  .possibilidades__col-txt,
  .obras__col-txt,
  .depo__col-txt { width: 100%; padding-top: 0; }
/* Elementor */ .e-con.sistema__col-txt, .e-con.materias__col-txt, .e-con.materias__col-car, .e-con.feito__col-txt, .e-con.possibilidades__col-txt, .e-con.obras__col-txt, .e-con.depo__col-txt { --width: 100%; }
  .possibilidades__linha { position: static; height: auto; }
  .possibilidades__img { position: static; width: 100%; }
/* Elementor */ .e-con.possibilidades__img { --width: 100%; }
  .faixa-cta { max-width: none; height: auto; }
  .faixa-cta__txt { width: 100%; }
/* Elementor */ .e-con.faixa-cta__txt { --width: 100%; }
  .faixa-cta .btn { width: 100%; max-width: 410px; }
  .materias__col-txt .texto { max-width: none; }
  .materias__col-txt { padding-top: 0; }

  /* Composição do Figma para telas pequenas (frame de 393x852, node 259:832):
     os fios indicadores continuam, com as legendas remontadas em volta da
     imagem. Caixa de referência: 361x397 a partir de x=16, y=29 do frame. */
  .camadas {
    flex: 1 1 auto;
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
    aspect-ratio: 361 / 397;
  }
/* Elementor */ .e-con.camadas { --flex-grow: 1; --flex-shrink: 1; --flex-basis: auto; --width: 100%; }
  .camadas > * { position: absolute; }
  .camadas__img { left: 0; top: 31.99%; width: 100%; height: 53.15%; }

  /* no mobile o fio tem 2px */
  .camadas__fio { display: block; width: 2px; transform: translateX(-1px); }
/* Elementor */ .e-con.camadas__fio { --display: block; --width: 2px; }
  .camadas__fio--nucleo   { left: 23.55%; top: 36.27%; height: 12.85%; }
  .camadas__fio--primeira { left: 71.19%; top: 29.22%; height: 19.90%; }
  .camadas__fio--segunda  { left: 77.01%; top: 58.44%; height: 12.85%; }

  /* cada legenda continua centrada no seu fio */
  .camadas__nota { margin: 0; padding: 0; text-align: center; }
  .camadas__nota--nucleo   { left:  0;      top:  7.05%; width: 46.81%; }
/* Elementor */ .e-con.camadas__nota--nucleo { --width: 46.81%; }
  /* a caixa da "primeira camada" ganha folga para o título não quebrar:
     largura maior, mantendo o bloco centrado no fio (71,19%) */
  .camadas__nota--primeira { left: 48.69%; top:  0;      width: 45%; }
/* Elementor */ .e-con.camadas__nota--primeira { --width: 45%; }
  .camadas__nota--segunda  { left: 50.14%; top: 75.31%; width: 53.46%; }
/* Elementor */ .e-con.camadas__nota--segunda { --width: 53.46%; }

  .feito__linha { gap: 40px; }
/* Elementor */ .e-con.feito__linha { --gap: 40px; }
  .feito__visual { flex: 1 1 auto; width: 100%; height: auto; }
/* Elementor */ .e-con.feito__visual { --flex-grow: 1; --flex-shrink: 1; --flex-basis: auto; --width: 100%; }
  .feito__visual > * { position: relative; }
  .feito__visual .eyebrow {
    left: 0; top: auto;
    width: auto;
    margin-bottom: 18px;
    text-align: center;
    white-space: normal;
  }
  /* a imagem desce e encosta no primeiro card de benefício, sem vão entre eles */
  .feito__img { top: 0; left: 0; width: 100%; height: auto; margin: 16px 0 -16px; }
  .beneficio { position: relative; left: auto !important; top: auto !important; width: 100%; margin-top: 16px; }
/* Elementor */ .e-con.beneficio { --width: 100%; }

  .sustenta__bloco { justify-content: center; padding: 31px 24px 44px; }
/* Elementor */ .e-con.sustenta__bloco { --justify-content: center; }
  .sustenta__intro { height: auto; }
  .indicado__linha { flex-wrap: wrap; gap: 40px; }
/* Elementor */ .e-con.indicado__linha { --gap: 40px; --flex-wrap: wrap; }
  /* empilhado, o card acompanha o conteúdo em vez dos 283px do Figma */
  .pilar__caixa { min-height: 0; padding-bottom: 28px; }
  .pilar h3 { min-height: 0; }
  .aplicacoes__linha { flex-wrap: wrap; }
/* Elementor */ .e-con.aplicacoes__linha { --flex-wrap: wrap; }
  .obras__galeria { width: 100%; justify-content: flex-start; }
/* Elementor */ .e-con.obras__galeria { --justify-content: flex-start; --width: 100%; }
  .obras__item { width: calc(33.333% - 17px); }
/* Elementor */ .e-con.obras__item { --width: calc(33.333% - 17px); }
  .faixa-cta { flex-direction: column; align-items: flex-start; gap: 24px; padding: 30px; }
/* Elementor */ .e-con.faixa-cta { --flex-direction: column; --gap: 24px; --align-items: flex-start; }

  /* — depoimentos — */
  .depo__col-car { width: 100%; }
/* Elementor */ .e-con.depo__col-car { --width: 100%; }
  .depo__col-txt .texto { max-width: 480px; }

  /* — certificados: as três colunas viram uma grade sem filetes — */
  .selos__linha { flex-wrap: wrap; gap: 32px 40px; padding-block: 44px; min-height: 0; }
/* Elementor */ .e-con.selos__linha { --gap: 32px 40px; --flex-wrap: wrap; }
  .selos__divisor { display: none; }
/* Elementor */ .e-con.selos__divisor { --display: none; }
  .selos__col { flex: 1 1 300px; }
/* Elementor */ .e-con.selos__col { --flex-grow: 1; --flex-shrink: 1; --flex-basis: 300px; }

  /* — CTA final: a foto e a diagonal saem de cena e a grade volta a fluir — */
  .pronto { min-height: 0; }
  /* A faixa em degradê e a foto continuam na composição: sem espaço à direita,
     elas descem para o fim da seção, com a foto centrada sobre a faixa — a
     mesma relação do desktop, só que empilhada. O recuo de baixo do .wrap
     reserva a altura delas. */
  .pronto .wrap { flex-direction: column; gap: 48px; min-height: 0; padding-block: 60px 316px; }
/* Elementor */ .pronto .e-con.wrap { --flex-direction: column; --gap: 48px; }
  .pronto__diagonal {
    left: 50%;
    top: auto;
    bottom: 0;
    width: 320px;
    height: 320px;
    transform: translateX(-50%);
  }
  .pronto__foto {
    left: 50%;
    bottom: 0;
    width: 268px;
    height: 300px;
    transform: translateX(-50%);
  }
  .pronto__col-txt { width: 100%; padding-top: 0; }
/* Elementor */ .e-con.pronto__col-txt { --width: 100%; }
  .pronto__col-cards { position: static; }
  .pronto__titulo-cards { position: static; margin-bottom: 20px; }
  .pronto__grade {
    position: static;
    display: flex; flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
    width: 100%;
    height: auto;
  }
/* Elementor */ .e-con.pronto__grade { --display: flex; --flex-direction: row; --gap: 25px; --flex-wrap: wrap; --width: 100%; }
  .card-porque { position: static; width: calc(50% - 13px); }
/* Elementor */ .e-con.card-porque { --width: calc(50% - 13px); }

  /* — página de post —
     Empilhada, a ordem de leitura muda: categoria, título, imagem destaque,
     texto e por último o compartilhar. `display: contents` dissolve as duas
     colunas para os cinco blocos virarem irmãos e poderem ser reordenados. */
  .artigo { padding: 150px 0 60px; }
  .post__linha { flex-direction: column; gap: 0; }
/* Elementor */ .e-con.post__linha { --flex-direction: column; --gap: 0; }
  .post__col-txt, .post__col-lado { display: contents; }
/* Elementor */ .e-con.post__col-txt, .e-con.post__col-lado { --display: contents; }
  .post__categoria { order: 1; }
  .post__titulo    { order: 2; max-width: none; }
  .post__destaque  { order: 3; margin-top: 26px; }
/* Elementor */ .e-con.post__destaque { --order: 3; }
  .post__corpo     { order: 4; margin-top: 30px; }
  .post__share     { order: 5; margin-top: 32px; }
/* Elementor */ .e-con.post__share { --order: 5; }

  /* — rodapé: texto primeiro, maquete depois, barra por último — */
  .rodape { display: flex; flex-direction: column; }
/* Elementor */ .e-con.rodape { --display: flex; --flex-direction: column; }
  .rodape .wrap { order: 1; min-height: 0; padding-block: 48px 32px; }
/* Elementor */ .rodape .e-con.wrap { --order: 1; }
  .rodape__casa { order: 2; position: relative; left: auto; bottom: auto; width: 100%; max-width: 716px; height: auto; margin-inline: auto; }
  .rodape__casa img { height: auto; }
  .rodape__barra { order: 3; }
/* Elementor */ .e-con.rodape__barra { --order: 3; }
  .rodape__col-txt { width: 100%; padding-top: 0; max-width: 420px; }
/* Elementor */ .e-con.rodape__col-txt { --width: 100%; }
}

@media (max-width: 767px) {
  :root { --t-h2: 28px; }

  .wrap { padding-inline: 22px; }
  .topo { padding-top: 20px; }

  .hero__texto { max-width: 320px; }
  .hero__palco { padding-top: 100px; }
  .badge { height: auto; padding: 10px; }
  .badge__texto { font-size: 12px; }
  .badge__icone { width: 28px; height: 28px; }
  .card-quero { padding-right: 46px; }

  .card-quero { flex: 1 1 100%; }
/* Elementor */ .e-con.card-quero { --flex-grow: 1; --flex-shrink: 1; --flex-basis: 100%; }
  /* CTAs sempre em uma linha só: fonte e moldura reduzidas na mesma proporção,
     para o padrão ser igual em todos os botões da página */
  .btn {
    height: 40px;
    gap: 8px;
    padding: 0 4px 0 12px;
    font-size: var(--t-peq);
    letter-spacing: -.01em;
    white-space: nowrap;
  }
  .btn__quadro { width: 26px; height: 26px; }
  .btn .seta { width: 13px; height: 13px; }
  /* Único CTA que não cabe em uma linha a 375px (40 caracteres): quebra em
     "do Monopainel®" e o botão acompanha a linha mais larga, sem sobra. */
  .quebra-mobile { display: inline; }
  .faixa-cta { padding: 26px 20px; }
  .faixa-cta .btn {
    width: auto;
    max-width: 100%;
    height: auto;
    min-height: 40px;
    padding-block: 7px;
    line-height: 1.25;
  }
  .sistema, .materias, .feito, .indicado, .solucoes, .possibilidades, .obras { padding-block: 60px; }
  /* Na categoria o menu fixo continua sobreposto, então o topo é maior.
     A seção vira coluna para a foto poder ir DEPOIS do texto: no HTML ela vem
     antes, porque no desktop é posicionada em absoluto. */
  .categoria {
    display: flex;
    flex-direction: column;
    padding: 130px 0 48px;
  }
  .categoria .wrap { order: 1; }
/* Elementor */ .categoria .e-con.wrap { --order: 1; }
  .categoria__col-txt { width: 100%; }
  .categoria__col-txt .texto { max-width: none; }
  .categoria__foto {
    order: 2;
    position: relative;
    top: auto;
    left: auto;
    width: calc(100% - 44px);      /* mesma calha do .wrap */
    max-width: 100%;
    margin: 32px auto 0;
  }
  .categoria__lista { min-height: 0; }
  /* a faixa de matérias encosta um pouco mais na seção anterior */
  .materias { padding-top: 24px; }
  .sustenta__bloco { padding: 28px 22px 44px; border-radius: 14px 14px 0 0; }
  /* no mobile os cards acompanham o conteúdo, sem a altura fixa do Figma */
  .card-verde { min-height: 0; padding: 24px 20px; }
  .card-verde h3 { margin-bottom: 8px; }
  .sustenta__intro, .card-verde { width: 100%; }
/* Elementor */ .e-con.sustenta__intro, .e-con.card-verde { --width: 100%; }
  .pilar { width: 100%; max-width: 300px; }
/* Elementor */ .e-con.pilar { --width: 100%; }
  .obras__item { width: calc(50% - 13px); }
/* Elementor */ .e-con.obras__item { --width: calc(50% - 13px); }
  .obras__galeria { gap: 16px; }
/* Elementor */ .e-con.obras__galeria { --gap: 16px; }
  /* com o card estreito, a etiqueta longa quebra em vez de ser cortada */
  .obras__tag {
    max-width: 100%;
    height: auto;
    min-height: 20px;
    padding: 4px 10px;
    line-height: 1.2;
    white-space: normal;
  }
  /* um por linha, ocupando a largura toda: a faixa de imagem mantém a
     proporção 205x140 (as fotos não distorcem) e o texto deixa de ficar preso
     aos 128px do desktop, que sobrava espaço vazio à direita. */
  .aplicacoes__linha { gap: 16px; }
/* Elementor */ .e-con.aplicacoes__linha { --gap: 16px; }
  /* O card vira uma grade de duas colunas na parte de baixo: a imagem ocupa a
     linha inteira e, embaixo, o ícone fica numa coluna própria, centrado na
     altura do texto (no desktop ele é posicionado em cima, como no Figma). */
  .card-app {
    width: 100%; min-width: 0; min-height: 0;
    display: grid;
    grid-template-columns: 52px 1fr;
  }
/* Elementor */ .e-con.card-app { --display: grid; --width: 100%; }
  .card-app__topo { grid-column: 1 / -1; height: auto; aspect-ratio: 205 / 140; }
  .card-app__icone {
    position: static;
    top: auto;
    align-self: center;
    justify-self: center;
  }
  .card-app__corpo { padding: 20px 22px 24px 0; }
  .card-app p { width: auto; }
  /* No celular o carrossel mostra um card por vez, ocupando a largura toda:
     ao duplicar um card no Elementor ele entra na rotação, e as setas passam a
     percorrer a lista inteira. O intervalo entra como recuo do próprio trilho
     para o cálculo do passo continuar exato. */
  .carrossel__trilho > * { flex: 0 0 100%; }
  .carrossel--solucoes { max-width: none; }
  .carrossel--solucoes .carrossel__trilho > * { flex: 0 0 100%; }

  .depo { padding-block: 60px 48px; }
  .depo__seta { width: 240px; }
  .card-depo { padding: 18px 20px 20px 22px; }
  /* empilhadas, as aspas viram um bloco proprio; a caixa e recortada com
     line-height 0 + padding para sobrar so a altura da tinta do glifo */
  .card-depo__aspas { position: static; display: block; font-size: 56px; line-height: 0; padding-top: 24px; margin-bottom: 8px; }
  /* no celular a coluna vira uma pilha: selo em cima, texto embaixo */
  .selos__col { flex: 1 1 100%; flex-wrap: wrap; gap: 14px; }
/* Elementor */ .e-con.selos__col { --gap: 14px; --flex-wrap: wrap; --flex-grow: 1; --flex-shrink: 1; --flex-basis: 100%; }
  .selos__txt { width: auto; flex: 1 1 200px; min-width: 0; }
/* Elementor */ .e-con.selos__txt { --flex-grow: 1; --flex-shrink: 1; --flex-basis: 200px; --width: auto; }
  .selos__marcas { flex-wrap: wrap; }
/* Elementor */ .e-con.selos__marcas { --flex-wrap: wrap; }
  .card-porque { width: 100%; }
/* Elementor */ .e-con.card-porque { --width: 100%; }
  .pronto__cta { width: 100%; max-width: 307px; }
  :where(.rodape__cta) { width: 100%; max-width: 307px; }

  .artigo { padding-top: 130px; }
  .post__share {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    min-height: 0;
    padding: 24px 22px;
  }
/* Elementor */ .e-con.post__share { --flex-direction: column; --gap: 20px; --align-items: flex-start; }
  .post__share-txt { width: auto; }
}

/* --------------------------------------------------------------------------
   23. Direção das setas de carrossel
   -------------------------------------------------------------------------- */
.nav-seta .seta--esq { transform: rotate(-90deg); }
.nav-seta .seta--dir { transform: rotate(90deg); }
/* (mantido só para compatibilidade; o glifo atual é .seta-nav) */