/* ===== HERO - HOME V3.1 (ajustada) ======================================= */
.hero-splash{
  --hero-grad-1: color-mix(in srgb, var(--color_brand_primary) 12%, #fff 88%);
  --hero-grad-2: #f7f9ff;
  --hero-text:   var(--color_text_heading);
  background:
    radial-gradient(1200px 500px at 0% -10%, var(--hero-grad-1) 0%, transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--hero-grad-2) 100%);
  position: relative;
}

/* orbes + grade */
.hero-orb{ position:absolute; border-radius:50%; filter: blur(30px); opacity:.45; z-index:0; pointer-events:none; animation: orbFloat 9s ease-in-out infinite alternate; }
.hero-orb.orb-1{ width:380px; height:380px; right:-120px; top:-80px; background: radial-gradient(closest-side, #cfe0ff, transparent); }
.hero-orb.orb-2{ width:260px; height:260px; left:-80px; bottom:-60px; background: radial-gradient(closest-side, #ffe6b0, transparent); animation-duration: 11s; }
@keyframes orbFloat { to { transform: translateY(16px) translateX(10px) scale(1.02);} }
.hero-grid{ position:absolute; inset:0; z-index:0; pointer-events:none; background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,.05) 1px, transparent 0); background-size: 22px 22px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,0)); }

/* Tipografia */
.hero-title{ color: var(--hero-text); font-weight: 800; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); line-height: 1.08; letter-spacing: -0.2px; text-wrap: balance; }
.hero-sub{ color: var(--color_text_body); max-width: 48ch; }

/* Chips */
.feature-chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .65rem; border-radius: .65rem; font: 600 .82rem/1 Cabin, sans-serif; color: var(--color_brand_primary); background: rgba(110,137,197,.12); border: 1px solid color-mix(in srgb, var(--color_brand_primary) 25%, #fff); }

/* Form hero */
.hero-form .form-control{ border:1px solid var(--color_border_default); padding:.8rem .9rem; font-size:1rem; }
.hero-input{ border-radius: .75rem; overflow:hidden; background:#fff; }
.hero-form .btn{ border-radius: .65rem; }

/* Mock do produto */
.product-mockup{
  position:relative; z-index:1;
  width: 100%; border-radius: 1rem;
  background: var(--color_surface_card_bg);
  border: 1px solid var(--color_border_default);
  box-shadow: 0 12px 35px -10px rgba(41,53,92,.25), 0 2px 10px rgba(0,0,0,.05);
  transform: translateY(0);
  animation: mockFloat 7s ease-in-out infinite alternate;
}
@keyframes mockFloat { to { transform: translateY(-6px); } }

.mock-head{ padding:.6rem .85rem; border-bottom:1px solid var(--color_border_default); background: linear-gradient(180deg, #f7f9ff 0%, #eef3ff 100%); border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;opacity:.9;}
.dot-red{background:#ff5f56}.dot-yellow{background:#ffbd2e}.dot-green{background:#27c93f}

/* Corpo */
.mock-body{ padding: .9rem .9rem 1.15rem; }

/* Toolbar (menus + IA ON) - mesma linha, sem ícone de busca */
.mock-toolbar{
  display:flex; align-items:center; gap:.75rem; padding:.55rem .65rem;
  border:1px dashed var(--color_border_default); border-radius:.7rem; background:#fbfcff; margin-bottom:.7rem;
}
.mock-mini-tabs{ display:flex; align-items:center; gap:.25rem; }
.mini-tab{
  border:0; background:transparent; cursor:default;
  font:600 .84rem/1 Cabin,sans-serif; color:#7b88a6; padding:.28rem .5rem; border-radius:.5rem;
}
.mini-tab.active{ background:#e6edff; color:#2f3e66; }
.ai-badge{ margin-left:auto; background:#fff7e8; color:#8a5a00; border:1px solid #ffdca8; font-weight:700; padding:.25rem .5rem; border-radius: .5rem; font-size:.72rem; }

/* Cards */
.mock-card{ border:1px solid var(--color_border_default); border-radius:.7rem; padding:.75rem .8rem; background:#fff; margin-top:.65rem; box-shadow: 0 3px 10px rgba(0,0,0,.03); }
.mock-card .agency{ color: var(--color_brand_primary); }
.mock-card .object{ color: var(--color_text_body); line-height:1.35; }
.mock-card mark{ background: var(--color_highlight_keyword); padding: .05rem .22rem; border-radius: .2rem; }
.badge.bg-outline{ --_c: color-mix(in srgb, var(--color_brand_primary) 55%, #0000); color: var(--color_brand_primary); background:#f5f7ff; border:1px solid var(--_c); font-weight:600; }

/* Selo */
.example-stamp{ position:absolute; right:.75rem; bottom:.6rem; font:700 .72rem/1 Cabin,sans-serif; color:#2f3e66; padding:.25rem .5rem; border-radius:.4rem; background:rgba(255,255,255,.85); border:1px solid var(--color_border_default); box-shadow: 0 2px 8px rgba(0,0,0,.05); }

/* Pills flutuantes - agora relativas ao mock */
.mock-wrap{ position:relative; }
.floating-pill{
  position:absolute; z-index:2; display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .7rem; border-radius: 999px;
  font:700 .82rem/1 Cabin,sans-serif;
  color:#2f3e66; backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  border:1px solid rgba(255,255,255,.8); box-shadow: 0 6px 20px rgba(41,53,92,.18);
  animation: pillFloat 8s ease-in-out infinite;
}
.pill-1{ top: 10px; right: 12px; animation-delay: .2s; }
.pill-2{ bottom: 12px; right: 14px; animation-delay: 1s; }
.pill-3{ bottom: 12px; left: 14px; animation-delay: .6s; } /* "Baixar edital" dentro do quadro */
@keyframes pillFloat { 50%{ transform: translateY(-6px);} }

/* Responsivo */
@media (max-width: 991.98px){
  .floating-pill{ display:none; }
  .product-mockup{ margin-top:.5rem; }
}
@media (max-width: 575.98px){
  .hero-form .input-group-lg .form-control{ padding:.7rem .85rem; }
  .hero-form .btn{ padding:.6rem .85rem; }
}

/* Desce um pouco o chip "Baixar edital" e evita bloqueio de clique */
.mock-wrap{ padding-bottom: 22px; }             /* cria respiro sob o mock */
.floating-pill.pill-3{ bottom: 4px; }

/* Se a legenda abaixo estiver perto demais, pode dar um respiro extra */
.mock-caption{ margin-top: 18px; }

/* === 1) Títulos das novas seções no padrão (linha decorativa) === */
#para-quem > h2,
#planos > h2{
  position: relative;
  font-weight: 600;
  color: var(--color_text_heading);
}
#para-quem > h2::after,
#planos > h2::after{
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: var(--color_brand_primary);
  border-radius: 2px;
  margin-top: .35rem;
  opacity: .9;
}

/* === 2) Tiles mais atraentes (visual consistente com o site) === */
.tile-card{
  border:1px solid var(--color_border_default);
  border-radius:.8rem;
  background:linear-gradient(180deg,#fff 0%, #fafbff 100%);
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tile-card:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 30px -10px rgba(41,53,92,.25);
}
.tile-icon{
  width:36px; height:36px; border-radius:.6rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f0f4ff; color: var(--color_brand_primary);
  font-size:1.1rem;
}

/* === 3) Planos com destaque suave e "mais popular" === */
.plan-card{
  border:1px solid var(--color_border_default);
  border-radius:.9rem;
  background:linear-gradient(180deg,#fff 0%, #fbfcff 100%);
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.plan-card:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 30px -10px rgba(41,53,92,.25);
}
.plan-title{ font-weight:700; color:var(--color_text_heading); }
.plan-note{ color:var(--color_text_muted); }
.plan-badge{
  display:inline-block;
  font:700 .72rem/1 Cabin,sans-serif;
  color:#2f3e66;
  background:#fff7e8;
  border:1px solid #ffdca8;
  padding:.25rem .5rem;
  border-radius:.4rem;
}
.plan-card.is-popular{
  border-color: color-mix(in srgb, var(--color_brand_primary) 45%, #fff);
  box-shadow:0 10px 28px -10px rgba(41,53,92,.28), 0 0 0 3px rgba(110,137,197,.08);
}
.plan-card .btn{
  --bs-btn-padding-y:.4rem;
  --bs-btn-padding-x:1rem;
}

/* --- Títulos padronizados (linha decorativa) --- */
/* (o seletor anterior usava > h2 e não pegava #planos, pois o h2 não é filho direto) */
#para-quem h2,
#planos h2{
  position: relative;
  font-family: inherit;
  font-weight: 700 !important;
  color: var(--color_text_heading);
  line-height: 1.2;
}
#para-quem h2::after,
#planos h2::after{
  content:"";
  display:block;
  width:44px; height:3px;
  background: var(--color_brand_primary);
  border-radius:2px;
  margin-top:.35rem;
  opacity:.9;
}

/* --- Selo "Exemplo de interface" sempre visível --- */
.example-stamp{
  position:absolute;
  top:.65rem; left:.65rem;  /* sai do canto inferior e evita sobrepor os pills */
  right:auto; bottom:auto;
  z-index:3;                /* acima dos cards e do fundo */
}
@media (max-width: 575.98px){
  .example-stamp{ top:.5rem; left:.5rem; transform: scale(.95); }
}

/* Realocar o selo "Exemplo de interface" sem colidir com os pills */
.product-mockup .example-stamp{
  top: 3.25rem;          /* abaixo da barra (dots + "Painel") e da toolbar */
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  z-index: 3;
}

/* Ajuste fino em telas pequenas */
@media (max-width: 575.98px){
  .product-mockup .example-stamp{ top: 2.7rem; }
}

/* Legenda abaixo do mock (fora da "janelinha") */
.mock-caption{
  color: var(--color_text_muted);
  font-weight: 600;
  letter-spacing: .2px;
}

/* (Opcional) Esconde qualquer regra antiga do selo interno, se ainda existir em algum build */
.product-mockup .example-stamp{ display: none !important; }

/* ==== Modo ilustração: LATERAIS MAIS SUAVES ==== */
.product-mockup.is-illustration::before,
.product-mockup.is-illustration::after{
  content:"";
  position:absolute; top:0; bottom:0;
  width:18%;                      /* antes: 26%  -> ocupa menos área */
  pointer-events:none;
  backdrop-filter: blur(3.5px) saturate(.95);  /* antes: blur(6px) */
  -webkit-backdrop-filter: blur(3.5px) saturate(.95);
}
.product-mockup.is-illustration::before{ left:0; }
.product-mockup.is-illustration::after { right:0; }

/* Transição do blur para o centro mais suave e curta */
@supports (mask-image: linear-gradient(to right, #000, transparent)){
  .product-mockup.is-illustration::before{
    mask-image: linear-gradient(to right,
      rgba(0,0,0,.75) 0,          /* opaco só no cantinho */
      rgba(0,0,0,.35) 38%,        /* já começa a aliviar antes */
      rgba(0,0,0,0) 100%);        /* centro limpo */
  }
  .product-mockup.is-illustration::after{
    mask-image: linear-gradient(to left,
      rgba(0,0,0,.75) 0,
      rgba(0,0,0,.35) 38%,
      rgba(0,0,0,0) 100%);
  }
}

/* Fallback de vinheta (sem backdrop-filter) - menos "lavado" */
.product-mockup.is-illustration .dream-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 50%,
      rgba(255,255,255,0) 62%,    /* antes: 55%  -> centro maior nítido */
      rgba(245,248,255,.70) 100%  /* antes: .95 -> borda mais leve */
  );
}

/* Menos ênfase na "agência" dentro do mock (se ainda existir) */
.mock-card .agency{
  font-weight:600;
  font-size:.85rem;
  color: var(--color_text_muted);
}

/* Linha-meta discreta no topo de cada card (sinaliza mock sem poluir) */
.mock-card .meta-soft{
  display:inline-block;
  font: 600 .75rem/1 Cabin, sans-serif;
  color: var(--color_text_muted);
  opacity:.9;
}

/* ===== Seletor de países (rodapé) ===== */
#global-sites h2{
  position:relative; color:var(--color_text_heading); font-weight:600;
}
#global-sites h2::after{
  content:""; display:block; width:44px; height:3px; border-radius:2px;
  background:var(--color_brand_primary); margin-top:.35rem; opacity:.9;
}

.country-list{ margin-top:.5rem; }
.country-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem .7rem; border-radius:.65rem; text-decoration:none;
  background:linear-gradient(180deg,#fff 0%, #fafbff 100%);
  color:var(--color_brand_primary);
  border:1px solid var(--color_border_default);
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  font:600 .92rem/1 Cabin, sans-serif;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.country-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px -8px rgba(41,53,92,.20);
  border-color: color-mix(in srgb, var(--color_brand_primary) 35%, #fff);
}
.country-chip:focus-visible{
  outline:3px solid color-mix(in srgb, var(--color_brand_primary) 25%, #fff);
  outline-offset:2px;
}
.country-chip span{ white-space:nowrap; }

/* "Bandeira" textual com código do país */
.flag-cc{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%;
  font-weight:700; font-size:.72rem;
  background:#eef3ff; color:var(--color_brand_primary);
  border:1px solid var(--color_border_default);
}

.global-head small{ color:var(--color_text_muted); }
/* Título padronizado (igual aos demais h2) */
#global-sites h2{
  position:relative; color:var(--color_text_heading); font-weight:600;
}
#global-sites h2::after{
  content:""; display:block; width:44px; height:3px; border-radius:2px;
  background:var(--color_brand_primary); margin-top:.35rem; opacity:.9;
}

/* Chips */
.country-list{ margin-top:.5rem; }
.country-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem .7rem; border-radius:.65rem; text-decoration:none;
  background:linear-gradient(180deg,#fff 0%, #fafbff 100%);
  color:var(--color_brand_primary);
  border:1px solid var(--color_border_default);
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  font:600 .92rem/1 Cabin, sans-serif;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.country-chip:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px -8px rgba(41,53,92,.20);
  border-color: color-mix(in srgb, var(--color_brand_primary) 35%, #fff);
}
.country-chip span{ white-space:nowrap; }

/* Emoji de bandeira (tamanho/alinhamento) */
.flag-emoji{
  font-size:1rem; line-height:1;
  display:inline-block; vertical-align:-2px;
}

/* Fallback textual (2 letras) - fica escondido quando há emoji */
.flag-cc{ display:none; font-size:.72rem; font-weight:700; color:var(--color_brand_primary); }

/* Se o navegador não suportar emoji*