/**
 * JMAG Labs — identidade visual.
 *
 * ADIÇÃO ao `main.css` do template, nunca substituição: as regras abaixo
 * redefinem as VARIÁVEIS que o Landify já usa (`--accent-color`,
 * `--background-color`...) e acrescentam os componentes próprios. Reescrever as
 * regras do template quebraria o `main.js` dele em silêncio — o menu mobile e o
 * scrollspy dependem das classes originais.
 *
 * DIREÇÃO: laboratório de engenharia. Superfície escura de sala de servidor,
 * um azul-ciano técnico como acento, tipografia geométrica e MUITO respiro.
 * Nada de Matrix, circuito genérico, robô ou cérebro de IA — os produtos reais
 * são o elemento visual, e por isso os cards de produto ganham mais peso
 * gráfico que qualquer ilustração decorativa.
 */

/*--------------------------------------------------------------
# Paleta e tipografia
--------------------------------------------------------------*/
:root {
  --default-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-font: "Sora", system-ui, sans-serif;
  --nav-font: "Inter", system-ui, sans-serif;
}

:root {
  /* Fundo quase preto com viés azul: superfície de instrumento, não cinza. */
  --background-color: #080b12;
  --default-color: #a7b0c4;
  --heading-color: #f2f5fa;
  --accent-color: #3d7fff;
  --surface-color: #10141f;
  --contrast-color: #ffffff;

  /* Extensões próprias */
  --jm-accent-2: #22d3ee;      /* ciano de apoio, usado com parcimônia */
  --jm-border: rgba(255, 255, 255, .09);
  --jm-border-forte: rgba(255, 255, 255, .16);
  --jm-surface-2: #161c2b;
  --jm-muted: #6f7c95;
  --jm-radius: 14px;
  --jm-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

:root {
  --nav-color: #c2cadb;
  --nav-hover-color: #ffffff;
  --nav-mobile-background-color: #10141f;
  --nav-dropdown-background-color: #10141f;
  --nav-dropdown-color: #c2cadb;
  --nav-dropdown-hover-color: #ffffff;
}

/*
 * O template alterna seções por `.light-background` / `.dark-background`.
 * Num site escuro, "light" não pode virar branco — vira a superfície elevada.
 * Sem isso, uma seção do template ficaria branca no meio do site escuro.
 */
.light-background {
  --background-color: #0d111a;
  --surface-color: #151b28;
}

.dark-background {
  --background-color: #05070c;
  --default-color: #a7b0c4;
  --heading-color: #ffffff;
  --surface-color: #10141f;
  --contrast-color: #ffffff;
}

body {
  -webkit-font-smoothing: antialiased;
}

/*
 * ⚠️ NÃO acrescente `overflow-x: hidden/clip` aqui.
 *
 * Foi posto uma vez para "corrigir" um estouro horizontal em 320px. O estouro
 * NÃO existia: capturas feitas com `--window-size=320` no Chrome/Windows
 * renderizam a ~485px (largura mínima de janela) e recortam em 320, o que
 * PARECE conteúdo cortado à direita. Medido com viewport real emulada
 * (`Emulation.setDeviceMetricsOverride`), `scrollWidth` é igual à viewport em
 * todas as larguras de 320 a 1920.
 *
 * Esconder overflow na raiz é remédio que mascara sintoma: se um dia um
 * elemento realmente estourar, ninguém vai perceber. Meça primeiro com
 * `dev/diagnosticar_overflow.py`.
 */

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -.02em;
  font-weight: 700;
}

/*--------------------------------------------------------------
# Acessibilidade
--------------------------------------------------------------*/

/* Foco visível em TUDO que recebe teclado. O template não garante isso, e sem
   contorno a navegação por Tab fica invisível num fundo escuro. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--jm-accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Link de pular para o conteúdo: fora da tela até receber foco. */
.jm-pular {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--accent-color);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}

.jm-pular:focus {
  left: 0;
  color: #fff;
}

/* Quem pediu menos movimento no sistema recebe menos movimento. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/*--------------------------------------------------------------
# Marca tipográfica
--------------------------------------------------------------*/
.jm-logo {
  font-family: var(--heading-font);
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--heading-color);
  display: inline-flex;
  align-items: baseline;
  gap: .3rem;
}

.jm-logo strong {
  font-weight: 700;
}

/* "Labs" em peso leve e cor de apoio: a hierarquia da marca é JMAG primeiro. */
.jm-logo span {
  font-weight: 400;
  color: var(--jm-muted);
  letter-spacing: .02em;
}

.footer .jm-logo,
.header .jm-logo {
  margin: 0;
}

/*--------------------------------------------------------------
# Cabeçalho
--------------------------------------------------------------*/
/*
 * ⚠️ NÃO ponha `backdrop-filter` (nem `transform`/`filter`) no `.header`.
 *
 * Qualquer uma dessas propriedades cria um CONTAINING BLOCK para descendentes
 * `position: fixed`. O painel do menu mobile do template é
 * `.navmenu { position:fixed; inset:0 }` DENTRO do header — com o header
 * virando containing block, ele passa a se prender aos 64px do cabeçalho em
 * vez da viewport, e o `overflow:hidden` do próprio nav corta o resto.
 *
 * SINTOMA MEDIDO: painel de 350x20px, links invisíveis, X de fechar
 * sobreposto ao botão. O menu "abria" (a classe entrava no body) e não
 * aparecia nada — sem erro em lugar nenhum.
 *
 * O efeito de vidro é aplicado num PSEUDO-ELEMENTO, que não afeta o
 * posicionamento dos filhos.
 */
.header {
  --background-color: transparent;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  /*
   * ⚠️ `z-index: -1` NÃO serve aqui. Ele joga o pseudo-elemento atrás do
   * contexto de empilhamento do próprio header e, na prática, atrás do
   * `<main>` — MEDIDO: o fundo sumia e a headline do hero passava por cima do
   * cabeçalho. `z-index: 0` mantém a camada dentro do header, atrás dos
   * filhos (que são posicionados/flex e ficam acima), que é o efeito desejado.
   */
  z-index: 0;
  background: rgba(8, 11, 18, .82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  transition: background-color .3s;
}

/* Os filhos precisam ficar ACIMA da camada de vidro. */
.header > .container {
  position: relative;
  z-index: 1;
}

/*
 * ⚠️ O template PINTA O HEADER DE BRANCO ao rolar.
 *
 * `main.css` traz `.scrolled .header { --background-color: #ffffff }` e
 * `.index-page.scrolled .header { ... #ffffff }` — o Landify nasceu para site
 * claro. Num site escuro isso produzia uma barra branca com a marca "JMAG"
 * branca em cima: contraste MEDIDO de 1.09:1 (texto invisível).
 *
 * As duas regras precisam ser anuladas, com a mesma especificidade de cada uma
 * — sobrescrever só `.scrolled .header` deixaria a home (que carrega
 * `.index-page`) branca do mesmo jeito.
 */
.scrolled .header,
.index-page.scrolled .header {
  --background-color: transparent;
  background-color: transparent;
}

/* Rolando, o vidro fica mais OPACO (não mais claro): é o que garante
   contraste do texto sobre o conteúdo que passa por baixo. */
.scrolled .header::before {
  background: rgba(8, 11, 18, .94);
}

/* A sombra clara do template não serve num fundo escuro: aqui a separação é
   uma linha, não um halo. */
.scrolled .header {
  box-shadow: none;
  border-bottom-color: var(--jm-border);
}

.btn-getstarted {
  background: var(--accent-color);
  color: #fff;
  padding: .6rem 1.15rem;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .2s, box-shadow .2s, background-color .2s;
}

.btn-getstarted:hover {
  color: #fff;
  background: #5a93ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(61, 127, 255, .32);
}

/*--------------------------------------------------------------
# Componentes próprios
--------------------------------------------------------------*/

/* Etiqueta pequena acima dos títulos. */
.jm-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--jm-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--jm-accent-2);
  border: 1px solid var(--jm-border-forte);
  border-radius: 999px;
  padding: .38rem .85rem;
  background: rgba(34, 211, 238, .06);
}

.jm-kicker i {
  font-size: .8rem;
}

/* Título de seção. */
.jm-titulo {
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  margin: 1rem 0 .75rem;
}

.jm-sub {
  font-size: 1.05rem;
  color: var(--jm-muted);
  max-width: 62ch;
}

.jm-secao {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

/*
 * Seção de texto centralizado (o bloco "Produtos próprios").
 *
 * ⚠️ MEDIDO: com o padding padrão, esse bloco — que tem só etiqueta, título e
 * um parágrafo — abria quase uma tela inteira de vazio abaixo do texto em
 * 1440px. Espaço generoso é respiro; espaço demais lê como conteúdo que
 * faltou carregar. Aqui o padding é menor e proporcional ao que a seção tem
 * de fato para mostrar.
 */
.jm-secao-compacta {
  padding: clamp(2.75rem, 5.5vw, 4.25rem) 0;
}

/* Cartão base. Um só componente para produto, serviço, etapa e diferencial —
   a variação é de conteúdo, não de caixa. */
.jm-card {
  background: var(--surface-color);
  border: 1px solid var(--jm-border);
  border-radius: var(--jm-radius);
  padding: 1.6rem;
  height: 100%;
  transition: border-color .25s, transform .25s, background-color .25s;
}

.jm-card:hover {
  border-color: var(--jm-border-forte);
  transform: translateY(-3px);
}

.jm-card h3 {
  font-size: 1.15rem;
  margin: 0 0 .5rem;
}

.jm-card p {
  margin: 0;
  font-size: .95rem;
  color: var(--jm-muted);
}

/* Ícone do cartão: quadrado com cantos suaves, nunca círculo colorido cheio. */
.jm-ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(61, 127, 255, .12);
  border: 1px solid rgba(61, 127, 255, .25);
  color: #7ea8ff;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.jm-hero {
  position: relative;
  padding: clamp(7rem, 14vw, 10rem) 0 clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}

/*
 * Fundo do hero: um brilho radial suave e uma malha fina. É desenhado em CSS
 * (sem imagem, sem canvas, sem biblioteca) — custa zero requisição e não
 * compete com o texto. `pointer-events: none` para não capturar cliques.
 */
.jm-hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 70vh;
  background:
    radial-gradient(45% 55% at 22% 30%, rgba(61, 127, 255, .20), transparent 70%),
    radial-gradient(35% 45% at 78% 18%, rgba(34, 211, 238, .13), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.jm-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--jm-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--jm-border) 1px, transparent 1px);
  background-size: 64px 64px;
  /* A malha some nas bordas: grade que vai até a margem parece papel milimetrado. */
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 40%, transparent 100%);
  opacity: .6;
  pointer-events: none;
  z-index: 0;
}

.jm-hero > .container {
  position: relative;
  z-index: 1;
}

.jm-hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.75rem);
  line-height: 1.08;
  margin: 1.25rem 0 1.25rem;
}

/* O acento do título: gradiente só na palavra que carrega a promessa. */
.jm-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, #6ea2ff, var(--jm-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.jm-hero p.lead {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--jm-muted);
  max-width: 60ch;
  margin-bottom: 2rem;
}

.jm-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}

.jm-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  border-radius: 11px;
  font-weight: 600;
  font-size: .97rem;
  border: 1px solid transparent;
  transition: transform .2s, box-shadow .2s, background-color .2s, border-color .2s;
}

.jm-btn-primario {
  background: var(--accent-color);
  color: #fff;
}

.jm-btn-primario:hover {
  background: #5a93ff;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(61, 127, 255, .35);
}

.jm-btn-fantasma {
  border-color: var(--jm-border-forte);
  color: var(--heading-color);
  background: rgba(255, 255, 255, .02);
}

.jm-btn-fantasma:hover {
  border-color: var(--jm-accent-2);
  color: #fff;
  transform: translateY(-2px);
}

/*--------------------------------------------------------------
# Vitrine de produtos — o elemento visual central do site
#
# A ideia é "produtos saindo do mesmo laboratório": cada cartão é uma janela de
# aplicação com barra de título, e não uma foto de banco de imagens.
--------------------------------------------------------------*/
.jm-janela {
  display: block;
  background: var(--jm-surface-2);
  border: 1px solid var(--jm-border);
  border-radius: var(--jm-radius);
  overflow: hidden;
  height: 100%;
  transition: transform .28s, border-color .28s, box-shadow .28s;
}

.jm-janela:hover {
  transform: translateY(-4px);
  border-color: var(--jm-border-forte);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}

/* Barra de título com os três pontos: sinal universal de "isto é software". */
.jm-janela-barra {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem .9rem;
  background: rgba(255, 255, 255, .03);
  border-bottom: 1px solid var(--jm-border);
}

.jm-janela-barra i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--jm-border-forte);
  display: block;
}

.jm-janela-url {
  margin-left: .5rem;
  font-family: var(--jm-mono);
  font-size: .72rem;
  color: var(--jm-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jm-janela-corpo {
  padding: 1.4rem;
}

.jm-janela-corpo h3 {
  font-size: 1.2rem;
  margin: .65rem 0 .5rem;
  color: var(--heading-color);
}

.jm-janela-corpo p {
  color: var(--jm-muted);
  font-size: .93rem;
  margin: 0;
}

/* Imagem do produto: proporção fixa para a grade não dançar quando um
   screenshot tiver altura diferente. */
.jm-janela-img {
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
  background: #0b0f18;
  display: block;
}

/* Sem screenshot cadastrado, a moldura mostra a INICIAL do produto sobre a
   malha — nunca uma foto genérica de programador. */
.jm-janela-vazia {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(61, 127, 255, .16), transparent 70%),
    linear-gradient(var(--jm-border) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--jm-border) 1px, transparent 1px) 0 0 / 28px 28px,
    #0b0f18;
}

.jm-janela-vazia span {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 2.1rem;
  color: rgba(255, 255, 255, .30);
  letter-spacing: -.03em;
}

/* Selo de categoria. */
.jm-selo {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8fb4ff;
  background: rgba(61, 127, 255, .10);
  border: 1px solid rgba(61, 127, 255, .22);
  border-radius: 999px;
  padding: .22rem .6rem;
}

.jm-selo-proprio {
  color: #5eead4;
  background: rgba(45, 212, 191, .10);
  border-color: rgba(45, 212, 191, .24);
}

/*--------------------------------------------------------------
# Processo numerado
--------------------------------------------------------------*/
.jm-passo {
  position: relative;
  padding-left: 3.6rem;
}

.jm-passo-num {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--jm-mono);
  font-size: .95rem;
  font-weight: 600;
  color: var(--jm-accent-2);
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--jm-border-forte);
  border-radius: 10px;
  background: var(--surface-color);
}

/*--------------------------------------------------------------
# Formulário
--------------------------------------------------------------*/
.jm-form .form-control,
.jm-form .form-select {
  background: var(--jm-surface-2);
  border: 1px solid var(--jm-border);
  color: var(--heading-color);
  border-radius: 10px;
  padding: .8rem .95rem;
}

.jm-form .form-control:focus,
.jm-form .form-select:focus {
  background: var(--jm-surface-2);
  border-color: var(--accent-color);
  color: var(--heading-color);
  box-shadow: 0 0 0 3px rgba(61, 127, 255, .18);
}

.jm-form .form-control::placeholder {
  color: #55617a;
}

.jm-form label {
  font-size: .88rem;
  font-weight: 500;
  color: var(--heading-color);
  margin-bottom: .4rem;
}

.jm-form .form-text {
  color: var(--jm-muted);
  font-size: .82rem;
}

/* Campo-armadilha do anti-spam: some para o humano SEM `display:none`, que
   alguns bots detectam. Fica fora da tela e é retirado da ordem de tabulação
   no HTML (tabindex="-1"). */
.jm-hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/*--------------------------------------------------------------
# Avisos
--------------------------------------------------------------*/
.jm-aviso {
  border-radius: 10px;
  padding: .9rem 1.1rem;
  border: 1px solid var(--jm-border-forte);
  border-left-width: 3px;
  background: var(--surface-color);
  color: var(--heading-color);
  font-size: .93rem;
}

/* Vermelho SÓ para falha real. */
.jm-aviso-erro {
  border-left-color: #f87171;
}

.jm-aviso-ok {
  border-left-color: #34d399;
}

/*--------------------------------------------------------------
# FAQ
--------------------------------------------------------------*/
.jm-faq {
  border: 1px solid var(--jm-border);
  border-radius: var(--jm-radius);
  background: var(--surface-color);
  margin-bottom: .75rem;
  overflow: hidden;
}

.jm-faq summary {
  cursor: pointer;
  padding: 1.15rem 1.35rem;
  font-weight: 600;
  color: var(--heading-color);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.jm-faq summary::-webkit-details-marker {
  display: none;
}

.jm-faq summary::after {
  content: "\F282"; /* bi-chevron-down */
  font-family: "bootstrap-icons";
  font-size: .85rem;
  color: var(--jm-muted);
  transition: transform .25s;
}

.jm-faq[open] summary::after {
  transform: rotate(180deg);
}

.jm-faq p {
  padding: 0 1.35rem 1.25rem;
  margin: 0;
  color: var(--jm-muted);
}

/*--------------------------------------------------------------
# Conteúdo longo (case, política de privacidade)
--------------------------------------------------------------*/
.jm-prosa {
  max-width: 72ch;
}

.jm-prosa h2 {
  font-size: 1.45rem;
  margin: 2.4rem 0 .9rem;
}

.jm-prosa h3 {
  font-size: 1.15rem;
  margin: 1.9rem 0 .7rem;
}

.jm-prosa p,
.jm-prosa li {
  color: var(--default-color);
  line-height: 1.8;
}

.jm-prosa ul {
  padding-left: 1.15rem;
}

.jm-prosa li {
  margin-bottom: .5rem;
}

/*--------------------------------------------------------------
# Botão flutuante do WhatsApp
--------------------------------------------------------------*/
.jm-zap {
  position: fixed;
  right: 18px;
  bottom: 82px;
  z-index: 995;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #22c55e;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  transition: transform .2s;
}

.jm-zap:hover {
  color: #fff;
  transform: scale(1.06);
}

/*--------------------------------------------------------------
# Ajustes de responsividade
#
# Testado com viewport REAL emulada (não `--window-size`, que tem mínimo de
# ~485px no Chrome/Windows e produz recorte enganoso) em 320, 375, 390, 430,
# 768, 1024, 1366, 1440 e 1920.
--------------------------------------------------------------*/

/*
 * ⚠️ O botão do cabeçalho encostava no logotipo abaixo de ~420px: os três
 * elementos (marca, botão, hambúrguer) disputam a mesma linha e o do meio é o
 * que cede. Em tela estreita ele encolhe; em tela MUITO estreita (<360px) sai
 * de cena — o mesmo caminho continua no menu, e um botão espremido contra a
 * marca comunica desleixo logo no primeiro contato.
 */
@media (max-width: 460px) {
  .btn-getstarted {
    margin-left: .5rem;
    padding: .5rem .8rem;
    font-size: .8rem;
  }

  .jm-logo {
    font-size: 1.2rem;
  }
}

@media (max-width: 359px) {
  .btn-getstarted {
    display: none;
  }
}

@media (max-width: 575px) {
  .jm-hero {
    padding-top: 6.5rem;
  }

  /* Em 320px dois botões lado a lado não cabem: viram bloco e ocupam a largura. */
  .jm-acoes .jm-btn {
    width: 100%;
    justify-content: center;
  }

  .jm-card,
  .jm-janela-corpo {
    padding: 1.25rem;
  }

  .jm-passo {
    padding-left: 3.1rem;
  }
}

/* Impressão: sem fundo escuro (gasta tinta e sai ilegível). */
@media print {
  .header,
  .footer,
  .jm-zap,
  .scroll-top,
  .jm-acoes {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/*--------------------------------------------------------------
# Campo de telefone internacional (intl-tel-input)
#
# O widget vem com tema claro cravado (fundo branco, texto escuro). Aqui ele
# é ajustado ao fundo escuro do site — sem tocar no CSS da biblioteca, que
# deve continuar substituível por uma versão nova.
--------------------------------------------------------------*/
.iti {
  width: 100%;
}

.iti__tel-input,
.iti input[type=tel] {
  width: 100%;
}

/* O botão do país fica DENTRO da moldura do campo. */
.iti--separate-dial-code .iti__selected-country {
  background: rgba(255, 255, 255, .04);
  border-radius: .5rem 0 0 .5rem;
}

.iti--separate-dial-code .iti__selected-dial-code {
  color: var(--jm-texto);
}

.iti__arrow {
  border-top-color: var(--jm-muted);
}

/* A lista suspensa: fundo escuro e item destacado legível. */
.iti__country-list {
  background: var(--jm-superficie, #10141f);
  border: 1px solid var(--jm-border);
  border-radius: .6rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  color: var(--jm-texto);
}

.iti__country.iti__highlight {
  background: rgba(59, 130, 246, .18);
}

.iti__dial-code {
  color: var(--jm-muted);
}

.iti__divider {
  border-bottom-color: var(--jm-border);
}