/* ============================================================
   palestras.css — Componentes específicos da página de palestras
   Base: ../css/style.css (importado no HTML)
   ============================================================ */

/* ── Header modo claro (palestras) ───────────────────────── */
/* O hero tem fundo claro — logo e links precisam ser escuros antes do scroll */

.header--light:not(.scrolled) .logo {
  color: var(--licorice);
}

.header--light:not(.scrolled) .nav-link {
  color: rgba(27, 18, 18, 0.6);
}

.header--light:not(.scrolled) .nav-link:hover {
  color: var(--licorice);
}

.header--light:not(.scrolled) .nav-link--active {
  color: var(--mustard-dark);
}

.header--light:not(.scrolled) .nav-toggle span {
  background-color: var(--licorice);
}

.header--light:not(.scrolled) .cta-white {
  background-color: var(--licorice);
  color: var(--powder);
}

/* Mobile menu CTA: visível sobre fundo licorice */
.header--light .mobile-menu .cta-btn {
  background-color: var(--powder);
  color: var(--licorice);
}

/* ── Header scrolled — licorice (sobrescreve powder do style.css) ─── */

#site-header.scrolled {
  background-color: var(--licorice);
}
#site-header.scrolled .logo { color: #fff; }
#site-header.scrolled .logo-dot { color: var(--mustard); }
#site-header.scrolled .nav-link { color: rgba(255,255,255,0.72); }
#site-header.scrolled .nav-link:hover { color: #fff; }
#site-header.scrolled .nav-link--active { color: var(--mustard); }
#site-header.scrolled .nav-toggle span { background-color: #fff; }
#site-header.scrolled .cta-white {
  background-color: var(--powder);
  color: var(--licorice);
}

/* ── Hero Split ───────────────────────────────────────────── */

.hero--split {
  padding: 0;
  align-items: stretch;
  height: 100vh;
  overflow: hidden;
  /* fundo claro com glow mustard — diferencia da consultoria (licorice + sky) */
  background: radial-gradient(ellipse 70% 45% at 50% -5%, rgba(232, 175, 88, 0.22), transparent 70%),
              var(--powder);
}

.hero-split-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 120px var(--sp-6) var(--sp-12) var(--sp-6);
  text-align: left;
}

.hero--split h1,
.hero--split .subheadline {
  text-align: left;
}

.hero--split h1 {
  max-width: 520px;
  color: var(--licorice);
}

.hero--split .h1-line2 {
  color: var(--mustard-dark);
}

.hero--split .subheadline {
  max-width: 460px;
  margin-top: var(--sp-4);
  color: var(--black-olive);
}

.hero--split .cta-btn {
  margin-top: var(--sp-6);
  align-self: flex-start;
}

.hero-split-foto {
  display: none;
  flex: 0 0 50%;
  flex-direction: row;
  align-items: stretch;
  gap: 6px;
  padding: 140px max(var(--sp-4), calc((100vw - 1100px) / 2 + var(--sp-4))) var(--sp-16) var(--sp-4);
}

/* ── Hero mobile — foto estática (< 900px) ── */

.hero-mobile-foto {
  display: block;
  width: 100%;
  margin: 0;
  margin-top: var(--sp-8);
}

.hero-mobile-foto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
}

.hero-mobile-foto figcaption {
  font-size: var(--text-xs);
  color: var(--black-olive);
  opacity: 0.65;
  margin-top: var(--sp-1);
  text-align: center;
}

@media (max-width: 899px) {
  .hero--split {
    height: auto;
    min-height: 0;
  }

  .hero-split-texto {
    padding-bottom: var(--sp-8);
  }

  .hero--split .cta-btn {
    align-self: center;
  }
}

@media (min-width: 900px) {
  .hero-mobile-foto {
    display: none;
  }
}

/* ── Acordeão de imagens ──────────────────────────────────── */

.acordeon-panel {
  flex: 0 0 54px;
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
  transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.acordeon-panel--active {
  flex: 1;
}

.acordeon-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  transition: opacity 0.4s ease;
}

.acordeon-panel--active::before {
  opacity: 0;
}

.acordeon-label {
  position: absolute;
  bottom: var(--sp-3);
  right: calc(50% + 8px); /* 8px ≈ metade da altura da linha, centra o texto no strip */
  transform-origin: right bottom; /* ancora na extremidade final do texto */
  transform: rotate(90deg);
  color: #fff;
  font-family: 'Albert Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  transition: transform 0.45s ease, font-size 0.3s ease;
  z-index: 1;
}

.acordeon-panel--active .acordeon-label {
  right: auto;
  left: 50%;
  bottom: 20px;
  transform-origin: center;
  transform: translateX(-50%) rotate(0deg);
  font-size: 15px;
}

/* ── Prova Social ─────────────────────────────────────────── */

.prova-social {
  background-color: var(--platinum);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-4);
}

.prova-social .container {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.prova-social-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  margin-bottom: 0;
}

.prova-social-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
}

.prova-social-lista li {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--black-olive);
  position: relative;
}

.prova-social-lista li:not(:last-child)::after {
  content: '·';
  position: absolute;
  right: calc(-1 * var(--sp-2) - 3px);
  color: var(--mustard);
}

/* ── Para quem é ──────────────────────────────────────────── */

.para-quem {
  background-color: var(--platinum);
}

.para-quem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.bloco-contratante {
  background-color: #fff;
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  border-top: 3px solid var(--sky);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base), box-shadow var(--t-base), background-color 0.4s ease;
}

.bloco-contratante.card-active {
  background-color: rgba(232, 175, 88, 0.08);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.bloco-contratante h3 {
  color: var(--licorice);
  margin-bottom: var(--sp-2);
}

.bloco-contratante p {
  font-size: var(--fs-servico);
  line-height: 1.72;
  color: #4a4848;
  margin-bottom: 0;
}

/* ── Temas ────────────────────────────────────────────────── */

.temas {
  background-color: var(--powder);
}

.card-tema {
  background-color: #fff;
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  border-top: 3px solid var(--mustard);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.card-tema:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.card-tema h3 {
  color: var(--licorice);
  margin-bottom: var(--sp-2);
}

.tema-angulo {
  font-size: var(--fs-servico);
  line-height: 1.72;
  color: #4a4848;
  margin-bottom: var(--sp-3);
}

.tema-publico-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mustard-dark);
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--platinum);
}

.tema-publico {
  font-size: var(--text-base);
  color: var(--black-olive);
  line-height: 1.6;
  margin-bottom: 0;
}

.temas-nota,
.contratar-nota {
  margin-top: var(--sp-6);
  background-color: #fff;
  border: 1px solid var(--platinum);
  border-left: 4px solid var(--mustard);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.temas-nota p,
.contratar-nota p {
  font-size: var(--fs-servico);
  color: var(--black-olive);
  line-height: 1.6;
  margin-bottom: 0;
  flex: 1;
}

.temas-nota-link {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--mustard-dark);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Presença em palco ────────────────────────────────────── */

.presenca {
  background-color: var(--platinum);
}

.presenca-sub {
  font-size: var(--text-lg);
  color: #666;
  margin-bottom: var(--sp-6);
}

.foto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.foto-card {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
}

.foto-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform var(--t-base);
}

.foto-card:hover img {
  transform: scale(1.03);
}

.foto-card figcaption {
  font-size: var(--text-sm);
  color: var(--black-olive);
  margin-top: var(--sp-2);
  line-height: 1.5;
}

/* ── Mídia ────────────────────────────────────────────────── */

.midia {
  background-color: var(--powder);
  text-align: center;
}

.midia h2 {
  margin-bottom: var(--sp-2);
}

.midia-sub {
  font-size: var(--text-base);
  color: #666;
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto var(--sp-6);
}

.video-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  height: auto;
  padding-bottom: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  max-width: 760px;
  margin: 0 auto;
  box-shadow: var(--shadow-card-hover);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Como Contratar — cards horizontais ──────────────────── */

.como-contratar {
  background-color: var(--platinum);
}

.contratar-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}

.contratar-card {
  background-color: #fff;
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
  position: relative;
}

.contratar-num {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 4rem;
  font-weight: 700;
  color: var(--mustard);
  line-height: 1;
  display: block;
  margin-bottom: var(--sp-3);
}

.contratar-card h3 {
  color: var(--licorice);
  margin-bottom: var(--sp-2);
}

.contratar-card p {
  font-size: var(--fs-servico);
  line-height: 1.72;
  color: #4a4848;
  margin-bottom: 0;
}

/* ── Além da palestra ─────────────────────────────────────── */

.alem {
  background-color: var(--sky);
  text-align: center;
}

.alem .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.alem h2 {
  color: var(--licorice);
  margin-bottom: 0;
}

.alem p {
  font-size: var(--fs-servico);
  color: var(--licorice);
  max-width: 520px;
  line-height: 1.72;
  opacity: 0.85;
  margin-bottom: 0;
}

/* ── CTA Final — licorice ─────────────────────────────────── */

.cta-final--dark {
  background-color: var(--licorice);
  color: #fff;
}

.cta-final--dark h2 {
  color: #fff;
}

.cta-final--dark p {
  color: rgba(255, 255, 255, 0.72);
}

/* ── Footer ───────────────────────────────────────────────── */

.palestras-page footer {
  background-color: var(--powder);
}

.palestras-page footer p {
  color: var(--black-olive);
  opacity: 0.6;
}

/* ── Responsividade ───────────────────────────────────────── */

@media (max-width: 639px) {
  .temas-nota,
  .contratar-nota {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 640px) {
  .para-quem-grid {
    grid-template-columns: 1fr 1fr;
  }

  .foto-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contratar-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero-split-texto {
    padding-left: var(--sp-8);
  }
}

@media (min-width: 900px) {
  .hero-split-texto {
    flex: 0 0 50%;
    padding: 140px var(--sp-8) var(--sp-16) max(var(--sp-8), calc((100vw - 1100px) / 2 + var(--sp-8)));
  }

  .hero-split-foto {
    display: flex;
  }
}