/* ============================================================
   /convite-para-conselho — Design System "Palco"
   Só desta página. Carregado depois de design-system.css e usa
   apenas tokens --ds-* (docs/DESIGN-SYSTEM.md).
   ============================================================ */

/* ─── Base da página (sem style.css) ────────────────────────── */
.cc-page,
.cc-page *,
.cc-page *::before,
.cc-page *::after { box-sizing: border-box; }
html:has(.cc-page) { scroll-behavior: smooth; scroll-padding-top: 84px; }
.cc-page {
  margin: 0;
  background: var(--ds-ink);
  color: var(--ds-text);
  font-family: var(--ds-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.cc-page img { max-width: 100%; }
.cc-page dl, .cc-page dd { margin: 0; }
.cc-center { justify-content: center; margin-top: var(--ds-s7); }

/* Ponto aceso (status) */
.cc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--ds-red-light);
  box-shadow: 0 0 10px var(--ds-red-glow);
  vertical-align: middle;
}

/* ─── Abertura ──────────────────────────────────────────────── */
.cc-hero { padding-block: clamp(48px, 8vw, 112px); }
.cc-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.cc-hero__title {
  margin: 0;
  font: 600 clamp(2.125rem, 4.4vw, 3.6rem)/1.1 var(--ds-font-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--ds-white);
}
.cc-hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ds-red-light);
  text-shadow: 0 0 32px var(--ds-red-glow);
}
.cc-hero__lead { margin: var(--ds-s5) 0 0; color: var(--ds-text-inv-2); }
.cc-hero__actions { margin-top: var(--ds-s6); }
.cc-hero__note {
  margin-bottom: 0;
  margin-top: var(--ds-s5);
  font: 600 var(--ds-fs-label)/1.4 var(--ds-font-stage);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-text-inv-2);
}
.cc-hero__portrait { aspect-ratio: 4 / 5; }
.cc-hero__portrait img { object-position: 50% 30%; }

/* ─── Credenciais ───────────────────────────────────────────── */
.cc-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.cc-creds__chips { margin-top: var(--ds-s7); text-align: center; }
.cc-creds__chips .ds-meta { display: block; margin: 0 0 var(--ds-s4); }
.cc-creds__chips .ds-chips { justify-content: center; }

/* ─── Temas ─────────────────────────────────────────────────── */
.cc-topic .ds-card__body { padding: var(--ds-s5); gap: var(--ds-s3); }
.cc-topic .ds-eyebrow { margin-bottom: var(--ds-s1); }
.cc-topic .ds-card__text { line-height: 1.65; }

/* ─── Tipos de conselho ─────────────────────────────────────── */
.cc-format {
  position: relative;
  padding: var(--ds-s6) var(--ds-s5) var(--ds-s5);
  border-radius: var(--ds-r-card);
  border: 1px solid var(--ds-line);
  background: var(--ds-white);
}
.cc-format::before {
  content: '';
  position: absolute;
  top: -1px;
  left: var(--ds-s5);
  width: 40px;
  height: 2px;
  background: var(--ds-red);
  box-shadow: 0 0 12px var(--ds-red-glow);
}
.cc-format h3 { margin: 0; font: 600 var(--ds-fs-h3)/1.3 var(--ds-font-display); margin-bottom: var(--ds-s3); }
.cc-format p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: var(--ds-text-2); }

.cc-formats__detail {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--ds-s6);
  align-items: stretch;
  margin-top: var(--ds-s7);
}
.cc-facts { display: grid; gap: 0; border-top: 1px solid var(--ds-line); }
.cc-facts > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--ds-s4);
  padding: var(--ds-s4) 0;
  border-bottom: 1px solid var(--ds-line);
}
.cc-facts dt {
  font: 700 var(--ds-fs-label)/1.6 var(--ds-font-stage);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ds-red);
}
.cc-facts dd { font-size: 0.95rem; line-height: 1.6; color: var(--ds-text-2); }

/* Disponibilidade: a tela acesa da seção */
.cc-availability {
  display: flex;
  flex-direction: column;
  gap: var(--ds-s4);
  padding: var(--ds-s6);
  border-radius: var(--ds-r-card);
  background: var(--ds-surface);
  color: var(--ds-text-inv);
  box-shadow: 0 0 0 1px rgba(224, 87, 77, 0.35), 0 0 40px -12px var(--ds-red-glow), var(--ds-shadow-card);
}
.cc-availability .ds-meta { margin: 0; color: var(--ds-text-inv-2); }
.cc-availability__text { margin: 0; font: 500 clamp(1.15rem, 1.8vw, 1.375rem)/1.4 var(--ds-font-display); color: var(--ds-white); }
.cc-availability .ds-btn { align-self: flex-start; margin-top: auto; }
.cc-availability .ds-btn--dark { background: var(--ds-white); color: var(--ds-text); }
.cc-availability .ds-btn--dark:hover { background: var(--ds-red); color: var(--ds-white); }

/* ─── Convite: processo + formulário ────────────────────────── */
.cc-invite__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.cc-process { position: sticky; top: 96px; }
.cc-timeline > li { grid-template-columns: 44px minmax(0, 1fr); }
.cc-timeline small { grid-column: 2; text-align: left; margin-top: -10px; }
.cc-process__note { margin: var(--ds-s4) 0 0; font-size: var(--ds-fs-small); line-height: 1.6; color: var(--ds-text-inv-2); }
.cc-process__note a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ds-red-light); text-underline-offset: 3px; }

.cc-form {
  padding: clamp(20px, 4vw, 40px);
  border-radius: var(--ds-r-card);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line-inv);
  box-shadow: var(--ds-shadow-card);
}
.cc-fieldset { margin: 0 0 var(--ds-s6); padding: 0 0 var(--ds-s5); border: 0; border-bottom: 1px solid var(--ds-line-inv); min-width: 0; }
.cc-fieldset legend {
  display: flex;
  align-items: baseline;
  gap: var(--ds-s3);
  padding: 0;
  margin-bottom: var(--ds-s5);
  font: 600 1.375rem/1.2 var(--ds-font-display);
  color: var(--ds-white);
}
.cc-fieldset legend span {
  font: 700 0.8125rem/1 var(--ds-font-stage);
  letter-spacing: 0.2em;
  color: var(--ds-red-light);
}

.cc-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ds-s5); }
.cc-field { margin-bottom: var(--ds-s5); min-width: 0; }
.cc-field label {
  display: block;
  margin-bottom: var(--ds-s2);
  font: 600 0.75rem/1.3 var(--ds-font-stage);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-text-inv-2);
}
.req { color: var(--ds-red-light); }

.cc-field input,
.cc-field select,
.cc-field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--ds-r-sm);
  background: var(--ds-surface-2);
  color: var(--ds-text-inv);
  font: 400 1rem/1.4 var(--ds-font-body); /* 16px evita zoom no iOS */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
          appearance: none;
}
.cc-field select {
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ds-red-light) 50%),
    linear-gradient(135deg, var(--ds-red-light) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.cc-field select option { background: var(--ds-surface); color: var(--ds-text-inv); }
.cc-field textarea { resize: vertical; min-height: 104px; }
.cc-field ::placeholder { color: var(--ds-mute); opacity: 1; }
.cc-field input:focus,
.cc-field select:focus,
.cc-field textarea:focus {
  outline: none;
  border-color: var(--ds-red-light);
  box-shadow: 0 0 0 3px var(--ds-red-soft), 0 0 18px -6px var(--ds-red-glow);
}
.cc-field small { display: block; margin-top: var(--ds-s2); font-size: 0.8125rem; line-height: 1.5; color: var(--ds-mute); }

.cc-submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-s4) var(--ds-s5); }
.cc-submit__btn { min-height: 52px; padding-inline: 36px; }
.cc-submit__btn:disabled { opacity: 0.6; cursor: wait; }
.cc-privacy { margin: 0; font-size: 0.8125rem; color: var(--ds-text-inv-2); }

.cc-result { margin-top: var(--ds-s5); padding: var(--ds-s4) var(--ds-s5); border-radius: var(--ds-r-sm); line-height: 1.6; font-size: 0.95rem; }
.cc-result-ok { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.22); border-left: 3px solid var(--ds-red-light); color: var(--ds-text-inv); }
.cc-result-err { background: var(--ds-red-soft); border: 1px solid var(--ds-red-light); color: var(--ds-text-inv); }
.cc-result a { color: inherit; text-decoration: underline; }

/* ─── Dúvidas ───────────────────────────────────────────────── */
.cc-faq__list { border-top: 1px solid var(--ds-line); }
.cc-qa { border-bottom: 1px solid var(--ds-line); }
.cc-qa summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--ds-s4) 44px var(--ds-s4) 0;
  list-style: none;
  cursor: pointer;
  font: 600 var(--ds-fs-h3)/1.35 var(--ds-font-display);
}
.cc-qa summary::-webkit-details-marker { display: none; }
.cc-qa summary::after {
  content: '+';
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  font: 400 1.5rem/1 var(--ds-font-stage);
  color: var(--ds-red);
  transition: rotate 0.3s var(--ds-ease);
}
.cc-qa[open] summary::after { rotate: 45deg; }
.cc-qa summary:focus-visible { outline: 2px solid var(--ds-red); outline-offset: 2px; }
.cc-qa p { margin: 0; padding: 0 0 var(--ds-s5); max-width: var(--ds-measure); line-height: 1.7; color: var(--ds-text-2); }

/* ─── Responsivo ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cc-invite__grid { grid-template-columns: minmax(0, 1fr); }
  .cc-process { position: static; }
}
@media (max-width: 768px) {
  .cc-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--ds-s6); }
  .cc-hero__portrait { aspect-ratio: 4 / 3; }
  .cc-formats__detail { grid-template-columns: minmax(0, 1fr); }
  .cc-facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--ds-s1); }
  .cc-row { grid-template-columns: minmax(0, 1fr); }
  .cc-submit__btn { flex: 1 1 100%; }
  .cc-availability { padding: var(--ds-s5); }
  .cc-availability .ds-btn { align-self: stretch; }
}
@media (max-width: 420px) {
  .cc-form { padding: var(--ds-s5) var(--ds-s4); margin-inline: calc(var(--ds-s2) * -1); }
  .cc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-stats .ds-stat { padding: var(--ds-s4); }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.cc-page) { scroll-behavior: auto; }
  .cc-qa summary::after { transition: none; }
}

/* ─── Formação e ecossistema (conteúdo trazido de /conselheiro) ─── */
.cc-background {
  margin-top: var(--ds-s8);
  padding-top: var(--ds-s7);
  border-top: 1px solid var(--ds-line);
  align-items: start;
}
.cc-background__col { min-width: 0; }
.cc-background__title {
  margin: 0 0 var(--ds-s5);
  font: 600 var(--ds-fs-h3)/1.3 var(--ds-font-display);
  color: var(--ds-text);
  text-wrap: balance;
}
.cc-background__text {
  margin: 0 0 var(--ds-s5);
  max-width: var(--ds-measure);
  color: var(--ds-text-2);
  line-height: 1.7;
}
.cc-training > li { grid-template-columns: 64px minmax(0, 1fr); }
.cc-training small { grid-column: 2; text-align: left; }
/* Sem ano cadastrado: lista simples, sem a coluna do ano */
.cc-training--plain > li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.cc-training--plain small { grid-column: 1; }