/* =========================================================================
   MeuEvento — site institucional
   Tokens copiados de docs/brand/tokens.css (oklch, hex de origem no comentário).
   Tema claro em :root — é o padrão, sempre. Tema escuro SÓ por
   [data-tema="escuro"], que o botão liga e o localStorage guarda.
   Regra dura: --marca é fundo ou acento; texto sobre ela é sempre
   --sobre-marca. Amarelo nunca é cor de texto sobre fundo claro.
   ========================================================================= */

/* ---------- Tokens: tema claro ---------- */
:root {
  --marca: oklch(0.8916 0.1569 93);           /* #ffd84d */
  --marca-clara: oklch(0.93 0.1171 96);       /* #ffe88a */
  --marca-escura: oklch(0.816 0.1553 91.2);   /* #e8be2e */
  --marca-suave: oklch(0.972 0.0427 94.1);    /* #fff6d6 */
  --sobre-marca: oklch(0.1871 0.0043 84.6);   /* #141311 */
  --fundo: oklch(0.9939 0.0082 91.5);         /* #fffdf7 */
  --superficie: oklch(1 0 0);                 /* #ffffff */
  --superficie-alta: oklch(0.9645 0.0098 87.5); /* #f6f3ec */
  --borda: oklch(0.9018 0.0187 86.2);         /* #e4ded1 */
  --borda-forte: oklch(0.6225 0.0253 84.6);   /* #8e8676 */
  --texto: oklch(0.1871 0.0043 84.6);         /* #141311 */
  --texto-suave: oklch(0.4663 0.0189 82.7);   /* #5f594e */
  --texto-fraco: oklch(0.5382 0.0221 80);     /* #756d60 */
  --foco: oklch(0.1871 0.0043 84.6);          /* #141311 */
  --sucesso: oklch(0.4769 0.0881 153.6);      /* #2f6b45 */
  --sucesso-suave: oklch(0.9477 0.0158 154.5);/* #e6f1e9 */
  --aviso: oklch(0.5085 0.1025 70.8);         /* #8a5a12 */
  --aviso-suave: oklch(0.9596 0.0322 81);     /* #fdf0da */
  --erro: oklch(0.4788 0.1589 28.8);          /* #a42b22 */
  --erro-suave: oklch(0.9478 0.0199 25.2);    /* #fbe9e7 */
  --tipo-prova: oklch(0.5121 0.1576 344.3);   /* #a1387c */
  --tipo-visita: oklch(0.4765 0.0849 241.4);  /* #2a6288 */
  --tipo-degustacao: oklch(0.5085 0.1025 70.8); /* #8a5a12 */
  --tipo-reuniao: oklch(0.377 0.0128 81.7);   /* #45413a */
  --tipo-diad: oklch(0.8916 0.1569 93);       /* #ffd84d */
  --tipo-vencimento: oklch(0.4788 0.1589 28.8); /* #a42b22 */
  --cinza-50: oklch(0.9645 0.0098 87.5);      /* #f6f3ec */
  --cinza-100: oklch(0.9347 0.0128 86.8);     /* #ede9e0 */
  --cinza-200: oklch(0.8865 0.0187 86.2);     /* #dfd9cc */

  --sombra-sutil: 0 1px 2px rgba(20, 19, 17, 0.06);
  --sombra-cartao: 0 2px 10px rgba(20, 19, 17, 0.08);
  --sombra-alta: 0 16px 40px rgba(20, 19, 17, 0.16);

  /* faixa escura da prova virtual — escura nos dois temas */
  --faixa-fundo: oklch(0.1871 0.0043 84.6);   /* #141311 */
  --faixa-texto: oklch(0.9939 0.0082 91.5);   /* #fffdf7 */
  --faixa-texto-suave: rgba(255, 253, 247, 0.86);
  --faixa-cartao: rgba(255, 253, 247, 0.06);
  --faixa-borda: rgba(255, 253, 247, 0.18);
  --faixa-tracejado: rgba(255, 253, 247, 0.4);
  --faixa-foco: oklch(0.8916 0.1569 93);      /* #ffd84d */

  /* texto sobre os blocos coloridos de compromisso no calendário */
  --ev-texto: oklch(0.9939 0.0082 91.5);      /* #fffdf7 */

  /* espaçamento — base 4px */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* raios */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px;
  --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;

  --traco-fino: 1px;
  --traco-forte: 2px;

  --font-display: Fraunces, 'Iowan Old Style', Georgia, serif;
  --font-sans: Karla, 'Segoe UI', system-ui, sans-serif;

  color-scheme: light;
}

/* ---------- Tokens: tema escuro ----------
   Só por escolha explícita (`data-tema="escuro"`), no bloco abaixo. O site NÃO segue o
   `prefers-color-scheme`: o padrão é claro para todo mundo, e escuro é decisão de quem
   clica no botão — pedido do Bruno em 24/09/2026. Quem chegava pela primeira vez num
   celular com o sistema no escuro via o site escuro sem ter pedido. */

:root[data-tema='escuro'] {
  --marca-suave: oklch(0.2625 0.0273 88.6);
  --fundo: oklch(0.1871 0.0043 84.6);
  --superficie: oklch(0.2319 0.0064 78.2);
  --superficie-alta: oklch(0.258 0.0086 75.2);
  --borda: oklch(0.3073 0.012 78.1);
  --borda-forte: oklch(0.5169 0.019 79.3);
  --texto: oklch(0.9939 0.0082 91.5);
  --texto-suave: oklch(0.753 0.0199 83.1);
  --texto-fraco: oklch(0.6499 0.0211 80.1);
  --foco: oklch(0.8916 0.1569 93);
  --sucesso: oklch(0.7944 0.0967 156.9);
  --sucesso-suave: oklch(0.2682 0.0264 157.7);
  --aviso: oklch(0.8059 0.1169 78);
  --aviso-suave: oklch(0.2677 0.0283 75.4);
  --erro: oklch(0.7572 0.114 26);
  --erro-suave: oklch(0.2439 0.0325 25.9);
  --tipo-prova: oklch(0.7883 0.1216 342.7);
  --tipo-visita: oklch(0.7998 0.0729 234.4);
  --tipo-degustacao: oklch(0.8059 0.1169 78);
  --tipo-reuniao: oklch(0.8044 0.0201 80.1);
  --tipo-vencimento: oklch(0.7572 0.114 26);
  --cinza-50: oklch(0.258 0.0086 75.2);
  --cinza-100: oklch(0.2916 0.0106 73.5);
  --cinza-200: oklch(0.3435 0.0138 76.4);

  --sombra-sutil: 0 1px 2px rgba(0, 0, 0, 0.5);
  --sombra-cartao: 0 2px 10px rgba(0, 0, 0, 0.55);
  --sombra-alta: 0 16px 40px rgba(0, 0, 0, 0.7);

  --faixa-fundo: oklch(0.2319 0.0064 78.2);
  --faixa-texto: oklch(0.9939 0.0082 91.5);
  --faixa-texto-suave: oklch(0.753 0.0199 83.1);
  --faixa-cartao: oklch(0.258 0.0086 75.2);
  --faixa-borda: oklch(0.3073 0.012 78.1);
  --faixa-tracejado: oklch(0.5169 0.019 79.3);

  --ev-texto: oklch(0.1871 0.0043 84.6);

  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 25px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
abbr[title] { text-decoration: none; }
cite { font-style: normal; }

:focus-visible {
  outline: var(--traco-forte) solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.faixa :focus-visible { outline-color: var(--faixa-foco); }
.cta :focus-visible { outline-color: var(--sobre-marca); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

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

.pular {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  background: var(--marca); color: var(--sobre-marca); font-weight: 700;
  transition: top 0.15s ease;
}
.pular:focus { top: var(--space-4); }

/* =========================================================================
   Tipografia e utilitários
   ========================================================================= */
h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 8vw, 60px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.02em;
}
h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.015em;
}
h3 { font-size: 18px; line-height: 24px; font-weight: 700; }

.lead { font-size: 17px; line-height: 26px; color: var(--texto-suave); max-width: 62ch; }
.nota { font-size: 13px; line-height: 20px; color: var(--texto-fraco); }
.nota a { text-decoration: underline; }

.etiqueta,
.sobretitulo {
  font-size: 11px; line-height: 16px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-fraco);
}
.sobretitulo--marca { color: var(--marca); }

.num, .tabular { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding-inline: var(--space-5); }

.secao { padding-block: var(--space-12); }
.secao--alta {
  background: var(--superficie-alta);
  border-block: var(--traco-fino) solid var(--borda);
}
.secao--marca { background: var(--marca-suave); }

.cabeca { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-8); }

.linha-titulo { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.linha-titulo > h2, .linha-titulo > h3 { flex-grow: 1; }

/* =========================================================================
   Botões, badges, chips
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-5);
  border: var(--traco-fino) solid transparent; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 15px; font-weight: 700; line-height: 1.2;
  text-align: center; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn--primario { background: var(--marca); color: var(--sobre-marca); box-shadow: var(--sombra-sutil); }
.btn--primario:hover { background: var(--marca-escura); }
.btn--secundario {
  background: transparent; color: var(--texto);
  border-color: var(--borda-forte); border-width: var(--traco-forte);
}
.btn--secundario:hover { background: var(--superficie-alta); }
.btn--inverso { background: var(--sobre-marca); color: var(--marca); }
.btn--inverso:hover { background: #000; }
.btn--contorno {
  background: transparent; color: var(--sobre-marca);
  border-color: var(--sobre-marca); border-width: var(--traco-forte);
}
.btn--contorno:hover { background: rgba(20, 19, 17, 0.08); }
.btn--bloco { width: 100%; }

:root[data-tema='escuro'] .btn--primario:hover { background: var(--marca-clara); }

.icone-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border: var(--traco-fino) solid var(--borda-forte); border-radius: var(--radius-md);
  background: transparent; color: var(--texto); cursor: pointer;
}
.icone-btn:hover { background: var(--superficie-alta); }

.icone {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.icone--grande { width: 26px; height: 26px; stroke-width: 1.5; }
.icone--zap { stroke: var(--sucesso); stroke-width: 2; width: 18px; height: 18px; }
.icone--ok { stroke: var(--sucesso); stroke-width: 2.5; width: 16px; height: 16px; }

.icone--lua { display: none; }
:root[data-tema='escuro'] .icone--sol { display: none; }
:root[data-tema='escuro'] .icone--lua { display: block; }

.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
  border: var(--traco-fino) solid transparent;
  font-size: 11px; line-height: 16px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.badge--prospeccao { background: var(--cinza-100); color: var(--texto-suave); }
.badge--proposta { background: var(--superficie-alta); color: var(--texto); border-color: var(--borda-forte); }
.badge--contratado { background: var(--marca); color: var(--sobre-marca); }
.badge--producao { background: var(--aviso-suave); color: var(--aviso); }
.badge--realizado { background: var(--sucesso-suave); color: var(--sucesso); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 34px; padding: var(--space-1) var(--space-4); border-radius: var(--radius-pill);
  background: var(--superficie); color: var(--texto);
  border: var(--traco-fino) solid var(--borda-forte);
  font-size: 13px; font-weight: 600;
}
.chip--ativo { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca-escura); }
.chip__contagem { font-variant-numeric: tabular-nums; opacity: 0.75; }

/* =========================================================================
   Placeholder trocável (.ph) — ver apps/site/README.md
   ========================================================================= */
.ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2); padding: var(--space-4);
  background: var(--cinza-50);
  border: var(--traco-fino) dashed var(--borda-forte);
  border-radius: var(--radius-lg);
  color: var(--texto-fraco); text-align: center;
  overflow: hidden; position: relative;
}
.ph__legenda { font-size: 12px; line-height: 16px; max-width: 26ch; }
.ph--preenchido { padding: 0; border-style: solid; border-color: var(--borda); background: var(--superficie); }
.ph--preenchido .ph__legenda { display: none; }
.ph--preenchido > .icone { display: none; }
.ph__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ph--logo { height: 56px; width: 100%; }
.ph--avatar { width: 56px; height: 56px; border-radius: var(--radius-pill); flex-shrink: 0; padding: var(--space-1); }
.ph--avatar .ph__legenda { font-size: 10px; }
.ph--capa { height: 150px; border-radius: 0; border-inline: 0; border-top: 0; }
.ph--ia { min-height: 200px; }

/* =========================================================================
   Cabeçalho
   ========================================================================= */
.cabecalho {
  position: sticky; top: 0; z-index: 40;
  background: var(--fundo);
  border-bottom: var(--traco-fino) solid var(--borda);
}
.cabecalho__linha {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 68px; padding-block: var(--space-2);
}

.marca { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--texto); flex-grow: 1; }
.marca__simbolo { width: 30px; height: 30px; flex-shrink: 0; }
.marca__nome {
  font-family: var(--font-display); font-size: 24px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1;
}

.menu { display: none; }
.menu a { font-size: 15px; font-weight: 600; color: var(--texto-suave); }
.menu a:hover { color: var(--texto); }

.cabecalho__acoes { display: flex; align-items: center; gap: var(--space-2); }
.cabecalho__cta { display: none; }

.menu[data-aberto='true'] {
  display: flex; flex-direction: column; gap: var(--space-1);
  position: absolute; left: 0; right: 0; top: 100%;
  padding: var(--space-4) var(--space-5) var(--space-6);
  background: var(--fundo); border-bottom: var(--traco-fino) solid var(--borda);
  box-shadow: var(--sombra-cartao);
}
.menu[data-aberto='true'] a {
  display: block; padding: var(--space-3) var(--space-2);
  font-size: 17px; color: var(--texto);
  border-bottom: var(--traco-fino) solid var(--borda);
}
.menu__cta { display: none; }
.menu[data-aberto='true'] .menu__cta {
  display: inline-flex; margin-top: var(--space-3); border-bottom: 0;
  color: var(--sobre-marca); font-size: 15px;
}

/* =========================================================================
   Hero
   ========================================================================= */
.hero { padding-top: var(--space-10); }
.hero__grade { display: grid; gap: var(--space-8); }
.hero__texto { display: flex; flex-direction: column; gap: var(--space-4); }
.hero__botoes { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-1); }

.janela {
  border: var(--traco-fino) solid var(--borda); border-radius: var(--radius-xl);
  background: var(--superficie); box-shadow: var(--sombra-alta); overflow: hidden;
}
.janela__barra {
  display: flex; align-items: center; gap: var(--space-2);
  /* a URL é uma palavra só: sem `contain` ela empurraria a largura mínima da
     página e criaria rolagem lateral no celular. */
  contain: inline-size;
  min-height: 38px; padding-inline: var(--space-4);
  background: var(--superficie-alta); border-bottom: var(--traco-fino) solid var(--borda);
}
.janela__ponto { width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--cinza-200); }
.janela__url {
  flex: 1 1 0; min-width: 0; margin-left: var(--space-2); font-size: 12px; color: var(--texto-fraco);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.janela__corpo { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.janela__titulo { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 600; }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.kpi {
  padding: var(--space-3); border: var(--traco-fino) solid var(--borda);
  border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-1);
}
.kpi--marca { background: var(--marca-suave); }
.kpi .etiqueta { color: var(--texto-suave); }
.kpi .num { font-size: 24px; line-height: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }

.progresso { display: flex; flex-direction: column; gap: var(--space-2); }
.progresso__trilho { height: 10px; border-radius: var(--radius-pill); background: var(--cinza-100); overflow: hidden; }
.progresso__preenchimento { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--marca); }
.progresso__legenda {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: 12px; line-height: 16px; color: var(--texto-suave);
}
.progresso__legenda strong { color: var(--texto); font-variant-numeric: tabular-nums; }

.compromissos { display: flex; flex-direction: column; gap: var(--space-3); }
.compromisso {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3); background: var(--superficie);
  border: var(--traco-fino) solid var(--borda); border-left: 4px solid var(--tipo-reuniao);
  border-radius: var(--radius-md);
}
.compromisso--prova { border-left-color: var(--tipo-prova); }
.compromisso--visita { border-left-color: var(--tipo-visita); }
.compromisso__hora { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 44px; }
.compromisso__titulo { font-size: 15px; line-height: 21px; font-weight: 600; }
.compromisso__meta { font-size: 12px; line-height: 16px; color: var(--texto-suave); margin-top: 2px; }

/* =========================================================================
   Programa de fundadoras
   ========================================================================= */
.secao.fundadoras { padding-block: var(--space-8); }
.fundadoras__linha { display: flex; flex-direction: column; gap: var(--space-5); }
.fundadoras__texto { flex: 1 1 auto; min-width: 0; }
.fundadoras__texto h2 { margin-top: var(--space-2); }
.fundadoras__texto .lead { margin-top: var(--space-3); }
.fundadoras__botoes { display: flex; flex-direction: column; gap: var(--space-3); }

/* Rótulo de mock: deixa explícito que a tela é exemplo, não cliente real. */
.nota--exemplo { margin-top: var(--space-3); font-style: italic; }

/* =========================================================================
   Como funciona
   ========================================================================= */
.passos { display: grid; gap: var(--space-6); }
.passo { display: flex; gap: var(--space-4); align-items: flex-start; }
.passo__num {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-pill);
  background: var(--marca); color: var(--sobre-marca);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.passo h3 { margin-bottom: var(--space-2); }
.passo p { font-size: 15px; line-height: 24px; color: var(--texto-suave); }

/* =========================================================================
   Agenda
   ========================================================================= */
.agenda__grade { display: grid; gap: var(--space-8); }
.agenda__texto { display: flex; flex-direction: column; gap: var(--space-4); }

.lista-marcada { display: flex; flex-direction: column; gap: var(--space-4); }
.lista-marcada li { position: relative; padding-left: var(--space-5); font-size: 15px; line-height: 24px; }
.lista-marcada li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--texto);
}

.alerta {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--aviso-suave); color: var(--aviso);
  font-size: 13px; line-height: 20px; font-weight: 600;
}
.alerta .icone { stroke-width: 2; width: 18px; height: 18px; margin-top: 1px; }

.cartao {
  background: var(--superficie); border: var(--traco-fino) solid var(--borda);
  border-radius: var(--radius-lg); padding: var(--space-4);
  box-shadow: var(--sombra-cartao);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.cartao__titulo { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; }
.cartao__titulo--sans { font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 700; }

.cal { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.cal th {
  padding-bottom: var(--space-1);
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texto-fraco); text-align: center;
}
.cal td {
  vertical-align: top; height: 46px; padding: 3px;
  border: var(--traco-fino) solid var(--borda); border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600;
}
.cal__dia { display: block; text-align: center; }
.cal--fora { color: var(--texto-fraco); font-weight: 400; }
.cal--conflito { border: var(--traco-forte) solid var(--aviso); background: var(--aviso-suave); font-weight: 700; }
.cal__conflito { display: block; margin-top: 2px; font-size: 10px; line-height: 13px; font-weight: 700; color: var(--aviso); }

.ev {
  display: block; margin-top: 3px; padding: 2px 4px;
  border-radius: var(--radius-xs);
  font-size: 10px; line-height: 13px; font-weight: 600;
  color: var(--ev-texto);
  overflow: hidden;
}
.ev--prova { background: var(--tipo-prova); }
.ev--visita { background: var(--tipo-visita); }
.ev--degustacao { background: var(--tipo-degustacao); }
.ev--reuniao { background: var(--tipo-reuniao); }
.ev--vencimento { background: var(--tipo-vencimento); }
.ev--diad { background: var(--marca); color: var(--sobre-marca); font-weight: 700; }

.legenda { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 12px; color: var(--texto-suave); }
.legenda li { display: flex; align-items: center; gap: var(--space-1); }
.legenda__cor { width: 10px; height: 10px; border-radius: 3px; }
.legenda__cor--prova { background: var(--tipo-prova); }
.legenda__cor--visita { background: var(--tipo-visita); }
.legenda__cor--degustacao { background: var(--tipo-degustacao); }
.legenda__cor--reuniao { background: var(--tipo-reuniao); }
.legenda__cor--vencimento { background: var(--tipo-vencimento); }
.legenda__cor--diad { background: var(--marca); }

/* No celular o compromisso vira barra colorida; o texto continua no DOM
   para leitor de tela. */
@media (max-width: 719px) {
  .chip--oculto-mobile { display: none; }
  .ev {
    width: 62%; height: 5px; margin: 3px auto 0; padding: 0;
    text-indent: -200vw; white-space: nowrap; border-radius: 3px;
  }
  .cal__dia { text-align: center; }
  .cal__conflito { font-size: 9px; }
}

/* =========================================================================
   Catálogo
   ========================================================================= */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.tile {
  height: 100%;
  background: var(--superficie); border: var(--traco-fino) solid var(--borda);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sombra-cartao);
  display: flex; flex-direction: column;
}
.tile__corpo { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.tile__nome { font-size: 15px; line-height: 21px; font-weight: 600; }
.tile__meta { font-size: 12px; line-height: 16px; color: var(--texto-fraco); }
.tile__preco { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: auto; }
.tile__preco span { font-weight: 400; color: var(--texto-suave); }

.tres-notas { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.nota-caixa {
  padding: var(--space-5); border: var(--traco-fino) solid var(--borda);
  border-radius: var(--radius-lg); background: var(--superficie-alta);
}
.secao--alta .nota-caixa { background: var(--superficie); }
.nota-caixa h3 { font-size: 16px; line-height: 22px; font-weight: 600; margin-bottom: var(--space-1); }
.nota-caixa p { font-size: 14px; line-height: 22px; color: var(--texto-suave); }

/* =========================================================================
   Do orçamento ao aceite
   ========================================================================= */
.tres-colunas { display: grid; gap: var(--space-10); align-items: start; }
.coluna { display: flex; flex-direction: column; gap: var(--space-4); }
.coluna h3 { font-size: 21px; line-height: 28px; }
.coluna > p { font-size: 15px; line-height: 24px; color: var(--texto-suave); }

.proposta-linha { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }
.proposta {
  flex: 1 1 220px; max-width: 280px;
  background: var(--superficie); border: var(--traco-fino) solid var(--borda);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--sombra-alta);
}
.proposta__topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--org-cor, var(--marca)); color: #141311;
}
.proposta__marca { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 14px; }
.proposta__selo {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: #141311; color: var(--org-cor, var(--marca));
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.proposta__rotulo { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; }
.proposta__corpo { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.proposta__item {
  display: flex; justify-content: space-between; gap: var(--space-3);
  font-size: 13px; color: var(--texto-suave); font-variant-numeric: tabular-nums;
}
.proposta__item strong { color: var(--texto); }
.proposta__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  padding-top: var(--space-3); border-top: var(--traco-fino) solid var(--borda);
  font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.proposta-lado { display: flex; flex-direction: column; gap: var(--space-3); flex: 1 1 200px; }
.zap {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-xs);
  background: var(--sucesso-suave); color: var(--texto);
  font-size: 13px; line-height: 20px;
}
.zap__hora { font-size: 11px; color: var(--texto-suave); white-space: nowrap; }

.horarios__dias { display: flex; gap: var(--space-2); }
.dia {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-2) 0; border-radius: var(--radius-md);
  border: var(--traco-fino) solid var(--borda-forte); background: var(--superficie);
  font-size: 12px; font-weight: 600;
}
.dia__num { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dia--ativo { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca-escura); }
.dia--vazio { color: var(--texto-fraco); border-style: dashed; }
.horarios__grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.hora {
  padding: var(--space-3) 0; border-radius: var(--radius-md); text-align: center;
  border: var(--traco-fino) solid var(--borda-forte); background: var(--superficie);
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.hora--escolhida { background: var(--marca); color: var(--sobre-marca); border-color: var(--marca-escura); }
.hora--ocupada { color: var(--texto-fraco); background: var(--cinza-50); border-color: var(--borda); text-decoration: line-through; }

.auto__lista { display: flex; flex-direction: column; gap: var(--space-3); }
.auto__lista li { display: flex; align-items: center; gap: var(--space-3); font-size: 15px; }
.auto__lista li > span:first-child { flex-grow: 1; }
.auto__desligado {
  padding-top: var(--space-3); border-top: var(--traco-fino) solid var(--borda);
  color: var(--texto-suave);
}
.switch {
  width: 44px; height: 24px; flex-shrink: 0; border-radius: var(--radius-pill);
  background: var(--cinza-200); display: flex; align-items: center; padding: 3px;
}
.switch::after { content: ''; width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--superficie); }
.switch--on { background: var(--marca); justify-content: flex-end; }
.switch--on::after { background: var(--sobre-marca); }

/* =========================================================================
   Prova virtual por IA — faixa escura
   ========================================================================= */
.faixa { background: var(--faixa-fundo); color: var(--faixa-texto); border-block: var(--traco-fino) solid var(--faixa-borda); }
.faixa .lead { color: var(--faixa-texto-suave); }
.faixa .ph {
  background: transparent; border-color: var(--faixa-tracejado);
  color: var(--faixa-texto-suave);
}
.faixa .cabeca { gap: var(--space-5); }

.passos-ia { display: grid; gap: var(--space-5); }
.passo-ia {
  background: var(--faixa-cartao); border: var(--traco-fino) solid var(--faixa-borda);
  border-radius: var(--radius-xl); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.passo-ia h3 { font-size: 21px; line-height: 28px; }
.passo-ia > p:last-child { font-size: 14px; line-height: 22px; color: var(--faixa-texto-suave); }

.selo-ia {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: var(--marca); color: var(--sobre-marca);
  font-size: 11px; line-height: 16px; font-weight: 600; white-space: nowrap;
}

.consentimento {
  display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start;
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: var(--traco-fino) solid var(--faixa-borda);
}
.consentimento p { font-size: 14px; line-height: 22px; color: var(--faixa-texto-suave); max-width: 72ch; }
.consentimento strong { color: var(--faixa-texto); }

/* =========================================================================
   Convidados, RSVP e app
   ========================================================================= */
.app__grade { display: grid; gap: var(--space-8); align-items: center; }
.app__texto { display: flex; flex-direction: column; gap: var(--space-4); }

.grupos { display: flex; flex-direction: column; gap: var(--space-2); }
.grupos li {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3); border: var(--traco-fino) solid var(--borda); border-radius: var(--radius-md);
}
.grupos__nome { flex-grow: 1; font-size: 14px; font-weight: 600; }
.grupos__meta { font-size: 13px; color: var(--texto-suave); }

.app__mock { display: flex; justify-content: center; }
.fone {
  width: 100%; max-width: 300px;
  border-radius: 36px; border: 10px solid var(--texto);
  background: var(--superficie); box-shadow: var(--sombra-alta);
  overflow: hidden; display: flex; flex-direction: column;
}
.fone__topo { padding: var(--space-5) var(--space-4) var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.fone__icone { width: 28px; height: 28px; flex-shrink: 0; }
.fone__nome { font-size: 14px; font-weight: 700; flex-grow: 1; }
.fone__ponto { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--erro); }
.fone__contagem {
  margin-inline: var(--space-4); padding: var(--space-5);
  border-radius: var(--radius-lg); background: var(--marca); color: var(--sobre-marca); text-align: center;
}
.fone__contagem strong {
  display: block; font-family: var(--font-display); font-size: 42px; line-height: 44px;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.fone__contagem span { font-size: 13px; font-weight: 600; }
.fone__corpo { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex-grow: 1; }
.fone__corpo .etiqueta:not(:first-child) { margin-top: var(--space-2); }
.fone__item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3); border: var(--traco-fino) solid var(--borda);
  border-radius: var(--radius-md); font-size: 13px; line-height: 20px;
}
.fone__item span { color: var(--texto-fraco); }

.tabbar {
  display: flex; margin: 0 var(--space-3) var(--space-4);
  background: var(--superficie); border: var(--traco-fino) solid var(--borda);
  border-radius: var(--radius-lg); padding: var(--space-2);
}
.tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--space-2) 0; border-radius: var(--radius-md);
  color: var(--texto-fraco); font-size: 9px; font-weight: 600; text-align: center;
}
.tab--ativo { color: var(--texto); background: var(--marca-suave); }
.tab svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* =========================================================================
   Preços
   ========================================================================= */
.planos { display: grid; gap: var(--space-5); align-items: stretch; }
.plano {
  background: var(--superficie); border: var(--traco-fino) solid var(--borda);
  border-radius: var(--radius-xl); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.plano--destaque { background: var(--marca-suave); border: var(--traco-forte) solid var(--marca-escura); }
.plano h3 { font-size: 21px; line-height: 28px; }
.plano__preco { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.plano__preco strong { font-family: var(--font-display); font-size: 36px; line-height: 42px; font-weight: 600; }
.plano__preco span { font-size: 14px; color: var(--texto-suave); }
.plano__resumo { font-size: 14px; line-height: 22px; color: var(--texto-suave); }
.plano__itens { display: flex; flex-direction: column; gap: var(--space-2); font-size: 14px; line-height: 22px; }
.plano__itens li { position: relative; padding-left: var(--space-5); }
.plano__itens li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--borda-forte);
}
.plano .btn { margin-top: auto; }

/* =========================================================================
   CTA final
   ========================================================================= */
.cta { background: var(--marca); color: var(--sobre-marca); }
.cta__grade { display: grid; gap: var(--space-6); align-items: center; }
.cta p { font-size: 17px; line-height: 26px; margin-top: var(--space-3); max-width: 56ch; }
.cta__botoes { display: flex; flex-direction: column; gap: var(--space-3); }

/* =========================================================================
   Rodapé
   ========================================================================= */
.rodape { padding-block: var(--space-12) var(--space-8); background: var(--fundo); }
.rodape__grade { display: grid; gap: var(--space-8); }
.rodape__marca { display: flex; flex-direction: column; gap: var(--space-3); max-width: 340px; }
.rodape__marca p { font-size: 14px; line-height: 22px; color: var(--texto-suave); }
.rodape__coluna { display: flex; flex-direction: column; gap: var(--space-3); }
.rodape__coluna a { font-size: 14px; color: var(--texto-suave); }
.rodape__coluna a:hover { color: var(--texto); }
.rodape__privacidade { max-width: 340px; }
.rodape__base { margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--traco-fino) solid var(--borda); }

/* =========================================================================
   Tablet
   ========================================================================= */
@media (min-width: 720px) {
  .wrap { padding-inline: var(--space-10); }
  .secao { padding-block: var(--space-16); }
  .hero { padding-top: var(--space-12); }

  .cabeca { flex-direction: row; align-items: flex-end; gap: var(--space-10); margin-bottom: var(--space-10); }
  .cabeca > :first-child { flex: 1 1 52%; }
  .cabeca > :last-child { flex: 1 1 44%; }

  .hero__botoes { flex-direction: row; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .janela__corpo { padding: var(--space-6); }

  .fundadoras__linha { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-10); }
  .fundadoras__botoes { flex-direction: row; flex-shrink: 0; }

  .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tres-notas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .tres-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .passos-ia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .planos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cta__grade { grid-template-columns: 1fr auto; }
  .cta__botoes { min-width: 220px; }
  .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }

  .cal td { height: 76px; padding: var(--space-1); }
  .cal th { font-size: 11px; letter-spacing: 0.08em; }
  .cal__dia { text-align: left; padding-left: 2px; }

  .consentimento { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-8); }
  .consentimento .btn { flex-shrink: 0; }
}

/* =========================================================================
   Desktop
   ========================================================================= */
@media (min-width: 1024px) {
  .secao { padding-block: var(--space-24); }
  .hero { padding-top: var(--space-20); }
  html { scroll-padding-top: 100px; }

  .cabecalho__linha { min-height: 84px; gap: var(--space-8); }
  .marca { flex-grow: 0; }
  .marca__simbolo { width: 34px; height: 34px; }
  .marca__nome { font-size: 27px; }
  .menu { display: flex; align-items: center; gap: var(--space-6); flex-grow: 1; }
  .menu__entrar { margin-left: auto; }
  .menu__cta { display: none; }
  .cabecalho__cta { display: inline-flex; }
  .menu-btn { display: none; }

  .hero__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-16); align-items: center; }
  .hero__texto { gap: var(--space-6); }
  .janela__titulo { font-size: 26px; line-height: 32px; }
  .kpi .num { font-size: 28px; line-height: 32px; }

  .passos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
  .passo { flex-direction: column; gap: var(--space-3); }

  .agenda__grade { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
  .agenda__cartao { padding: var(--space-6); }

  .tres-colunas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
  .app__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--space-16); }
  .passos-ia { gap: var(--space-6); }
  .passo-ia { padding: var(--space-6); }
  .planos { gap: var(--space-6); }
  .plano { padding: var(--space-8); }
  .tiles { gap: var(--space-5); }
  .tile__corpo { padding: var(--space-4); }
  .tile__nome { font-size: 16px; line-height: 22px; }
  .ph--capa { height: 180px; }
  .cta { padding-block: var(--space-20); }
}