:root {
  --primary-color: rgb(70, 30, 95);
  --secondary-color: rgb(235, 60, 125);
  --tertiary-color: rgb(250, 100, 35);
  --text-dark: #000;
  --text-light: #fff;

  /* A navbar e `fixed-top`: sai do fluxo da pagina, entao cada secao precisa
     reservar a altura dela no proprio padding. Separar altura e respiro
     deixa claro o que e compensacao e o que e espaco de leitura -- antes os
     dois estavam somados num 80px que empatava com a altura da barra e
     colava o conteudo nela. */
  --altura-navbar: 84px;
  --respiro-topo: 32px;
}
* {
  box-sizing: border-box;
}

@media (max-width: 1170px) {
  .g-recaptcha {
    transform: scale(0.82);
    -webkit-transform: scale(0.82);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
  }
}
@media (max-width: 366px) {
  .g-recaptcha {
    transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
  }
}

#webinar-section .home-inner {
  padding-top: calc(var(--altura-navbar) + var(--respiro-topo));
  padding-bottom: 30px;
}
#player-section .player-inner {
  padding-top: calc(var(--altura-navbar) + var(--respiro-topo));
}
#callaction-section .callaction-inner {
  padding-top: 20px;
}



.speakers-list {
  list-style-type: "- ";
}
.datetime-list {
  list-style-type: "- ";
}

.policy a {
  text-decoration: underline;
  color: white;
}
.policy {
  line-height: normal;
  font-size: x-small;
}

@media only screen and (max-width: 600px) {
  .rc-anchor-normal {
    height: 74px;
    width: 245px;
  }
}

/* Validate Form */
.is-invalid {
  border-color: var(--secondary-color);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  fill: var(--secondary-color);
}
.invalid-feedback {
  color: var(--text-light);
}

.comment_widget {
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 400px;
  width: 100%;
  margin-top: 5px;
}

.md-boxed .m-replyform .m-preview {
  box-shadow: none;
  border: 0;
  margin-left: -6em;
  display: none;
}

#event-section{
  margin-top:40px
}
.form-control {
  border-radius: 4px;
  border: 1px solid rgb(221, 221, 221);
  background-color: var(--text-light);
  color: var(--text-dark);
  outline: none;
  font-size: 1rem;
  appearance: none;
}

/* Custom focus style for form-control */
.form-control:focus {
  border-color: rgb(221, 221, 221); /* Change border color */
  box-shadow: 0 0 0 0.25rem rgba(221, 221, 221, 0.25); /* Add a custom box shadow */
  outline: none; /* Remove default outline */
}
/* ===========================================================================
   HOME — Programação de eventos
   ---------------------------------------------------------------------------
   Mesmo vocabulário do admin (cartões, raio de 14px, pílula de estado), mas
   com a marca do site público: roxo e rosa do base.css, VivoType, fundo claro.
   =========================================================================== */
.home {
  --home-radius: 14px;
  --home-line: #e6e1eb;
  --home-surface: #ffffff;
  --home-ground: #faf9fb;
  --home-ink: #1c1622;
  --home-ink-2: #554c60;
  --home-ink-3: #7d7489;
  --home-live: #d6002a;
  --home-live-soft: #fdecef;

  padding: 96px 0 64px;
  background: var(--home-ground);
  flex: 1 0 auto;
}

.home__head { margin-bottom: 28px; }
.home__head h1 {
  font-family: "VivoTypeBold", sans-serif;
  color: var(--primary-color);
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 0;
  margin: 0;
}
.home__head p {
  margin: 8px 0 0;
  color: var(--home-ink-3);
  font-size: 15px;
  letter-spacing: 0;
}

/* cartão de evento -------------------------------------------------------- */
.home-card {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) minmax(196px, 224px);
  gap: 22px 28px;
  align-items: start;
  background: var(--home-surface);
  border: 1px solid var(--home-line);
  border-radius: var(--home-radius);
  box-shadow: 0 1px 2px rgba(28, 22, 34, .06), 0 8px 24px -12px rgba(28, 22, 34, .18);
  padding: 26px 28px;
}
.home-card + .home-card { margin-top: 18px; }
.home-card--live { border-color: rgba(214, 0, 42, .4); box-shadow: 0 0 0 3px var(--home-live-soft); }

.home-card__main { min-width: 0; }
.home-card__title {
  font-family: "VivoTypeBold", sans-serif;
  color: var(--home-ink);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: 0;
  margin: 10px 0 0;
}
.home-card__desc {
  margin: 10px 0 0;
  color: var(--home-ink-2);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
  max-width: 62ch;
}

/* pílula de estado -------------------------------------------------------- */
.home-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "VivoTypeMedium", sans-serif;
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.home-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.home-pill--live {
  background: var(--home-live-soft);
  color: var(--home-live);
  border-color: rgba(214, 0, 42, .3);
}
.home-pill--live .home-pill__dot { animation: home-beat 1.6s ease-in-out infinite; }
.home-pill--soon {
  background: #f4eff8;
  color: var(--primary-color);
  border-color: #ddcfe8;
}
@keyframes home-beat {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(214, 0, 42, .5); }
  50%      { opacity: .85; box-shadow: 0 0 0 5px rgba(214, 0, 42, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .home-pill--live .home-pill__dot { animation: none; }
}

/* palestrantes ------------------------------------------------------------
   Nome em destaque, cargo abaixo em tom secundario: e como as plataformas de
   evento apresentam. A capsula anterior colava nome e cargo numa string so. */
.home-speakers { margin-top: 18px; }
.home-speakers__k {
  font-family: "VivoTypeMedium", sans-serif;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--home-ink-3);
}
.home-speakers__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 34px;
  margin: 10px 0 0;
  padding: 0;
}
.home-speaker { display: flex; align-items: center; gap: 12px; }
.home-speaker__ini {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-color);
  color: #fff;
  font-family: "VivoTypeBold", sans-serif;
  font-size: 13.5px;
  letter-spacing: .03em;
}
.home-speaker__id { min-width: 0; }
.home-speaker__name {
  display: block;
  font-family: "VivoTypeMedium", sans-serif;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--home-ink);
}
.home-speaker__role {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--home-ink-3);
  margin-top: 1px;
}

/* coluna da direita ------------------------------------------------------- */
.home-card__side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-left: 1px solid var(--home-line);
  padding-left: 28px;
}
.home-when {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.home-when__d {
  display: block;
  font-family: "VivoTypeBold", sans-serif;
  font-size: 20px;
  color: var(--home-ink);
}
.home-when__h { display: block; font-size: 14px; color: var(--home-ink-3); margin-top: 2px; }

.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "VivoTypeMedium", sans-serif;
  font-size: 14.5px;
  letter-spacing: 0;
  text-decoration: none;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.home-btn--primary { background: var(--primary-color); color: #fff; }
.home-btn--primary:hover { background: rgb(48, 18, 68); color: #fff; }
.home-btn--live { background: var(--home-live); color: #fff; }
.home-btn--live:hover { background: #b00023; color: #fff; }
.home-btn--ghost {
  background: var(--home-surface);
  color: var(--home-ink-2);
  border-color: #d4ccdc;
}
.home-btn--ghost:hover { background: #f5f2f7; color: var(--home-ink); }

/* vazio ------------------------------------------------------------------- */
.home-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--home-surface);
  border: 1px dashed #d4ccdc;
  border-radius: var(--home-radius);
  padding: 28px;
  color: var(--home-ink-3);
  font-size: 15px;
  letter-spacing: 0;
}
.home-empty svg { width: 20px; height: 20px; flex: none; opacity: .7; }


/* thumb ------------------------------------------------------------------- */
.home-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(140deg, #2b2035, #17121d);
  border: 1px solid var(--home-line);
  text-decoration: none;
}
.home-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.home-card__thumb:hover img { transform: scale(1.03); }

.home-card__thumb-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .28);
}
.home-card__thumb-empty svg { width: 34px; height: 34px; }


@media (prefers-reduced-motion: reduce) {
  .home-card__thumb:hover img { transform: none; }
}

/* ------------------------------------------------------------------------
   Com varios eventos a lista precisa continuar legivel: abaixo de 1080px as
   acoes passam para uma faixa horizontal sob a imagem e o texto; abaixo de
   680px tudo empilha e a thumb ocupa a largura toda.
   ------------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .home-card { grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); }
  .home-card__side {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px 18px;
    border-left: 0;
    border-top: 1px solid var(--home-line);
    padding-left: 0;
    padding-top: 18px;
  }
  .home-card__side .home-when { margin-right: auto; }
}

@media (max-width: 680px) {
  .home-card { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .home-card__side .home-when { margin-right: 0; }
  .home-card__side .home-btn { flex: 1 1 100%; }
}

/* ===========================================================================
   LANDING — página de inscrição do evento
   =========================================================================== */
.lp {
  --lp-line: #e6e1eb;
  --lp-ink: #1c1622;
  --lp-ink-2: #554c60;
  --lp-ink-3: #7d7489;

  background: #faf9fb;
  padding: 96px 0 64px;
  flex: 1 0 auto;
}

.lp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: 40px;
  align-items: start;
}

/* --- identidade ---------------------------------------------------------- */
.lp-when {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "VivoTypeMedium", sans-serif;
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--primary-color);
  background: #f4eff8;
  border: 1px solid #ddcfe8;
  border-radius: 999px;
  padding: 6px 14px;
}

.lp__title {
  font-family: "VivoTypeBold", sans-serif;
  color: var(--lp-ink);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  letter-spacing: 0;
  margin: 18px 0 0;
  text-wrap: balance;
}
.lp__desc {
  margin: 14px 0 22px;
  color: var(--lp-ink-2);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0;
  max-width: 60ch;
}

.lp-speakers { margin-top: 32px; }
.lp-speakers__k {
  font-family: "VivoTypeMedium", sans-serif;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}
.lp-speakers__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 34px;
  margin: 12px 0 0;
  padding: 0;
}
.lp-share { margin-top: 32px; }
.lp-share .sharethis-inline-share-buttons { margin-top: 10px; }

/* --- cartão do formulário ------------------------------------------------ */
.lp-card {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28, 22, 34, .06), 0 18px 44px -20px rgba(28, 22, 34, .3);
  overflow: hidden;
  position: sticky;
  top: 96px;
}
.lp-card__hd {
  background: var(--primary-color);
  color: #fff;
  padding: 22px 24px;
}
.lp-card__hd h2 {
  font-family: "VivoTypeBold", sans-serif;
  font-size: 21px;
  letter-spacing: 0;
  margin: 0;
}
.lp-card__hd p {
  margin: 6px 0 0;
  font-size: 14px;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .82);
}
.lp-card__bd { padding: 22px 24px 24px; }

/* --- campos -------------------------------------------------------------- */
.lp-field { margin-bottom: 16px; }
.lp-field label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: "VivoTypeMedium", sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--lp-ink);
  margin-bottom: 6px;
}
.lp-field label span {
  font-family: "VivoTypeRegular", sans-serif;
  font-size: 12px;
  color: var(--lp-ink-3);
}
.lp-field input {
  width: 100%;
  font-family: "VivoTypeRegular", sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  color: var(--lp-ink);
  background: #fff;
  border: 1px solid #d4ccdc;
  border-radius: 10px;
  padding: 11px 14px;
  appearance: none;
}
.lp-field input::placeholder { color: #a89fb2; }
.lp-field input:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: -1px;
  border-color: var(--primary-color);
}
.lp-field input.is-invalid {
  border-color: #d6002a;
  background-image: none;
}
.lp-field .invalid-feedback {
  display: block;
  color: #d6002a;
  font-size: 12.5px;
  letter-spacing: 0;
  margin-top: 5px;
  min-height: 0;
}

.lp-recaptcha { margin: 18px 0 4px; }

.lp-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: #fdecef;
  border: 1px solid rgba(214, 0, 42, .28);
  color: #d6002a;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 13.5px;
  letter-spacing: 0;
  margin-bottom: 14px;
}
.lp-alert svg { flex: none; margin-top: 2px; }

.lp-policy {
  margin: 14px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--lp-ink-3);
}
.lp-policy a { color: var(--primary-color); text-decoration: underline; }

/* --- botões -------------------------------------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "VivoTypeMedium", sans-serif;
  font-size: 15px;
  letter-spacing: 0;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.lp-btn--primary { background: var(--primary-color); color: #fff; }
.lp-btn--primary:hover { background: rgb(48, 18, 68); color: #fff; }
.lp-btn--ghost {
  background: #fff;
  color: var(--lp-ink-2);
  border-color: #d4ccdc;
}
.lp-btn--ghost:hover { background: #f5f2f7; color: var(--lp-ink); }
.lp-btn--block { width: 100%; }

@media (max-width: 940px) {
  .lp__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .lp-card { position: static; }
}

/* thumb da landing — só existe quando o evento tem poster configurado */
.lp__thumb {
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--lp-line);
  background: linear-gradient(140deg, #2b2035, #17121d);
  margin-bottom: 24px;
  box-shadow: 0 1px 2px rgba(28, 22, 34, .06), 0 12px 32px -16px rgba(28, 22, 34, .28);
}
.lp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===========================================================================
   LANDING COMPACTA — a página precisa caber numa tela, sem rolagem
   ---------------------------------------------------------------------------
   O que dominava a altura: seis campos empilhados (942px só o cartão) e a
   thumb em 16:9 (470px). Os campos passam a duas colunas e as alturas fixas
   viram limites; os respiros acompanham a altura da janela.
   =========================================================================== */
.lp {
  padding-block: clamp(84px, 10vh, 96px) clamp(14px, 3vh, 48px);
}

.lp__grid {
  grid-template-columns: minmax(0, 1fr) minmax(430px, 520px);
  gap: clamp(24px, 3vw, 40px);
}

/* A thumb deixa de mandar na altura: mantém o 16:9 até o teto e depois corta. */
.lp__thumb {
  aspect-ratio: 16 / 9;
  max-height: clamp(132px, 23vh, 250px);
  margin-bottom: clamp(14px, 2.2vh, 22px);
}

.lp__title {
  font-size: clamp(24px, 2.6vw, 36px);
  margin-top: clamp(12px, 1.8vh, 18px);
}

/* Descrições vão até 350 caracteres; três linhas bastam como chamada. */
.lp__desc {
  margin: clamp(8px, 1.4vh, 14px) 0 clamp(14px, 2vh, 20px);
  font-size: 15.5px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.lp-speakers { margin-top: clamp(16px, 2.6vh, 28px); }
.lp-speakers__list { gap: 12px 28px; margin-top: 10px; }

/* --- cartão: dois campos por linha --------------------------------------- */
.lp-card__hd { padding: clamp(14px, 2vh, 20px) 22px; }
.lp-card__hd h2 { font-size: 19px; }
.lp-card__hd p { font-size: 13px; margin-top: 4px; }
.lp-card__bd { padding: clamp(13px, 2.2vh, 22px) 22px clamp(13px, 2.2vh, 22px); }

.lp-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}
.lp-field { margin-bottom: clamp(8px, 1.6vh, 15px); }
.lp-field label { font-size: 12.5px; margin-bottom: 4px; }
.lp-field input { padding: 9px 12px; font-size: 14.5px; border-radius: 8px; }
.lp-field .invalid-feedback { font-size: 11.5px; margin-top: 3px; }

.lp-recaptcha { margin: clamp(2px, 1vh, 10px) 0 clamp(8px, 1.6vh, 14px); }

.lp-btn--block { padding: 11px 20px; }

/* A política é obrigatória mas não precisa de sete linhas na primeira dobra. */
.lp-policy {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}
.lp-policy.is-open {
  display: block;
  -webkit-line-clamp: none;
  cursor: auto;
}

@media (max-width: 940px) {
  /* Empilhado, rolar é natural: os limites de altura saem do caminho. */
  .lp__thumb { max-height: none; }
  .lp__desc, .lp-policy { -webkit-line-clamp: none; display: block; }
  .lp-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   CONFIRMAÇÃO DE INSCRIÇÃO (schedule)
   =========================================================================== */
.st {
  background: #faf9fb;
  flex: 1 0 auto;
  padding-block: clamp(84px, 12vh, 120px) clamp(24px, 5vh, 56px);
  display: flex;
  align-items: center;
}
.st > .container { width: 100%; }

.st-card {
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e6e1eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(28, 22, 34, .06), 0 18px 44px -22px rgba(28, 22, 34, .3);
  padding: clamp(28px, 5vh, 44px) clamp(24px, 4vw, 40px);
  text-align: center;
}

.st-check {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto;
  border-radius: 50%;
  background: #e8f5ef;
  color: #0f8a5f;
}
.st-check svg { width: 26px; height: 26px; }

.st-title {
  font-family: "VivoTypeBold", sans-serif;
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: 0;
  color: #1c1622;
  margin: 18px 0 0;
}
.st-lead {
  margin: 10px auto 0;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;
  color: #554c60;
}

.st-event {
  margin: 24px 0;
  padding: 18px 20px;
  background: #faf9fb;
  border: 1px solid #e6e1eb;
  border-radius: 10px;
}
.st-event__name {
  font-family: "VivoTypeMedium", sans-serif;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #1c1622;
}
.st-event__when {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 13.5px;
  letter-spacing: 0;
  color: var(--primary-color);
}

.st-wait {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-size: 13px;
  letter-spacing: 0;
  color: #7d7489;
}
.st-wait__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0f8a5f;
  flex: none;
  animation: st-pulse 1.8s ease-in-out infinite;
}
@keyframes st-pulse {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(15, 138, 95, .5); }
  50%      { opacity: .7; box-shadow: 0 0 0 6px rgba(15, 138, 95, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .st-wait__dot { animation: none; }
}