/* Em Dia — site institucional.
   Verde da marca sobre fundo quase branco, com o produto aparecendo em molduras
   de celular e de navegador. */

:root {
  --verde: #10b981;
  --verde-escuro: #059669;
  --verde-fundo: #ecfdf5;
  --tinta: #0b1220;
  --tinta-media: #475569;
  --tinta-fraca: #94a3b8;
  --fundo: #ffffff;
  --fundo-suave: #f7faf9;
  --borda: #e6ebf0;
  --escuro: #0b1220;
  --raio: 18px;
  --largura: 1180px;
  --sombra: 0 30px 70px -40px rgba(11, 18, 32, 0.45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--tinta);
  background: var(--fundo);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, .preco, .marca {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

.container {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 24px;
}

.estreito { max-width: 820px; }
.centro { text-align: center; }

/* ---------- topo ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--borda);
}

.topo-conteudo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -0.03em;
}

.marca img { border-radius: 10px; }

.menu {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 0.93rem;
  font-weight: 500;
}

.menu a { color: var(--tinta-media); transition: color 0.15s; }
.menu a:hover { color: var(--tinta); }
.menu .botao { color: #fff; }

.menu-botao {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

.menu-botao span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--tinta);
  border-radius: 2px;
}

/* ---------- botões ---------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--verde);
  color: #fff;
  font-weight: 600;
  font-size: 0.99rem;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 14px 30px -16px rgba(16, 185, 129, 0.9);
}

.botao:hover {
  background: var(--verde-escuro);
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -16px rgba(16, 185, 129, 0.95);
}

.botao svg { width: 19px; height: 19px; fill: currentColor; }
.botao-pequeno { padding: 9px 18px; font-size: 0.9rem; box-shadow: none; }
.botao-neutro { background: var(--tinta); box-shadow: 0 14px 30px -18px rgba(11, 18, 32, 0.9); }
.botao-neutro:hover { background: #1e293b; }

/* ---------- herói ---------- */

.heroi {
  position: relative;
  overflow: hidden;
  padding: 88px 0 96px;
  background:
    radial-gradient(1000px 460px at 12% -20%, #d9f8ec, transparent 68%),
    radial-gradient(760px 420px at 96% 0%, #eef6ff, transparent 70%),
    var(--fundo);
}

.heroi-grade {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 60px;
  align-items: center;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--borda);
  color: var(--verde-escuro);
  font-size: 0.84rem;
  font-weight: 600;
  box-shadow: 0 8px 20px -14px rgba(11, 18, 32, 0.5);
}

.ponto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}

h1 {
  margin: 0 0 22px;
  font-size: clamp(2.3rem, 5vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: -0.045em;
  font-weight: 800;
}

.chamada {
  margin: 0 0 32px;
  font-size: 1.14rem;
  color: var(--tinta-media);
  max-width: 33em;
}

.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.acoes.centro { justify-content: center; }

.nota { margin: 18px 0 0; font-size: 0.87rem; color: var(--tinta-fraca); }
.nota.centro { margin-top: 24px; }

/* ---------- celular ---------- */

.heroi-celular { display: flex; justify-content: center; }

.celular {
  position: relative;
  width: 330px;
  padding: 12px;
  border-radius: 46px;
  background: linear-gradient(160deg, #1e293b, #0b1220);
  box-shadow: 0 50px 90px -45px rgba(11, 18, 32, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.celular::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 22px;
  border-radius: 999px;
  background: #0b1220;
  z-index: 3;
}

.celular-tela {
  position: relative;
  border-radius: 36px;
  overflow: hidden;
  background: #efeae2;
  min-height: 560px;
}

.zap-topo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 44px 16px 12px;
  background: #075e54;
  color: #fff;
}

.zap-topo img { border-radius: 50%; }
.zap-topo strong { display: block; font-size: 0.95rem; line-height: 1.2; }
.zap-topo span { font-size: 0.76rem; opacity: 0.75; }

.zap-conversa {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 12px 24px;
  background:
    linear-gradient(rgba(239, 234, 226, 0.94), rgba(239, 234, 226, 0.94)),
    repeating-linear-gradient(45deg, #ddd6cc 0 2px, transparent 2px 14px);
}

.balao {
  max-width: 86%;
  padding: 9px 13px;
  border-radius: 12px 12px 12px 3px;
  background: #fff;
  font-size: 0.87rem;
  line-height: 1.45;
  color: #111b21;
  box-shadow: 0 1px 1px rgba(11, 18, 32, 0.14);
}

.balao-meu {
  align-self: flex-end;
  border-radius: 12px 12px 3px 12px;
  background: #d9fdd3;
}

.balao.audio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: #4b5a63;
}

.onda { display: flex; align-items: center; gap: 2px; height: 18px; }

.onda i {
  display: block;
  width: 2px;
  border-radius: 2px;
  background: #54656f;
}

.onda i:nth-child(1) { height: 5px; }
.onda i:nth-child(2) { height: 10px; }
.onda i:nth-child(3) { height: 16px; }
.onda i:nth-child(4) { height: 8px; }
.onda i:nth-child(5) { height: 13px; }
.onda i:nth-child(6) { height: 6px; }
.onda i:nth-child(7) { height: 15px; }
.onda i:nth-child(8) { height: 9px; }
.onda i:nth-child(9) { height: 12px; }
.onda i:nth-child(10) { height: 5px; }
.onda i:nth-child(11) { height: 10px; }
.onda i:nth-child(12) { height: 7px; }

/* ---------- faixa ---------- */

.faixa {
  border-top: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  background: var(--fundo-suave);
  padding: 28px 0;
}

.faixa-itens {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.faixa-itens strong { display: block; font-size: 0.98rem; }
.faixa-itens span { font-size: 0.86rem; color: var(--tinta-media); }

/* ---------- seções ---------- */

.secao { padding: 92px 0; }
.secao-clara { background: var(--fundo-suave); }

.cabecalho-secao { max-width: 46em; margin-bottom: 48px; }
.cabecalho-secao.centro { margin-left: auto; margin-right: auto; }

.rotulo {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde-escuro);
}

h2 {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  letter-spacing: -0.035em;
  font-weight: 800;
  line-height: 1.16;
}

.subtitulo {
  margin: 0 0 0;
  font-size: 1.06rem;
  color: var(--tinta-media);
  max-width: 44em;
}

.cabecalho-secao.centro .subtitulo { margin-left: auto; margin-right: auto; }

.grade-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grade-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cartao {
  padding: 28px;
  border-radius: var(--raio);
  background: #fff;
  border: 1px solid var(--borda);
  transition: transform 0.18s, box-shadow 0.18s;
}

.cartao:hover { transform: translateY(-3px); box-shadow: var(--sombra); }

.cartao h3 {
  margin: 0 0 9px;
  font-size: 1.07rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.cartao p { margin: 0; color: var(--tinta-media); font-size: 0.95rem; }

.icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 14px;
}

.icone svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icone-verde { background: #d9f8ec; color: #047857; }
.icone-azul { background: #dbeafe; color: #1d4ed8; }
.icone-ambar { background: #fef3c7; color: #b45309; }
.icone-roxo { background: #ede9fe; color: #6d28d9; }
.icone-rosa { background: #fce7f3; color: #be185d; }

/* ---------- duas colunas ---------- */

.duas-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.duas-colunas.invertida .coluna-texto { order: 2; }
.duas-colunas.invertida .coluna-imagem { order: 1; }

.coluna-texto .subtitulo { margin-bottom: 28px; }

.lista {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  color: var(--tinta-media);
  font-size: 0.98rem;
}

.lista li { position: relative; padding-left: 28px; }

.lista li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.44em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--verde-fundo);
  box-shadow: inset 0 0 0 1.6px var(--verde);
}

.lista li::after {
  content: '';
  position: absolute;
  left: 6.5px;
  top: 0.78em;
  width: 7px;
  height: 4px;
  border-left: 1.8px solid var(--verde-escuro);
  border-bottom: 1.8px solid var(--verde-escuro);
  transform: rotate(-45deg);
}

.lista strong { color: var(--tinta); }

.lista-simples li::before,
.lista-simples li::after { top: 0.5em; }

/* celulares lado a lado */

/* Dois celulares sobrepostos. O de trás usa z-index 0 e o da frente 2: com
   z-index negativo ele some atrás do fundo da seção, que é pintado no pai. */
.celulares-par {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 520px;
  isolation: isolate;
}

.celular-menor { width: 268px; }
.celular-menor .celular-tela { min-height: 0; background: #fff; }
.celular-menor .celular::before { width: 74px; height: 18px; }

.celular-atras {
  position: absolute;
  right: 0;
  top: 40px;
  transform: rotate(5deg) scale(0.9);
  z-index: 0;
}

.celulares-par .celular:first-child {
  position: relative;
  z-index: 2;
  transform: rotate(-3deg) translateX(-26px);
}

/* ---------- moldura de navegador ---------- */

.navegador {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--borda);
  background: #fff;
  box-shadow: var(--sombra);
}

.navegador-barra {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #f1f5f9;
  border-bottom: 1px solid var(--borda);
}

.navegador-barra > span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #cbd5e1;
}

.navegador-barra > span:first-child { background: #fca5a5; }
.navegador-barra > span:nth-child(2) { background: #fde68a; }
.navegador-barra > span:nth-child(3) { background: #86efac; }

.navegador-url {
  flex: 1;
  margin-left: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--borda);
  font-size: 0.76rem;
  color: var(--tinta-fraca);
}

.navegador-pequeno { box-shadow: 0 24px 50px -34px rgba(11, 18, 32, 0.6); }

.miudos {
  margin-top: 34px;
  text-align: center;
}

.miudos strong { display: block; font-size: 0.97rem; }
.miudos span { font-size: 0.86rem; color: var(--tinta-media); }

/* ---------- seção escura ---------- */

.secao-escura { background: var(--escuro); color: #fff; }
.secao-escura h2 { color: #fff; }
.subtitulo.claro { color: #94a3b8; margin-bottom: 30px; }
.lista-clara { color: #cbd5e1; font-size: 1rem; gap: 17px; }
.lista-clara strong { color: #fff; }
.lista-clara li::before { background: rgba(16, 185, 129, 0.18); box-shadow: inset 0 0 0 1.6px var(--verde); }
.lista-clara li::after { border-color: #6ee7b7; }

/* ---------- planos ---------- */

.planos { align-items: start; }
.plano { display: flex; flex-direction: column; gap: 16px; position: relative; }
.plano:hover { transform: none; box-shadow: none; }

.preco {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.preco span { font-size: 0.95rem; font-weight: 500; color: var(--tinta-fraca); }

.plano-destaque {
  border-color: var(--verde);
  box-shadow: 0 26px 60px -34px rgba(16, 185, 129, 0.75);
}

.etiqueta {
  position: absolute;
  top: -13px;
  left: 28px;
  margin: 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--verde);
  color: #fff;
  font-size: 0.77rem;
  font-weight: 600;
}

/* ---------- perguntas ---------- */

.pergunta { border-bottom: 1px solid var(--borda); }

.pergunta-titulo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  font-size: 1.04rem;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}

.pergunta-titulo::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--verde);
  line-height: 1;
  transition: transform 0.2s;
}

.pergunta-titulo[aria-expanded='true']::after { transform: rotate(45deg); }

.pergunta-corpo { display: none; padding: 0 0 22px; color: var(--tinta-media); max-width: 62em; }
.pergunta-corpo p { margin: 0; }
.pergunta-titulo[aria-expanded='true'] + .pergunta-corpo { display: block; }

/* ---------- chamada final ---------- */

/*
 * O espaçamento vem daqui, e não do .subtitulo, porque o subtítulo é usado em
 * seção com cabeçalho próprio, onde a margem já existe. Sem esta regra, o
 * bloco final encosta título, texto e botão uns nos outros.
 */
.chamada-final {
  padding: 108px 0;
  background:
    radial-gradient(900px 400px at 50% 0%, #d9f8ec, transparent 70%),
    var(--fundo);
}

.chamada-final h2 { margin-bottom: 18px; }
.chamada-final .subtitulo { margin: 0 auto 36px; }

/* ---------- rodapé ---------- */

.rodape { border-top: 1px solid var(--borda); padding: 42px 0; background: var(--fundo-suave); }

.rodape-conteudo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.rodape-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 0.92rem;
  color: var(--tinta-media);
}

.rodape-links a:hover { color: var(--tinta); }

/* ---------- responsivo ---------- */

@media (max-width: 980px) {
  .heroi-grade { grid-template-columns: 1fr; gap: 52px; }
  .heroi-texto { max-width: 620px; }
  .duas-colunas { grid-template-columns: 1fr; gap: 44px; }
  .duas-colunas.invertida .coluna-texto,
  .duas-colunas.invertida .coluna-imagem { order: initial; }
  .grade-3 { grid-template-columns: 1fr 1fr; }
  .grade-4 { grid-template-columns: 1fr 1fr; }
  .celulares-par { min-height: 480px; }
}

@media (max-width: 720px) {
  .menu {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 24px 22px;
    background: #fff;
    border-bottom: 1px solid var(--borda);
  }

  .menu.aberto { display: flex; }
  .menu a { padding: 13px 0; }
  .menu .botao { margin-top: 10px; justify-content: center; }
  .menu-botao { display: flex; }

  .heroi { padding: 56px 0 64px; }
  .secao { padding: 64px 0; }
  .grade-3, .grade-4 { grid-template-columns: 1fr; }
  .faixa-itens { grid-template-columns: 1fr 1fr; gap: 20px; }
  .acoes .botao { flex: 1 1 auto; }

  .celular { width: 290px; }
  .celulares-par { flex-direction: column; align-items: center; gap: 20px; min-height: 0; }
  .celular-atras { position: static; transform: rotate(0) scale(1); z-index: 0; }
  .celulares-par .celular:first-child { transform: rotate(0); }
  .celular-menor { width: 260px; }
}