/* Página institucional (17/09/2026) — design "Página inicial — desktop", adaptada ao celular. */
:root {
  --in-fundo: #F4F2EC;
  --in-tinta: #0E1A17;
  --in-texto: #3B4A46;
  --in-texto-2: #24312E;
  --in-fraco: #5B6864;
  --in-borda: #DAD6CB;
  --in-borda-2: #ECE9E1;
  --in-acento: #1F6F5C;
  --in-acento-esc: #154D40;
  --in-acento-claro: #E6EFEA;
  --in-verde: #DCEBE4;
  --in-menta: #9DD3BF;
  --in-claro-esc: #C6D1CD;
  --in-linha-esc: #2D3D39;
  --in-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --in-sans: 'Figtree', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body.in-body { margin: 0; font-family: var(--in-sans); background: var(--in-fundo); color: var(--in-tinta); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; text-wrap: pretty; }
a { color: var(--in-acento); text-decoration: none; }
a:hover { color: var(--in-acento-esc); }
.in-serif { font-family: var(--in-serif); font-weight: 400; }
.in-serif em, .in-h1 em, .in-h2 em { font-style: italic; color: var(--in-acento); }
.in-largura { max-width: 1440px; margin: 0 auto; padding-left: 80px; padding-right: 80px; }
.in-kicker { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--in-acento-esc); }
.in-kicker-claro { color: var(--in-menta); }

/* ── Navegação ── */
.in-nav { position: sticky; top: 0; z-index: 50; background: rgba(244, 242, 236, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--in-borda); }
.in-nav-dentro { max-width: 1440px; margin: 0 auto; height: 88px; padding: 0 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.in-marca { display: flex; align-items: center; gap: 12px; color: var(--in-tinta); }
.in-marca:hover { color: var(--in-tinta); }
.in-marca-icone { width: 36px; height: 36px; border-radius: 10px; background: var(--in-tinta); display: flex; align-items: center; justify-content: center; }
.in-marca-nome { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.in-marca-nome span { color: var(--in-acento); }
.in-menu { display: flex; gap: 40px; font-size: 15px; font-weight: 500; }
.in-menu a { color: var(--in-texto); }
.in-menu a:hover { color: var(--in-tinta); }
.in-menu-entrar-celular { display: none; }
.in-nav-acoes { display: flex; align-items: center; gap: 12px; }
.in-entrar { height: 44px; padding: 0 18px; display: flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--in-tinta); }
.in-hamburguer { display: none; width: 44px; height: 44px; border: 1px solid var(--in-borda); border-radius: 12px; background: #fff; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.in-hamburguer span { width: 18px; height: 2px; background: var(--in-tinta); border-radius: 1px; transition: transform .2s, opacity .2s; }
.in-nav.aberto .in-hamburguer span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.in-nav.aberto .in-hamburguer span:nth-child(2) { opacity: 0; }
.in-nav.aberto .in-hamburguer span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Botões ── */
.in-btn { height: 58px; padding: 0 30px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; font-size: 17px; font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
.in-btn-sm { height: 44px; padding: 0 22px; font-size: 15px; }
.in-btn-escuro { background: var(--in-tinta); color: var(--in-fundo); }
.in-btn-escuro:hover { color: #fff; background: #1b2b27; }
.in-btn-acento { background: var(--in-acento); color: #fff; }
.in-btn-acento:hover { background: var(--in-acento-esc); color: #fff; }
.in-btn-contorno { border-color: var(--in-tinta); color: var(--in-tinta); background: transparent; padding: 0 26px; }
.in-btn-contorno:hover { background: var(--in-tinta); color: var(--in-fundo); }
.in-botoes { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.in-botoes-centro { justify-content: center; }

/* ── Hero ── */
.in-hero { padding-top: 88px; padding-bottom: 120px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: center; }
.in-hero-texto { display: flex; flex-direction: column; gap: 32px; }
.in-selo { align-self: flex-start; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid #C9D9D1; border-radius: 999px; background: var(--in-acento-claro); font-size: 14px; font-weight: 600; color: var(--in-acento-esc); }
.in-selo span { width: 8px; height: 8px; border-radius: 999px; background: var(--in-acento); }
.in-h1 { font-size: 92px; line-height: 0.98; letter-spacing: -0.02em; color: var(--in-tinta); font-family: var(--in-serif); font-weight: 400; }
.in-lead { font-size: 21px; line-height: 1.55; color: var(--in-texto); max-width: 560px; }
.in-garantias { display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; color: var(--in-texto); padding-top: 8px; }
.in-garantias span { display: flex; align-items: center; gap: 8px; }

.in-mock { position: relative; height: 640px; }
.in-mock-sombra { position: absolute; inset: 24px 0 0 40px; border-radius: 28px; background: var(--in-tinta); }
.in-mock-tela { position: absolute; top: 0; left: 0; right: 40px; bottom: 40px; border-radius: 24px; background: #fff; border: 1px solid var(--in-borda); box-shadow: 0 30px 60px -30px rgba(14, 26, 23, 0.35); display: flex; flex-direction: column; overflow: hidden; }
.in-mock-topo { min-height: 64px; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--in-borda-2); }
.in-mock-pac { display: flex; align-items: center; gap: 12px; min-width: 0; }
.in-mock-pac div { display: flex; flex-direction: column; min-width: 0; }
.in-mock-avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--in-acento-claro); color: var(--in-acento-esc); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.in-mock-nome { font-size: 15px; font-weight: 600; }
.in-mock-sub { font-size: 12px; color: var(--in-fraco); }
.in-mock-gravando { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: #FCEDE6; color: #9A3F1B; font-size: 12px; font-weight: 600; white-space: nowrap; }
.in-mock-gravando i { width: 8px; height: 8px; border-radius: 999px; background: #C8643B; animation: in-pisca 1.2s infinite; }
@keyframes in-pisca { 50% { opacity: .3; } }
.in-mock-ondas { padding: 20px 24px; display: flex; align-items: center; gap: 3px; height: 72px; border-bottom: 1px solid var(--in-borda-2); overflow: hidden; }
.in-mock-ondas span { width: 4px; flex-shrink: 0; border-radius: 2px; background: #9DBFB2; animation: in-onda 1.6s ease-in-out infinite; transform-origin: center; }
.in-mock-ondas span:nth-child(3n) { animation-delay: .2s; }
.in-mock-ondas span:nth-child(3n+1) { animation-delay: .5s; }
.in-mock-ondas span:nth-child(4n) { animation-delay: .8s; }
@keyframes in-onda { 50% { transform: scaleY(.45); } }
@media (prefers-reduced-motion: reduce) { .in-mock-ondas span, .in-mock-gravando i { animation: none; } html { scroll-behavior: auto; } }
.in-mock-corpo { padding: 24px; display: flex; flex-direction: column; gap: 16px; flex-grow: 1; }
.in-mock-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.in-mock-cab .in-kicker { font-size: 13px; letter-spacing: 0.08em; }
.in-soap { display: grid; grid-template-columns: 32px 1fr; gap: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--in-texto-2); }
.in-soap .in-serif { font-size: 22px; color: var(--in-acento); line-height: 1.1; }
.in-cid { padding: 1px 6px; border-radius: 6px; background: var(--in-acento-claro); color: var(--in-acento-esc); font-weight: 600; white-space: nowrap; }
.in-mock-alerta { display: flex; gap: 12px; padding: 14px 16px; border-radius: 14px; background: #FBF3E6; color: #6B4A12; font-size: 13px; line-height: 1.45; }
.in-mock-alerta svg { flex-shrink: 0; margin-top: 1px; }
.in-mock-acoes { margin-top: auto; display: flex; gap: 10px; justify-content: flex-end; }
.in-mock-btn { height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--in-borda); background: #fff; font-size: 14px; font-weight: 600; color: var(--in-tinta); display: inline-flex; align-items: center; }
.in-mock-btn-escuro { border: 0; background: var(--in-tinta); color: var(--in-fundo); }

/* ── Seções ── */
.in-faixa-branca { background: #fff; border-top: 1px solid var(--in-borda); border-bottom: 1px solid var(--in-borda); }
.in-faixa-escura { background: var(--in-tinta); color: var(--in-fundo); }
.in-secao { padding-top: 110px; padding-bottom: 110px; display: flex; flex-direction: column; gap: 64px; }
#recursos.in-secao { padding-top: 120px; padding-bottom: 120px; }
.in-dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: end; }
.in-h2 { font-family: var(--in-serif); font-weight: 400; font-size: 64px; line-height: 1.02; letter-spacing: -0.015em; }
.in-h2-estreito { max-width: 900px; }
.in-texto-grande { font-size: 19px; line-height: 1.6; color: var(--in-texto); }
.in-grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

.in-publico { padding: 36px; border-radius: 24px; background: var(--in-fundo); display: flex; flex-direction: column; gap: 20px; }
.in-publico-icone { width: 52px; height: 52px; border-radius: 14px; background: var(--in-tinta); display: flex; align-items: center; justify-content: center; }
.in-publico-icone-acento { background: var(--in-acento); }
.in-publico h3 { font-size: 36px; line-height: 1.05; }
.in-publico p { font-size: 16px; line-height: 1.6; color: var(--in-texto); }
.in-publico ul { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--in-borda); display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--in-texto-2); }
.in-publico-escuro { background: var(--in-tinta); color: var(--in-fundo); }
.in-publico-escuro p { color: var(--in-claro-esc); }
.in-publico-escuro ul { border-top-color: var(--in-linha-esc); color: #E4EAE7; }

.in-titulo-bloco { display: flex; flex-direction: column; gap: 20px; max-width: 820px; }
.in-mosaico { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.in-col-7 { grid-column: span 7; }
.in-col-5 { grid-column: span 5; }
.in-recurso { min-height: 340px; padding: 44px; border-radius: 28px; background: #fff; border: 1px solid var(--in-borda); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.in-recurso > div { display: flex; flex-direction: column; gap: 14px; }
.in-recurso h3 { font-size: 40px; line-height: 1.05; }
.in-recurso .in-h3-grande { font-size: 44px; }
.in-recurso p { font-size: 17px; line-height: 1.6; color: var(--in-texto); max-width: 560px; }
.in-recurso-verde { background: var(--in-verde); border-color: var(--in-verde); min-height: 380px; }
.in-recurso-verde p { font-size: 18px; color: var(--in-texto-2); }
.in-col-5:nth-child(2) { min-height: 380px; }
.in-recurso-escuro { background: var(--in-tinta); border-color: var(--in-tinta); color: var(--in-fundo); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: end; }
.in-recurso-escuro p { color: var(--in-claro-esc); }
.in-recurso-meia { display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 32px; }
.in-recurso-meia > div { display: flex; flex-direction: column; gap: 14px; }
.in-codigos { display: flex; flex-direction: column; gap: 10px; }
.in-codigos div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #1B2B27; font-size: 14px; }
.in-codigos b { color: var(--in-menta); }

.in-passo { display: flex; flex-direction: column; gap: 18px; padding-top: 28px; border-top: 2px solid var(--in-tinta); }
.in-passos { gap: 48px; }
.in-passo-num { font-size: 72px; line-height: 1; color: var(--in-acento); }
.in-passo h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.in-passo p { font-size: 17px; line-height: 1.6; color: var(--in-texto); }

.in-seguranca { padding-top: 120px; padding-bottom: 120px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 96px; }
.in-seguranca-texto { display: flex; flex-direction: column; gap: 28px; }
.in-h2-seg { font-size: 68px; line-height: 1.0; }
.in-seguranca-texto p { font-size: 19px; line-height: 1.6; color: var(--in-claro-esc); max-width: 520px; }
.in-selos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--in-linha-esc); border: 1px solid var(--in-linha-esc); border-radius: 24px; overflow: hidden; align-self: start; }
.in-selos > div { padding: 36px; background: var(--in-tinta); display: flex; flex-direction: column; gap: 12px; }
.in-selos h3 { font-size: 20px; font-weight: 600; }
.in-selos p { font-size: 15px; line-height: 1.55; color: var(--in-claro-esc); }

/* ── Demonstração ── */
.in-cta { padding-top: 130px; padding-bottom: 130px; display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; }
.in-cta-titulo { font-size: 88px; line-height: 1.0; max-width: 1000px; }
.in-cta .in-lead { max-width: 640px; font-size: 20px; }
.in-form { width: 100%; max-width: 760px; background: #fff; border: 1px solid var(--in-borda); border-radius: 28px; padding: 32px; text-align: left; display: flex; flex-direction: column; gap: 18px; }
.in-form-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.in-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--in-texto-2); }
.in-form input, .in-form select, .in-form textarea { font: inherit; font-size: 16px; font-weight: 400; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--in-borda); background: var(--in-fundo); color: var(--in-tinta); width: 100%; }
.in-form textarea { resize: vertical; }
.in-form input:focus, .in-form select:focus, .in-form textarea:focus { outline: 2px solid var(--in-acento); border-color: var(--in-acento); background: #fff; }
.in-form-largo { grid-column: 1 / -1; }
.in-armadilha { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.in-form-lgpd { font-size: 13px; color: var(--in-fraco); }
.in-form-erro { background: #FDECEA; color: #B42318; border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; }
.in-enviado { background: var(--in-acento-claro); color: var(--in-acento-esc); border-radius: 20px; padding: 24px 28px; font-size: 18px; max-width: 640px; }

/* ── Rodapé ── */
.in-rodape { background: var(--in-tinta); color: var(--in-claro-esc); padding: 72px 0; }
.in-rodape-grade { display: grid; grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr)); gap: 48px; }
.in-rodape-grade > div { display: flex; flex-direction: column; gap: 16px; }
.in-rodape-grade p { font-size: 15px; line-height: 1.6; }
.in-rodape-marca { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--in-fundo); }
.in-rodape-marca span { color: var(--in-menta); }
.in-rodape-col { gap: 12px !important; font-size: 15px; }
.in-rodape-col > span { font-weight: 600; color: var(--in-fundo); }
.in-rodape-col a, .in-rodape-pe a { color: var(--in-claro-esc); }
.in-rodape-col a:hover, .in-rodape-pe a:hover { color: #fff; }
.in-rodape-col address { font-style: normal; line-height: 1.55; }
.in-rodape-pe { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--in-linha-esc); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.in-rodape-pe div { display: flex; gap: 28px; flex-wrap: wrap; }

.in-whats { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 56px; height: 56px; border-radius: 28px; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,.2); }
.in-whats:hover { transform: translateY(-2px); }

/* ── Responsivo ── */
@media (max-width: 1200px) {
  .in-largura, .in-nav-dentro { padding-left: 48px; padding-right: 48px; }
  .in-menu { gap: 24px; }
  .in-h1 { font-size: 72px; }
  .in-h2 { font-size: 52px; }
  .in-cta-titulo { font-size: 68px; }
  .in-hero { gap: 48px; }
}
@media (max-width: 980px) {
  .in-largura, .in-nav-dentro { padding-left: 24px; padding-right: 24px; }
  .in-nav-dentro { height: 72px; }
  .in-hamburguer { display: flex; }
  .in-entrar { display: none; }
  /* O share FICA no celular: é lá que se compartilha um link. Vem depois da regra acima de
     propósito — mesma especificidade, quem vem por último vence. */
  .in-share { display: flex; }
  .in-menu { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(--in-fundo); border-bottom: 1px solid var(--in-borda); flex-direction: column; gap: 0; padding: 8px 24px 16px; box-shadow: 0 16px 30px rgba(14, 26, 23, .08); }
  .in-nav.aberto .in-menu { display: flex; }
  .in-menu a { padding: 14px 0; border-bottom: 1px solid var(--in-borda-2); font-size: 17px; }
  .in-menu-entrar-celular { display: block; font-weight: 700; color: var(--in-acento) !important; border-bottom: 0 !important; }
  html { scroll-padding-top: 80px; }

  .in-hero { grid-template-columns: minmax(0, 1fr); padding-top: 48px; padding-bottom: 72px; }
  .in-mock { height: auto; }
  .in-mock-sombra { inset: 16px -8px -16px 16px; }
  .in-mock-tela { position: relative; right: auto; bottom: auto; }
  .in-dupla, .in-seguranca { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .in-seguranca { gap: 48px; padding-top: 80px; padding-bottom: 80px; }
  .in-grade-3 { grid-template-columns: minmax(0, 1fr); }
  .in-passos { gap: 32px; }
  .in-mosaico { grid-template-columns: minmax(0, 1fr); }
  .in-col-7, .in-col-5 { grid-column: auto; }
  .in-recurso, .in-recurso-verde, .in-col-5:nth-child(2) { min-height: 0; padding: 32px; }
  .in-recurso-escuro { grid-template-columns: minmax(0, 1fr); }
  .in-secao, #recursos.in-secao { padding-top: 72px; padding-bottom: 72px; gap: 40px; }
  .in-cta { padding-top: 80px; padding-bottom: 96px; }
  .in-rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}
@media (max-width: 600px) {
  .in-btn-sm { display: none; }
  .in-h1 { font-size: 48px; line-height: 1.02; }
  .in-h2, .in-h2-seg { font-size: 38px; }
  .in-cta-titulo { font-size: 46px; }
  .in-lead { font-size: 18px; }
  .in-texto-grande { font-size: 17px; }
  .in-botoes .in-btn { width: 100%; }
  .in-garantias { gap: 10px 18px; }
  .in-mock-topo { flex-wrap: wrap; padding: 12px 16px; }
  .in-mock-corpo { padding: 18px 16px; }
  .in-mock-ondas { padding: 16px; }
  .in-mock-acoes { flex-wrap: wrap; }
  .in-mock-acoes span { flex: 1; justify-content: center; }
  .in-publico { padding: 28px; }
  .in-publico h3 { font-size: 32px; }
  .in-recurso h3, .in-recurso .in-h3-grande { font-size: 32px; }
  .in-passo-num { font-size: 56px; }
  .in-selos { grid-template-columns: minmax(0, 1fr); }
  .in-selos > div { padding: 28px; }
  .in-form { padding: 22px 18px; border-radius: 22px; }
  .in-form-grade { grid-template-columns: minmax(0, 1fr); }
  .in-rodape { padding: 56px 0 96px; }
  .in-rodape-grade { grid-template-columns: minmax(0, 1fr); }
  .in-rodape-pe { flex-direction: column; }
}
