/* ==========================================================================
   DCH — portal de venda · estilos
   ========================================================================== */

:root {
  --azul-900: #0f1f3d;
  --azul-800: #14295a;
  --azul-700: #1c3a7a;
  --azul-600: #2450a8;
  --azul-500: #2f66d1;
  --azul-100: #e4ecfb;
  --azul-50: #f2f6fe;
  --verde-600: #1f8a5b;
  --verde-100: #dff5ea;
  --laranja-600: #e0632a;
  --laranja-700: #c4511d;
  --vermelho-600: #c93c3c;
  --vermelho-100: #fbe3e3;
  --amarelo-100: #fff4d6;
  --amarelo-700: #9a6b00;
  --cinza-900: #1b1f2a;
  --cinza-700: #444b5a;
  --cinza-500: #6b7280;
  --cinza-300: #d5d9e2;
  --cinza-200: #e6e9ef;
  --cinza-100: #f3f4f7;
  --branco: #ffffff;

  --fundo: var(--branco);
  --fundo-suave: #f7f9fd;
  --texto: var(--cinza-900);
  --texto-suave: var(--cinza-700);
  --texto-fraco: var(--cinza-500);
  --primaria: var(--azul-700);
  --primaria-forte: var(--azul-800);
  --cta: var(--laranja-600);
  --cta-forte: var(--laranja-700);

  --raio: 12px;
  --raio-p: 8px;
  --sombra: 0 10px 30px rgba(15, 31, 61, 0.10);
  --sombra-p: 0 2px 8px rgba(15, 31, 61, 0.08);
  --largura: 1140px;
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background: var(--fundo);
}

img { max-width: 100%; display: block; }
a { color: var(--primaria); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.5em; color: var(--azul-900); letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }

.container { width: min(var(--largura), 100% - 2.5rem); margin: 0 auto; }
.secao { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.secao--suave { background: var(--fundo-suave); }
.secao--escura { background: var(--azul-900); color: #dbe4f7; }
.secao--escura h2, .secao--escura h3 { color: var(--branco); }
.secao__cabeca { max-width: 720px; margin-bottom: 2.5rem; }
.secao__cabeca--centro { margin-left: auto; margin-right: auto; text-align: center; }
.rotulo {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primaria); margin-bottom: 0.75rem;
}
.secao--escura .rotulo { color: #8fb0f5; }
.lead { font-size: 1.15rem; color: var(--texto-suave); }
.secao--escura .lead { color: #b9c7e6; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Botões ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.4rem; border-radius: var(--raio-p); font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.btn:active { transform: translateY(1px); }
.btn--cta { background: var(--cta); color: var(--branco); }
.btn--cta:hover { background: var(--cta-forte); }
.btn--secundario { background: transparent; color: var(--primaria); border-color: var(--azul-100); }
.btn--secundario:hover { border-color: var(--primaria); }
.btn--claro { background: var(--branco); color: var(--primaria-forte); }
.btn--claro:hover { background: var(--azul-50); }
.btn--contorno-claro { background: transparent; color: var(--branco); border-color: rgba(255,255,255,0.4); }
.btn--contorno-claro:hover { border-color: var(--branco); }
.btn--grande { padding: 1rem 1.75rem; font-size: 1.05rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--azul-500); outline-offset: 2px;
}

/* Cabeçalho ---------------------------------------------------------------- */
.topo {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cinza-200);
}
.topo__linha { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 1rem; }
.marca { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--azul-900); }
.marca__logo {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--azul-600), var(--azul-800)); color: var(--branco);
  font-weight: 800; font-size: 0.95rem; letter-spacing: -0.02em;
}
.marca__nome { font-weight: 800; font-size: 1.15rem; line-height: 1; }
.marca__sub { display: block; font-size: 0.7rem; font-weight: 500; color: var(--texto-fraco); margin-top: 3px; letter-spacing: 0.02em; }
.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav a { text-decoration: none; color: var(--texto-suave); font-weight: 500; font-size: 0.95rem; }
.nav a:hover { color: var(--primaria); }
.nav .btn { padding: 0.6rem 1.05rem; font-size: 0.9rem; color: var(--branco); }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--cinza-300); border-radius: 8px;
  width: 42px; height: 42px; cursor: pointer; place-items: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--azul-900); position: relative; content: "";
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

@media (max-width: 1199px) {
  .nav-toggle { display: grid; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column;
    align-items: stretch; gap: 0; background: var(--branco); border-bottom: 1px solid var(--cinza-200);
    padding: 0.5rem 1.25rem 1rem; box-shadow: var(--sombra);
  }
  .nav.aberto { display: flex; }
  .nav a { padding: 0.8rem 0; border-bottom: 1px solid var(--cinza-100); }
  .nav .btn { margin-top: 0.75rem; border-bottom: 0; }
}

/* Hero ---------------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(47,102,209,0.18), transparent 60%),
    radial-gradient(600px 400px at -10% 100%, rgba(224,99,42,0.10), transparent 60%),
    var(--fundo);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.hero h1 span { color: var(--primaria); }
.hero .lead { font-size: 1.2rem; max-width: 34em; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.75rem 0 1.25rem; }
.hero__nota { font-size: 0.9rem; color: var(--texto-fraco); }
.hero__nota strong { color: var(--texto-suave); }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Mockup de tela ------------------------------------------------------------ */
.tela {
  background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio);
  box-shadow: var(--sombra); overflow: hidden; font-size: 0.8rem;
}
.tela__barra {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem;
  background: var(--cinza-100); border-bottom: 1px solid var(--cinza-200); color: var(--texto-fraco);
}
.tela__barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--cinza-300); display: inline-block; }
.tela__barra i:nth-child(1) { background: #f26c5f; }
.tela__barra i:nth-child(2) { background: #f5bf4f; }
.tela__barra i:nth-child(3) { background: #62c655; }
.tela__titulo { margin-left: 0.5rem; font-weight: 600; color: var(--texto-suave); }
.tela__corpo { padding: 0.9rem; }
.tela__cabeca { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; gap: 0.5rem; flex-wrap: wrap; }
.tela__cabeca strong { font-size: 0.9rem; color: var(--azul-900); }
.selo {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px;
  font-weight: 600; font-size: 0.75rem; white-space: nowrap;
}
.selo--ok { background: var(--verde-100); color: var(--verde-600); }
.selo--alerta { background: var(--amarelo-100); color: var(--amarelo-700); }
.selo--erro { background: var(--vermelho-100); color: var(--vermelho-600); }
.selo--info { background: var(--azul-100); color: var(--azul-700); }

/* grade de horário (mockup) */
.grade { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.grade th { font-weight: 600; color: var(--texto-fraco); font-size: 0.72rem; padding: 0.2rem 0; text-transform: uppercase; letter-spacing: 0.04em; }
.grade th:first-child { width: 3.2em; text-align: left; }
.grade td { padding: 0; height: 2.6em; }
.grade td:first-child { font-size: 0.72rem; color: var(--texto-fraco); font-weight: 600; }
.aula {
  height: 100%; border-radius: 6px; padding: 0.25rem 0.4rem; display: flex; flex-direction: column;
  justify-content: center; line-height: 1.2; color: var(--branco); font-weight: 600; font-size: 0.72rem;
  position: relative; overflow: hidden;
}
.aula small { font-weight: 400; opacity: 0.9; font-size: 0.66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aula--mat { background: #3b62c9; }
.aula--por { background: #2e9d6c; }
.aula--his { background: #b0559a; }
.aula--geo { background: #d0703a; }
.aula--bio { background: #3a9fb3; }
.aula--fis { background: #6c5ac9; }
.aula--qui { background: #c74c6a; }
.aula--edf { background: #6f9a2b; }
.aula--art { background: #a07a2c; }
.aula--ing { background: #4a7ab8; }
.aula .cadeado { position: absolute; top: 2px; right: 4px; font-size: 0.6rem; opacity: 0.9; }
.grade .intervalo td { height: 1.1em; }
.grade .intervalo td:not(:first-child) { background: repeating-linear-gradient(90deg, var(--cinza-200) 0 6px, transparent 6px 10px); border-radius: 3px; }

.hero__tela { position: relative; }
.balao-flutuante {
  position: absolute; right: -0.75rem; bottom: -1.25rem; max-width: 300px;
  background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 0.85rem 1rem; font-size: 0.85rem;
}
.balao-flutuante__quem { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--azul-900); margin-bottom: 0.35rem; font-size: 0.8rem; }
.balao-flutuante__quem i { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--azul-100); color: var(--primaria); font-style: normal; font-size: 0.75rem; }
.balao-flutuante p { margin: 0; color: var(--texto-suave); }
@media (max-width: 900px) { .balao-flutuante { position: static; max-width: none; margin-top: 1rem; } }

/* Faixa de destaques --------------------------------------------------------- */
.faixa { border-top: 1px solid var(--cinza-200); border-bottom: 1px solid var(--cinza-200); background: var(--fundo-suave); }
.faixa__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.5rem 0; }
.faixa__item strong { display: block; font-size: 1.15rem; color: var(--azul-900); font-weight: 800; line-height: 1.2; }
.faixa__item span { font-size: 0.85rem; color: var(--texto-fraco); }
@media (max-width: 760px) { .faixa__grid { grid-template-columns: repeat(2, 1fr); } }

/* Cards genéricos ----------------------------------------------------------- */
.cards { display: grid; gap: 1.25rem; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards--3 { grid-template-columns: 1fr; } }
.card {
  background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio);
  padding: 1.5rem; box-shadow: var(--sombra-p);
}
.card h3 { margin-top: 0.75rem; }
.card p { color: var(--texto-suave); margin: 0; }
.card__icone {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: var(--azul-50); color: var(--primaria); font-size: 1.3rem;
}
.card--dor { border-top: 4px solid var(--vermelho-600); }
.card--dor .card__icone { background: var(--vermelho-100); }

/* Como funciona -------------------------------------------------------------- */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 960px) { .passos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .passos { grid-template-columns: 1fr; } }
.passo { position: relative; padding-top: 0.5rem; }
.passo__num {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--primaria); color: var(--branco); font-weight: 800; margin-bottom: 0.9rem;
}
.passo h3 { margin-bottom: 0.4rem; }
.passo p { color: var(--texto-suave); margin: 0 0 1rem; font-size: 0.95rem; }
.mini {
  background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio-p);
  padding: 0.75rem; font-size: 0.78rem; color: var(--texto-suave); box-shadow: var(--sombra-p);
}
.mini__linha { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--cinza-100); }
.mini__linha:last-child { border-bottom: 0; }
.mini__linha b { color: var(--azul-900); font-weight: 600; }
.mini .ok { color: var(--verde-600); font-weight: 700; }
.mini .warn { color: var(--amarelo-700); font-weight: 700; }
.barra-progresso { height: 8px; border-radius: 999px; background: var(--cinza-200); overflow: hidden; margin: 0.4rem 0; }
.barra-progresso > i { display: block; height: 100%; background: linear-gradient(90deg, var(--azul-500), var(--verde-600)); border-radius: inherit; }
.disp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 0.4rem; }
.disp i { height: 14px; border-radius: 3px; background: var(--verde-100); }
.disp i.x { background: var(--vermelho-100); }
.mini-botao {
  display: inline-block; margin-top: 0.5rem; padding: 0.3rem 0.7rem; border-radius: 6px;
  background: var(--cta); color: var(--branco); font-weight: 700; font-size: 0.75rem;
}

/* Assistente ------------------------------------------------------------------ */
.assistente__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: start; }
@media (max-width: 960px) { .assistente__grid { grid-template-columns: 1fr; gap: 2rem; } }
.assistente__lista { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.9rem; }
.assistente__lista li { display: flex; gap: 0.75rem; align-items: flex-start; color: #c9d5ee; }
.assistente__lista li::before { content: "✓"; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(143,176,245,0.2); color: #8fb0f5; font-size: 0.8rem; font-weight: 800; margin-top: 2px; }
.assistente__lista strong { color: var(--branco); }
.assistente__nota { margin-top: 1.5rem; font-size: 0.85rem; color: #8fa3cc; }
.chat {
  background: var(--branco); color: var(--texto); border-radius: var(--raio); box-shadow: var(--sombra);
  overflow: hidden; font-size: 0.9rem;
}
.chat__topo { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--cinza-200); background: var(--cinza-100); }
.chat__topo i { width: 10px; height: 10px; border-radius: 50%; background: var(--verde-600); display: inline-block; }
.chat__topo strong { color: var(--azul-900); }
.chat__topo span { color: var(--texto-fraco); font-size: 0.8rem; margin-left: auto; }
.chat__corpo { padding: 1rem; display: grid; gap: 0.85rem; }
.msg { max-width: 92%; padding: 0.7rem 0.95rem; border-radius: 14px; line-height: 1.5; }
.msg--user { background: var(--azul-600); color: var(--branco); justify-self: end; border-bottom-right-radius: 4px; }
.msg--bot { background: var(--cinza-100); border-bottom-left-radius: 4px; color: var(--texto); }
.msg--bot p { margin: 0 0 0.5rem; }
.msg--bot p:last-child { margin-bottom: 0; }
.msg .tabela-rolagem { overflow-x: auto; }
.msg table { width: 100%; border-collapse: collapse; font-size: 0.78rem; margin: 0.4rem 0 0.6rem; background: var(--branco); border-radius: 6px; overflow: hidden; }
.msg th, .msg td { padding: 0.35rem 0.5rem; text-align: left; border-bottom: 1px solid var(--cinza-200); white-space: nowrap; }
.msg th { background: var(--azul-50); color: var(--azul-800); font-weight: 700; }
.msg tr:last-child td { border-bottom: 0; }
.msg .num { color: var(--vermelho-600); font-weight: 700; }
.chat__acoes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.chip { display: inline-block; padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--branco); border: 1px solid var(--azul-100); color: var(--primaria); font-weight: 600; font-size: 0.75rem; }
.chat__evento { text-align: center; font-size: 0.75rem; color: var(--texto-fraco); }
.chat__evento b { color: var(--verde-600); }
.chat__entrada { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--cinza-200); color: var(--texto-fraco); font-size: 0.85rem; }
.chat__entrada span { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--cinza-300); border-radius: 8px; }
.chat__entrada b { padding: 0.5rem 0.9rem; border-radius: 8px; background: var(--primaria); color: var(--branco); font-weight: 600; }

/* Funcionalidades -------------------------------------------------------------- */
.func { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .func { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .func { grid-template-columns: 1fr; } }
.func__item { display: flex; gap: 0.9rem; padding: 1.1rem 1.2rem; background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio); }
.func__item i { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--azul-50); font-size: 1.15rem; font-style: normal; }
.func__item h3 { font-size: 1rem; margin: 0 0 0.25rem; }
.func__item p { margin: 0; font-size: 0.92rem; color: var(--texto-suave); }

/* Gestão central ---------------------------------------------------------------- */
.gestao__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 960px) { .gestao__grid { grid-template-columns: 1fr; gap: 2rem; } }
.gestao__lista { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.gestao__lista li { display: grid; grid-template-columns: 40px 1fr; gap: 0.9rem; align-items: start; }
.gestao__lista i { width: 40px; height: 40px; border-radius: 10px; background: var(--azul-50); display: grid; place-items: center; font-style: normal; font-size: 1.15rem; }
.gestao__lista strong { display: block; color: var(--azul-900); }
.gestao__lista span { color: var(--texto-suave); font-size: 0.95rem; }
.indicadores { display: grid; gap: 0.5rem; }
.indicador { display: grid; grid-template-columns: 1.4fr 3fr 3.2em; gap: 0.6rem; align-items: center; font-size: 0.78rem; }
.indicador b { color: var(--azul-900); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.indicador .barra-progresso { margin: 0; height: 10px; }
.indicador .barra-progresso > i { background: var(--azul-500); }
.indicador .barra-progresso > i.alto { background: var(--verde-600); }
.indicador .barra-progresso > i.baixo { background: var(--laranja-600); }
.indicador span { text-align: right; font-weight: 700; color: var(--texto-suave); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-bottom: 0.9rem; }
.kpi { background: var(--azul-50); border-radius: 8px; padding: 0.6rem 0.7rem; }
.kpi strong { display: block; font-size: 1.15rem; color: var(--azul-900); line-height: 1.1; }
.kpi span { font-size: 0.7rem; color: var(--texto-fraco); }

/* Case ----------------------------------------------------------------------------- */
.case { background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio); padding: clamp(1.5rem, 4vw, 3rem); box-shadow: var(--sombra-p); display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; } }
.case h3 { font-size: 1.4rem; }
.case p { color: var(--texto-suave); }
.case__fatos { display: grid; gap: 0.75rem; }
.case__fato { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.8rem 1rem; background: var(--fundo-suave); border-radius: var(--raio-p); font-size: 0.95rem; color: var(--texto-suave); }
.case__fato i { font-style: normal; }
.case__fato strong { color: var(--azul-900); }

/* FAQ ------------------------------------------------------------------------------- */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 0.6rem; }
.faq details { background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio-p); padding: 0 1.25rem; }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 0; font-weight: 600; color: var(--azul-900); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--primaria); flex: 0 0 auto; transition: transform 0.15s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 1.1rem; color: var(--texto-suave); }
.faq details > div p:last-child { margin: 0; }

/* Contato ------------------------------------------------------------------------------ */
.contato__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .contato__grid { grid-template-columns: 1fr; gap: 2rem; } }
.contato__canais { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.9rem; }
.contato__canais li { display: flex; gap: 0.75rem; align-items: center; color: #c9d5ee; }
.contato__canais a { color: var(--branco); font-weight: 600; }
.contato__canais i { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,0.08); font-style: normal; flex: 0 0 auto; }
.form { background: var(--branco); color: var(--texto); border-radius: var(--raio); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--sombra); display: grid; gap: 1rem; }
.form__linha { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form__linha { grid-template-columns: 1fr; } }
.campo { display: grid; gap: 0.35rem; }
.campo label { font-size: 0.85rem; font-weight: 600; color: var(--texto-suave); }
.campo input, .campo textarea, .campo select {
  font: inherit; padding: 0.7rem 0.85rem; border: 1px solid var(--cinza-300); border-radius: var(--raio-p);
  background: var(--branco); color: var(--texto); width: 100%;
}
.campo textarea { min-height: 110px; resize: vertical; }
.form__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.form__aviso { font-size: 0.8rem; color: var(--texto-fraco); margin: 0; }
.form__status { font-size: 0.9rem; margin: 0; color: var(--verde-600); font-weight: 600; min-height: 1.4em; }
.form__status.erro { color: var(--vermelho-600); }

/* Rodapé ------------------------------------------------------------------------------- */
.rodape { background: #0b172e; color: #9fb0d1; padding: 2.5rem 0 2rem; font-size: 0.9rem; }
.rodape__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; align-items: center; }
.rodape__marca { display: flex; align-items: center; gap: 1rem; }
.rodape__marca img { width: 220px; height: auto; border-radius: 8px; background: var(--branco); padding: 0.5rem 0.75rem; }
.rodape__marca p { margin: 0; }
.rodape__marca strong { color: var(--branco); display: block; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.rodape a { color: #c9d5ee; text-decoration: none; }
.rodape a:hover { color: var(--branco); text-decoration: underline; }
.rodape__legal { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.8rem; color: #7d8fb3; }

/* Ajustes de largura mínima em grids (evita que tabelas sem quebra estourem o cartão) */
.assistente__grid, .hero__grid, .gestao__grid, .contato__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.gestao__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.contato__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
@media (max-width: 960px) { .assistente__grid, .gestao__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .hero__grid, .contato__grid { grid-template-columns: minmax(0, 1fr); } }
.chat__corpo { grid-template-columns: minmax(0, 1fr); }
.msg { min-width: 0; }
.chat__topo strong { white-space: nowrap; }
.chat__topo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Telas estreitas */
@media (max-width: 480px) {
  .aula { font-size: 0.58rem; padding: 0.2rem 0.25rem; }
  .aula small { display: none; }
  .grade th:first-child { width: 2.6em; }
  .grade td:first-child { font-size: 0.66rem; }
  .indicador { grid-template-columns: 1fr 1.5fr 3em; }
  .indicador b { white-space: normal; line-height: 1.2; }
  .msg { max-width: 100%; }
}


/* ==========================================================================
   v3 — camada adicional (tema escuro, lockup, contratação, animações, ícones)
   Regras só aditivas: a base acima permanece a do dch_www.
   ========================================================================== */

/* Âncoras não escondem sob a barra fixa */
html { scroll-padding-top: 84px; }

/* Cabeçalho: marca com relógio, ações à direita ------------------------------ */
.topo__linha { justify-content: flex-start; }
.nav { margin-left: auto; }
.topo__acoes { display: flex; align-items: center; gap: 0.5rem; }
.marca__relogio { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; }

.tema-btn {
  display: grid; place-items: center; width: 42px; height: 42px; cursor: pointer;
  background: none; border: 1px solid var(--cinza-300); border-radius: 8px; color: var(--azul-900);
}
.tema-btn svg { width: 19px; height: 19px; }
.icone-lua { display: none; }

@media (max-width: 1199px) {
  .topo__acoes { margin-left: auto; }
}

/* Scroll spy ------------------------------------------------------------------ */
.nav a.ativa:not(.btn) {
  color: var(--primaria);
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}

/* Animação de entrada (classe aplicada só via JS; sem JS nada fica oculto) ---- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visivel { opacity: 1; transform: none; }

/* Ícones SVG ------------------------------------------------------------------ */
.card__icone svg { width: 22px; height: 22px; }
.card--dor .card__icone { color: var(--vermelho-600); }
.func__item i { color: var(--primaria); }
.func__item i svg { width: 19px; height: 19px; }
.gestao__lista i { color: var(--primaria); }
.gestao__lista i svg { width: 20px; height: 20px; }
.case__fato i { flex: 0 0 auto; color: var(--primaria); margin-top: 2px; }
.case__fato i svg { width: 19px; height: 19px; }
.contato__canais i { color: #9db8ee; }
.contato__canais i svg { width: 18px; height: 18px; }
.icone-check { width: 13px; height: 13px; flex: 0 0 auto; }
.chat__evento .icone-check { width: 11px; height: 11px; display: inline-block; vertical-align: -1px; }
.aula .cadeado svg { width: 9px; height: 9px; display: block; }
.balao-flutuante__quem i svg { width: 13px; height: 13px; }
.mini-botao svg { width: 12px; height: 12px; display: inline-block; vertical-align: -1px; }

/* Contratação ------------------------------------------------------------------ */
.planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
@media (max-width: 960px) { .planos { grid-template-columns: minmax(0, 1fr); max-width: 540px; margin: 0 auto; } }
.plano {
  position: relative; display: flex; flex-direction: column;
  background: var(--branco); border: 1px solid var(--cinza-200); border-radius: var(--raio);
  padding: 1.75rem 1.5rem 1.5rem; box-shadow: var(--sombra-p);
}
.plano h3 { margin: 0 0 0.2rem; font-size: 1.2rem; }
.plano__tag { color: var(--primaria); font-weight: 600; font-size: 0.9rem; margin: 0 0 1.1rem; }
.plano ul { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 0.55rem; }
.plano li { position: relative; padding-left: 1.35rem; font-size: 0.93rem; color: var(--texto-suave); line-height: 1.5; }
.plano li::before { content: ""; position: absolute; left: 0.2rem; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--azul-500); }
.plano--destaque { border-color: var(--azul-500); box-shadow: var(--sombra); }
.plano__selo {
  position: absolute; top: -12px; left: 1.25rem; padding: 0.3rem 0.8rem; border-radius: 999px;
  background: var(--cta); color: #fff; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.planos__nota { margin: 1.75rem auto 0; max-width: 760px; text-align: center; font-size: 0.88rem; color: var(--texto-fraco); }

/* FAQ agora fica sobre fundo claro: sombra leve para destacar os cartões ------- */
.faq details { box-shadow: var(--sombra-p); }

/* ==========================================================================
   Tema escuro — redefine a paleta e corrige os pontos em que "branco" era texto
   ========================================================================== */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #0c1424;
  --fundo-suave: #0f1930;
  --texto: #e6ecf8;
  --texto-suave: #b6c3dc;
  --texto-fraco: #8896b3;

  /* painéis e bordas: os cartões usam --branco e --cinza-* como fundo/traço */
  --branco: #141f38;
  --cinza-100: #1b2848;
  --cinza-200: #26365c;
  --cinza-300: #33456f;

  /* azuis de destaque mais claros para manter contraste sobre fundo escuro */
  --azul-900: #eef3fc;
  --azul-50: rgba(126, 166, 240, 0.14);
  --azul-100: rgba(126, 166, 240, 0.30);
  --primaria: #7ea6f0;
  --primaria-forte: #a9c4f7;

  --verde-100: rgba(70, 181, 129, 0.18);
  --verde-600: #5cc490;
  --amarelo-100: rgba(217, 160, 63, 0.18);
  --amarelo-700: #e0b45e;
  --vermelho-100: rgba(226, 115, 108, 0.18);
  --vermelho-600: #e8837c;

  --sombra: 0 10px 30px rgba(0, 0, 0, 0.45);
  --sombra-p: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* pontos em que os tokens acima eram usados como COR DE TEXTO ou fundo fixo */
:root[data-tema="escuro"] .tema-btn .icone-sol { display: none; }
:root[data-tema="escuro"] .tema-btn .icone-lua { display: block; }

:root[data-tema="escuro"] .topo { background: rgba(10, 17, 33, 0.92); }
:root[data-tema="escuro"] .secao--escura { background: #0a1730; }
:root[data-tema="escuro"] .rodape { background: #081226; }

:root[data-tema="escuro"] .aula,
:root[data-tema="escuro"] .btn--cta,
:root[data-tema="escuro"] .nav .btn,
:root[data-tema="escuro"] .passo__num,
:root[data-tema="escuro"] .mini-botao,
:root[data-tema="escuro"] .msg--user,
:root[data-tema="escuro"] .chat__entrada b,
:root[data-tema="escuro"] .plano__selo { color: #fff; }

:root[data-tema="escuro"] .secao--escura h2,
:root[data-tema="escuro"] .secao--escura h3,
:root[data-tema="escuro"] .assistente__lista strong,
:root[data-tema="escuro"] .rodape__marca strong,
:root[data-tema="escuro"] .contato__canais a { color: #fff; }

:root[data-tema="escuro"] .btn--secundario { color: var(--primaria); }
:root[data-tema="escuro"] .passo__num,
:root[data-tema="escuro"] .chat__entrada b { background: var(--azul-600); }

/* campos do formulário um tom abaixo do painel, para ter contorno visível */
:root[data-tema="escuro"] .campo input,
:root[data-tema="escuro"] .campo textarea,
:root[data-tema="escuro"] .campo select { background: #0e1830; }

/* o logotipo da Rforti precisa continuar sobre fundo branco real */
:root[data-tema="escuro"] .rodape__marca img { background: #ffffff; }

/* brilhos do hero mais discretos no escuro */
:root[data-tema="escuro"] .hero {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(88, 130, 220, 0.14), transparent 60%),
    radial-gradient(600px 400px at -10% 100%, rgba(224, 99, 42, 0.07), transparent 60%),
    var(--fundo);
}


/* Ordem e compactação da barra (v3): marca → nav → ações ---------------------- */
.marca { order: 0; }
.nav { order: 1; }
.topo__acoes { order: 2; }
.marca__sub { white-space: nowrap; }

@media (min-width: 1200px) {
  .nav { gap: 1.05rem; }
  .nav a { white-space: nowrap; font-size: 0.92rem; }
  .nav .btn { padding: 0.55rem 0.95rem; }
}


/* Impressão: nada de conteúdo oculto pela animação, sem barra nem formulário --- */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .topo, .tema-btn, .nav-toggle, .form { display: none !important; }
}