/* ============================================================================
   DESIGN SYSTEM · CONSULTORIA ESTRATÉGICA GRATUITA · Reconecta
   v1 · 2026-09-27

   Nasce do código da v2-var1 (supercaso/avaliacao-gratuita/v2-var1, molde-aja.css)
   e do logo do lacre com o símbolo da Reconecta. As três identidades são as
   variações já mapeadas da marca (docs/identidade-visual-mapeada.md do Copywriter):
     ID 1 · Noite  (navy, agendamento)
     ID 2 · Creme  (claro, a dobra da v2-var1)
     ID 3 · Bordô  (vermelho-deep e ouro, convite de evento)

   Como usar
     1. Fontes: Playfair Display (400, 600, 700 e itálicos) + Montserrat (400 a 800).
     2. Importar este arquivo.
     3. Marcar o <body> ou cada bloco com data-id="creme" | "noite" | "bordo".
        Blocos podem alternar de identidade na mesma página (creme -> noite -> creme).
   ========================================================================= */

/* ── Paleta base (nomes fixos, não mudam entre identidades) ───────────── */
:root {
  --ce-bordo: #6B0F0F;          /* bordô Reconecta: marca, fundo da ID 3 */
  --ce-bordo-fundo: #4C000D;    /* vinho: faixa, rodapé, profundidade */
  --ce-creme: #F6F3EE;          /* fundo claro principal */
  --ce-creme-2: #EFEDE0;        /* fundo claro alternado */
  --ce-creme-3: #DEDAC3;        /* borda e divisor sobre creme */
  --ce-creme-ouro: #FFE1A6;     /* destaque sobre navy, texto de marca no escuro */
  --ce-ouro: #EECE66;           /* ouro: destaque e botão da ID 3 */
  --ce-ouro-fundo: #C9A53D;     /* ouro escuro: borda, sombra, pontos do marca-texto */
  --ce-ouro-filete: #B8913F;    /* SÓ linha e ornamento. Nunca texto (2,6:1 sobre creme) */
  --ce-navy: #0E0F2D;           /* fundo da ID 1 */
  --ce-navy-2: #1A1B3D;         /* card e camada sobre navy */
  --ce-tinta: #0B0202;          /* texto sobre claro */
  --ce-vermelho-acao: #D3111A;  /* SÓ o botão principal. Nunca texto, ícone ou fundo de seção */
  --ce-vermelho-acao-hover: #B40D14;
  --ce-branco: #FFFFFF;

  /* Tipografia */
  --ce-fonte-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ce-fonte-texto: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ce-t-hero: clamp(29px, 4.9vw, 68px);
  --ce-t-secao: clamp(27px, 4.1vw, 56px);
  --ce-t-card: clamp(22px, 2.4vw, 30px);
  --ce-t-numero: clamp(34px, 4vw, 52px);
  --ce-t-texto: clamp(17px, 1.35vw, 20px);
  --ce-t-texto-menor: clamp(16px, 1.25vw, 18px);
  --ce-t-rotulo: 13px;
  --ce-t-botao: 18px;

  /* Medidas */
  --ce-container: 1000px;
  --ce-container-texto: 930px;
  --ce-gap: 20px;
  --ce-bloco-pad: 80px;
  --ce-lateral: 20px;
  --ce-raio-botao: 4px;
  --ce-raio-midia: 8px;
  --ce-raio-card: 22px;
  --ce-sombra-midia: 0 20px 60px rgba(11, 2, 2, 0.16);
}
@media (max-width: 560px) {
  :root { --ce-bloco-pad: 56px; }
}

/* ── Identidades (mapeiam papéis para cores) ───────────────────────────── */
[data-id="creme"] {
  --fundo: var(--ce-creme);
  --fundo-alt: var(--ce-creme-2);
  --texto: var(--ce-tinta);
  --texto-suave: rgba(11, 2, 2, 0.72);
  --marca: var(--ce-bordo);
  --titulo: var(--ce-tinta);
  --rotulo: var(--ce-bordo);
  --filete: var(--ce-ouro-filete);
  --realce-fundo: rgba(238, 206, 102, 0.58);
  --realce-borda: rgba(201, 165, 61, 0.62);
  --realce-ponto: rgba(201, 165, 61, 0.85);
  --realce-texto: inherit;
  --acao-fundo: var(--ce-vermelho-acao);
  --acao-fundo-hover: var(--ce-vermelho-acao-hover);
  --acao-texto: var(--ce-branco);
  --acao-borda: transparent;
  --acao-sombra: 0 10px 30px rgba(211, 17, 26, 0.28);
  --card-fundo: var(--ce-branco);
  --card-borda: var(--ce-creme-3);
  --card-divisor: var(--ce-creme-3);
  --numero: var(--ce-bordo);
}
[data-id="noite"] {
  --fundo: var(--ce-navy);
  --fundo-alt: var(--ce-navy-2);
  --texto: var(--ce-branco);
  --texto-suave: rgba(255, 255, 255, 0.78);
  --marca: var(--ce-creme-ouro);
  --titulo: var(--ce-branco);
  --rotulo: var(--ce-creme-ouro);
  --filete: rgba(255, 225, 166, 0.45);
  --realce-fundo: rgba(255, 225, 166, 0.46);
  --realce-borda: rgba(255, 225, 166, 0.64);
  --realce-ponto: rgba(255, 225, 166, 0.84);
  --realce-texto: inherit;
  --acao-fundo: var(--ce-vermelho-acao);
  --acao-fundo-hover: var(--ce-vermelho-acao-hover);
  --acao-texto: var(--ce-branco);
  --acao-borda: var(--ce-creme-ouro);
  --acao-sombra: 0 10px 30px rgba(211, 17, 26, 0.34);
  --card-fundo: rgba(255, 255, 255, 0.05);
  --card-borda: rgba(255, 225, 166, 0.14);
  --card-divisor: rgba(255, 225, 166, 0.14);
  --numero: var(--ce-creme-ouro);
}
[data-id="bordo"] {
  --fundo: var(--ce-bordo);
  --fundo-alt: var(--ce-bordo-fundo);
  --texto: var(--ce-creme);
  --texto-suave: rgba(246, 243, 238, 0.8);
  --marca: var(--ce-ouro);
  --titulo: var(--ce-creme);
  --rotulo: var(--ce-ouro);
  --filete: rgba(238, 206, 102, 0.55);
  --realce-fundo: rgba(238, 206, 102, 0.14);
  --realce-borda: rgba(238, 206, 102, 0.45);
  --realce-ponto: var(--ce-ouro);
  --realce-texto: var(--ce-ouro);
  --acao-fundo: linear-gradient(180deg, #F4D578 0%, var(--ce-ouro) 55%, var(--ce-ouro-fundo) 100%);
  --acao-fundo-hover: linear-gradient(180deg, #F7DD8C 0%, #F1D474 55%, #CFAC44 100%);
  --acao-texto: #3A0505;
  --acao-borda: transparent;
  --acao-sombra: 0 10px 30px rgba(201, 165, 61, 0.32);
  --card-fundo: rgba(76, 0, 13, 0.45);
  --card-borda: rgba(238, 206, 102, 0.22);
  --card-divisor: rgba(238, 206, 102, 0.22);
  --numero: var(--ce-ouro);
}

/* ── Bloco ─────────────────────────────────────────────────────────────── */
.ce-bloco {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--ce-fonte-texto);
  padding: var(--ce-bloco-pad) var(--ce-lateral);
  display: flex;
  justify-content: center;
}
.ce-bloco--alt { background: var(--fundo-alt); }
.ce-bloco__inner {
  width: 100%;
  max-width: var(--ce-container);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ce-gap);
}

/* ── Logo ──────────────────────────────────────────────────────────────── */
/* Creme: logo em relevo. Noite: chapado creme. Bordô: lacre de ouro + nome creme. */
.ce-logo { display: block; width: 380px; max-width: 100%; height: auto; }
@media (max-width: 560px) { .ce-logo { width: 300px; } }

/* ── Tipografia ────────────────────────────────────────────────────────── */
.ce-titulo {
  font-family: var(--ce-fonte-titulo);
  font-weight: 400;
  color: var(--titulo);
  letter-spacing: -0.02em;
  line-height: 1.16;
  text-align: center;
  text-wrap: balance;
  margin: 0;
}
.ce-titulo--hero  { font-size: var(--ce-t-hero); }
.ce-titulo--secao { font-size: var(--ce-t-secao); }
.ce-titulo--card  { font-size: var(--ce-t-card); line-height: 1.2; text-align: left; }
.ce-titulo em, .ce-titulo i { font-style: italic; }

.ce-texto {
  font-size: var(--ce-t-texto);
  line-height: 1.55;
  letter-spacing: -0.01em;
  max-width: 720px;
  text-align: center;
  margin: 0;
}
.ce-texto--menor { font-size: var(--ce-t-texto-menor); }
.ce-texto--suave { color: var(--texto-suave); }
.ce-texto strong { font-weight: 700; }

/* Rótulo: a mesma gramática do GRATUITA do logo (caixa alta espaçada + filete) */
.ce-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: var(--ce-t-rotulo);
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--rotulo);
  line-height: 1.4;
}
.ce-rotulo::after { content: ""; width: 56px; height: 1px; background: var(--filete); }
.ce-rotulo--centro::before { content: ""; width: 56px; height: 1px; background: var(--filete); }

/* ── Marca-texto (assinatura da página) ───────────────────────────────── */
.ce-realce {
  background: var(--realce-fundo);
  color: var(--realce-texto);
  padding: 1px 8px;
  border-left: 1px solid var(--realce-borda);
  border-right: 1px solid var(--realce-borda);
  position: relative;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ce-realce::before, .ce-realce::after {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--realce-ponto); pointer-events: none;
}
.ce-realce::after  { top: -4px; left: -4px; }
.ce-realce::before { right: -4px; bottom: -4px; }

/* ── Botão ─────────────────────────────────────────────────────────────── */
.ce-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  background: var(--acao-fundo);
  color: var(--acao-texto);
  border: 1px solid var(--acao-borda);
  font-family: var(--ce-fonte-texto);
  font-size: var(--ce-t-botao);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  padding: 19px 44px;
  border-radius: var(--ce-raio-botao);
  box-shadow: var(--acao-sombra);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.ce-botao:hover { background: var(--acao-fundo-hover); transform: translateY(-1px); }
.ce-botao:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }
.ce-botao svg { flex-shrink: 0; }
@media (max-width: 560px) {
  .ce-botao { width: 100%; padding: 17px 20px; font-size: 16px; }
}

/* Botão secundário: contorno na cor da marca, para ação que não é a principal */
.ce-botao--contorno {
  background: transparent; color: var(--marca); border-color: var(--marca); box-shadow: none;
}
.ce-botao--contorno:hover { background: transparent; }

/* ── Card com itens (bloco "o que tu leva") ───────────────────────────── */
.ce-card {
  background: var(--card-fundo);
  border: 1px solid var(--card-borda);
  border-radius: var(--ce-raio-card);
  padding: 40px 44px;
  display: flex; flex-direction: column;
  width: 100%;
}
.ce-card__item {
  display: flex; gap: 18px; align-items: flex-start; padding: 20px 0;
  font-size: var(--ce-t-texto-menor); line-height: 1.55; color: var(--texto-suave);
}
.ce-card__item + .ce-card__item { border-top: 1px solid var(--card-divisor); }
.ce-card__marca { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; color: var(--marca); }
@media (max-width: 560px) { .ce-card { padding: 26px 22px; border-radius: 16px; } }

/* ── Citação de cliente ───────────────────────────────────────────────── */
.ce-citacao {
  margin: 0; max-width: 720px;
  font-family: var(--ce-fonte-titulo); font-style: italic;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.4; color: var(--titulo);
  text-align: center; text-wrap: balance;
}
.ce-citacao cite {
  display: block; margin-top: 14px; font-family: var(--ce-fonte-texto); font-style: normal;
  font-size: var(--ce-t-rotulo); font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--rotulo);
}

/* ── Números ──────────────────────────────────────────────────────────── */
.ce-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; width: 100%; }
.ce-numero { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.ce-numero b {
  font-family: var(--ce-fonte-titulo); font-weight: 600; font-size: var(--ce-t-numero);
  color: var(--numero); line-height: 1; font-variant-numeric: lining-nums tabular-nums;
}
.ce-numero span { font-size: 14px; line-height: 1.45; color: var(--texto-suave); }

/* ── Separador ────────────────────────────────────────────────────────── */
/* Filete com losango no centro. Na ID 3 vira a estrela do convite (─── ✦ ───). */
.ce-separador { display: flex; align-items: center; gap: 14px; width: min(320px, 100%); color: var(--filete); }
.ce-separador::before, .ce-separador::after { content: ""; flex: 1; height: 1px; background: var(--filete); }
.ce-separador span { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); font-size: 0; line-height: 0; }
[data-id="bordo"] .ce-separador span { width: auto; height: auto; background: none; transform: none; font-size: 14px; line-height: 1; color: var(--ce-ouro); }

/* ── Mídia ────────────────────────────────────────────────────────────── */
.ce-midia { width: 100%; max-width: 760px; border-radius: var(--ce-raio-midia); overflow: hidden; box-shadow: var(--ce-sombra-midia); }