/*
 * Laboratorio opt-in de coerencia visual.
 * Este arquivo nao altera a versao padrao: todas as regras dependem da classe
 * adicionada por coherence-lab.js quando a URL contem ?coherence=1.
 */

html.coherence-lab {
  --coherence-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --coherence-sans: "Segoe UI", Arial, sans-serif;
  --coherence-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --coherence-wine: #590b19;
  --coherence-wine-deep: #310710;
  --coherence-coral: #e3422c;
  --coherence-gold: #d8a24a;
  --coherence-ivory: #fff8ee;
}

/* Identificacao temporaria para impedir confusao com o baseline durante o review. */
html.coherence-lab body::before {
  content: "REVIS\00c3O \00b7  V1 RESPONSIVA";
  position: fixed;
  z-index: 2147483647;
  top: 12px;
  right: 12px;
  padding: 7px 10px 6px;
  border: 1px solid rgba(226, 171, 78, .72);
  border-radius: 999px;
  color: #fff8ee;
  background: rgba(49, 7, 16, .88);
  box-shadow: 0 8px 24px rgba(30, 3, 8, .28);
  font-family: var(--coherence-sans);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .14em;
  line-height: 1;
  pointer-events: none;
  text-transform: uppercase;
}

/*
 * Sistema tipografico:
 * - Playfair para a voz editorial;
 * - Oswald apenas nos dois picos graficos;
 * - Segoe/Arial para navegacao, rotulos e conversao.
 */
html.coherence-lab #prova-ao-vivo .live-proof__copy h2,
html.coherence-lab #eventos .eventos-heading,
html.coherence-lab #eventos .mobile-heading,
html.coherence-lab #artista .artist-section__story h2,
html.coherence-lab #marcas-atendidas .marcas-title,
html.coherence-lab #como-funciona .process-faq__intro h2,
html.coherence-lab #como-funciona .process-faq__step-number,
html.coherence-lab #como-funciona .process-faq__step-copy h3,
html.coherence-lab #como-funciona .process-faq__accordion-header h3,
html.coherence-lab #como-funciona .process-faq__accordion summary,
html.coherence-lab #briefing .briefing__support {
  font-family: var(--coherence-serif);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html.coherence-lab #formatos-repertorio .formatos-repertorio__headline h2,
html.coherence-lab #formatos-repertorio .formatos-repertorio__group h3,
html.coherence-lab #formatos-repertorio .formatos-repertorio__together h3,
html.coherence-lab #briefing .briefing__statement h2 {
  font-family: var(--coherence-display);
  font-synthesis: none;
}

/*
 * Eventos: os nomes ganham uma sans condensada com personalidade, ligando a
 * elegancia editorial desta secao ao pulso brasileiro da secao seguinte.
 */
html.coherence-lab #eventos .event-label strong,
html.coherence-lab #eventos .mobile-event-copy strong {
  font-family: var(--coherence-display);
  font-weight: 480;
  letter-spacing: .015em;
  text-transform: none;
}

/* Centro optico do quadro corporativo no artboard desktop. */
html.coherence-lab #eventos .corporate-label {
  --label-x: 62%;
}

html.coherence-lab #prova-ao-vivo .live-proof__eyebrow,
html.coherence-lab #eventos .eyebrow,
html.coherence-lab #eventos .mobile-eyebrow,
html.coherence-lab #artista .artist-section__eyebrow,
html.coherence-lab #como-funciona .process-faq__eyebrow,
html.coherence-lab #briefing .briefing__eyebrow,
html.coherence-lab #briefing .briefing__form-eyebrow {
  font-family: var(--coherence-sans);
  font-weight: 700;
}

/* Uma familia unica para os tres CTAs de conversao; acoes locais ficam intactas. */
html.coherence-lab #como-funciona .process-faq__cta,
html.coherence-lab #briefing .briefing__submit {
  color: var(--coherence-ivory);
  border-color: rgba(226, 171, 78, .88);
  background:
    radial-gradient(circle at 22% 8%, rgba(255, 111, 72, .34), transparent 34%),
    linear-gradient(112deg, var(--coherence-wine-deep) 0%, var(--coherence-wine) 54%, var(--coherence-coral) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 221, 153, .14),
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 14px 34px rgba(82, 9, 20, .24);
  font-family: var(--coherence-sans);
  text-shadow: 0 1px 0 rgba(45, 3, 9, .28);
}

html.coherence-lab #como-funciona .process-faq__cta:hover,
html.coherence-lab #briefing .briefing__submit:hover {
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-2px);
}

html.coherence-lab #como-funciona .process-faq__cta:active,
html.coherence-lab #briefing .briefing__submit:active {
  filter: brightness(.98);
  transform: translateY(0) scale(.99);
}

html.coherence-lab #como-funciona .process-faq__cta:focus-visible,
html.coherence-lab #briefing .briefing__submit:focus-visible {
  outline: 3px solid rgba(255, 218, 143, .94);
  outline-offset: 4px;
}

/*
 * Passagens de cor: o Pulso abre o arco de energia e o Briefing o fecha.
 * As faixas sao finas para conectar os blocos sem virar um novo componente.
 */
html.coherence-lab #formatos-repertorio::after,
html.coherence-lab #como-funciona::after {
  content: "";
  position: absolute;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(3px, .34vw, 6px);
  pointer-events: none;
}

html.coherence-lab #formatos-repertorio::after {
  background: linear-gradient(
    90deg,
    rgba(19, 74, 200, .76),
    rgba(81, 206, 139, .82) 31%,
    rgba(229, 164, 45, .9) 65%,
    rgba(241, 74, 54, .86)
  );
  box-shadow: 0 4px 18px rgba(116, 30, 31, .2);
}

html.coherence-lab #como-funciona::after {
  background: linear-gradient(
    90deg,
    rgba(91, 13, 25, .88),
    rgba(216, 162, 74, .9) 52%,
    rgba(227, 66, 44, .9)
  );
  box-shadow: 0 4px 18px rgba(91, 13, 25, .2);
}

html.coherence-lab #artista,
html.coherence-lab #briefing {
  box-shadow: inset 0 1px 0 rgba(216, 162, 74, .42);
}

/*
 * Formatos: afasta Repertorio da pincelada amarela e leva junto o fechamento,
 * preservando a relacao vertical entre os dois blocos.
 */
@media (orientation: landscape), (min-width: 1100px) {
  html.coherence-lab #formatos-repertorio .formatos-repertorio__repertoire,
  html.coherence-lab #formatos-repertorio .formatos-repertorio__together {
    transform: translateY(clamp(34px, 4.8svh, 56px));
  }
}

@media (max-width: 1099px) and (orientation: portrait) {
  html.coherence-lab #formatos-repertorio .formatos-repertorio__repertoire {
    padding-top: clamp(44px, 10vw, 78px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.coherence-lab #como-funciona .process-faq__cta,
  html.coherence-lab #briefing .briefing__submit {
    transition: none;
  }

  html.coherence-lab #como-funciona .process-faq__cta:hover,
  html.coherence-lab #briefing .briefing__submit:hover {
    transform: none;
  }
}

@media print {
  html.coherence-lab body::before {
    display: none;
  }
}