/* =====================================================================
   Adão Litro 55125 — acabamento
   Só o que o Elementor free não entrega por controle nativo.
   Layout, cor, borda, sombra e tipografia moram no editor.
   ===================================================================== */

/* ---------- fontes locais ---------- */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/cabinet-grotesk-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/cabinet-grotesk-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('fonts/cabinet-grotesk-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --al-navy: #16346B;
  --al-navy-esc: #0E2450;
  --al-amarelo: #F9C300;
  --al-papel: #F2F1ED;
  --al-tinta: #14213D;
  --al-linha: #DBDAD4;
}

/* ---------- fundo texturizado do modelo ---------- */
body {
  background-color: var(--al-papel);
  background-image: radial-gradient(rgba(20, 33, 61, .045) 1px, transparent 1px);
  background-size: 4px 4px;
  overflow-x: hidden;
}

::selection { background: var(--al-amarelo); color: var(--al-navy-esc); }

/* foco visível — acessibilidade */
a:focus-visible,
button:focus-visible,
:focus-visible {
  outline: 3px solid var(--al-amarelo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* pular para o conteúdo */
.al-pular {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--al-navy); color: #fff; font-weight: 700;
  padding: 12px 20px; border-radius: 0 0 8px 0; text-decoration: none;
}
.al-pular:focus { left: 0; }

/* ---------- o skew de -9° da identidade impressa ----------
   Atenção: o Elementor 4 usa markup otimizado — não existe
   .elementor-widget-container, os filhos são diretos do widget. */
.al-skew .elementor-heading-title,
.al-skew.elementor-widget-heading .elementor-heading-title {
  display: inline-block;
  transform: skewX(-9deg);
  transform-origin: left;
}

/* variante que inclina a caixa inteira (fundo junto com o texto),
   usada no selo 55125 do topo — igual ao span do impresso */
.elementor .elementor-widget.al-skew-box { transform: skewX(-9deg); }
.al-skew-box .elementor-heading-title { transform: none; }

/* parágrafos de text-editor não carregam a margem padrão do navegador */
.elementor-widget-text-editor > p:last-child { margin-bottom: 0; }

/* ---------- header fixo (sticky é recurso Pro) ---------- */
.elementor .e-con.al-topo {
  position: sticky; top: 0; z-index: 70;
  background: rgba(242, 241, 237, .94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}

/* ---------- âncoras não somem atrás do header fixo ---------- */
[id] { scroll-margin-top: 86px; }

/* ---------- hero: gradiente de 3 paradas + brilho radial ---------- */
.elementor .e-con.al-hero {
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(140deg, #2B62A8 0%, #3C8FD0 45%, #2E6FBF 100%);
}
.elementor .e-con.al-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(760px 460px at 78% 6%, rgba(255, 255, 255, .22), transparent 60%);
}
.elementor .e-con.al-hero > .e-con-inner,
.elementor .e-con.al-hero > * { position: relative; z-index: 1; }

/* selo "Eleições 2026 · Paraná · PSD" — pilula do tamanho do texto */
.elementor .elementor-widget.al-selo {
  display: inline-flex;
  width: auto;
  align-self: flex-start;
  max-width: 100%;
}
.al-selo p { margin: 0; }
.al-selo b { color: var(--al-amarelo); }

.elementor.elementor .e-con > .elementor-widget.al-hero-sub { max-width: 36ch; }
.al-hero-sub p { margin: 0; }

/* cartão do número sobreposto à foto */
.elementor .e-con.al-hero-foto { position: relative; }
.elementor .e-con.al-hero-foto > .e-con.al-cartao {
  position: absolute;
  left: -16px;
  bottom: 30px;
  width: auto;
  z-index: 3;
}
@media (max-width: 899px) {
  .elementor .e-con.al-hero-foto > .e-con.al-cartao {
    left: auto; right: 12px; bottom: 16px;
  }
  .elementor .e-con.al-hero-foto { max-width: 460px; margin-left: auto; margin-right: auto; }
}

/* o skew inclina o texto para fora da caixa — um respiro evita o corte */
.al-marca { padding-right: 8px; }

/* ---------- larguras de leitura (medida do modelo) ----------
   O Elementor aplica max-width:100% em todo widget, então
   estas precisam de especificidade maior para valer. */
.al-sec-titulo { max-width: 66ch; }

.elementor.elementor .e-con > .elementor-widget.al-lead,
.e-con.e-con > .e-con-inner > .elementor-widget.al-lead { max-width: 62ch; }

.elementor.elementor .e-con > .elementor-widget.al-nota,
.e-con.e-con > .e-con-inner > .elementor-widget.al-nota { max-width: 70ch; }

.elementor.elementor .e-con > .elementor-widget.al-pav-txt,
.e-con.e-con > .e-con-inner > .elementor-widget.al-pav-txt { max-width: 44ch; }
.al-lead p, .al-nota p, .al-inv-txt p, .al-pav-txt p { margin: 0; }

/* ---------- cards de investimento ---------- */
/* a aba tem a largura do texto; o valor embaixo ocupa a coluna toda */
.elementor .elementor-widget.al-aba {
  width: auto;
  align-self: flex-start;
}

/* ---------- faixa amarela da pavimentação ---------- */
.al-pav .al-skew .elementor-heading-title { transform-origin: center; }

/* ---------- timeline da trajetória ---------- */
.elementor .e-con.al-etapa {
  position: relative;
  border-left: 2px solid var(--al-linha);
}
.elementor .e-con.al-etapa::before {
  content: ""; position: absolute; left: -8px; top: 5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--al-amarelo); border: 3px solid var(--al-navy);
  box-sizing: border-box; z-index: 2;
}
.elementor .e-con.al-etapa:last-child { border-left-color: transparent; }

/* ---------- cards de entrega: topo amarelo sobre borda cinza ----------
   O Elementor tem uma cor de borda só; o modelo usa duas. */
.elementor .e-con.al-card { border-top: 6px solid var(--al-amarelo); }

/* ---------- leis: lombada colorida ---------- */
.elementor .e-con.al-lei { border-left: 6px solid var(--al-navy); }
.elementor .e-con.al-lei-amarela { border-left-color: var(--al-amarelo); }

/* ---------- passos do "Como votar": número em círculo ---------- */
.elementor .elementor-widget.al-passo-num {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.al-passo-num .elementor-heading-title { line-height: 1; }
.al-passo-txt p { margin: 0; }

/* ---------- bloco do número 55125 ---------- */
.al-numero-bloco { text-align: center; }

/* ---------- listas de links (widget icon-list) ---------- */
.al-links .elementor-icon-list-icon { display: none; }
.al-links .elementor-icon-list-item > a,
.al-links .elementor-icon-list-item { text-decoration: none; }
.al-links .elementor-icon-list-item > a:hover .elementor-icon-list-text { color: var(--al-amarelo); }

/* ---------- rodapé ---------- */
.al-rod-txt p, .al-legal p, .al-pago-por p, .al-credito p,
.al-card-txt p, .al-lei-txt p, .al-etapa-txt p, .al-pendente-txt p { margin: 0; }
.al-credito a { color: #A8B8D4; text-decoration: none; border-bottom: 1px solid rgba(168, 184, 212, .4); }
.al-credito a:hover { color: var(--al-amarelo); border-bottom-color: var(--al-amarelo); }

/* ---------- menu (widget Nav Menu do UAE) ---------- */
.al-menu .hfe-nav-menu__layout-horizontal .menu-item a.hfe-menu-item { font-weight: 700; }

/* ---------- reduzir movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}