/*
  Landing page — Imersão "IA na Prática"
  Estilos específicos da página. Toda cor/tipografia/raio/sombra vem de
  tokens.css — este arquivo só compõe layout.
*/

/* ---------- Teste de copy (index_backup001.html) — strikethrough, comparativo,
   toggle de dia e CTA sticky. Regras "mortas" em qualquer página que não tenha
   a marcação correspondente, exceto o padding do body via :has() abaixo, que
   é justamente pra só afetar a página que realmente tem o .sticky-cta. ---------- */
.text-strike {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-destructive);
  color: var(--color-muted-foreground);
  font-weight: 400;
}

.compare-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-top: var(--space-4);
}

@media (min-width: 720px) {
  .compare-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.compare-col {
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
}

.compare-col-title {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.compare-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.compare-col li {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  padding-left: 26px;
  position: relative;
}

.compare-col-bad {
  background: var(--color-muted);
  border: 2px solid var(--clay-vivid);
  color: var(--color-muted-foreground);
}

.compare-col-bad .compare-col-title {
  color: var(--color-muted-foreground);
}

.compare-col-bad li {
  text-decoration: line-through;
  opacity: 0.85;
}

.compare-col-bad li::before {
  content: "✕";
  position: absolute;
  left: 0;
  color: var(--color-destructive);
  font-weight: 700;
}

.compare-col-good {
  background: var(--clay-vivid);
  border: 1px solid var(--clay-vivid);
  box-shadow: var(--shadow-clay);
  color: #ffffff;
}

.compare-col-good .compare-col-title {
  color: #ffffff;
}

.compare-col-good li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #ffffff;
  font-weight: 700;
}

.day-toggle {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.day-toggle-btn {
  padding: 10px 24px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-card);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.day-toggle-btn:hover {
  border-color: rgba(255, 90, 31, 0.4);
}

.day-toggle-btn.is-active {
  background: var(--clay-vivid);
  border-color: transparent;
  color: #ffffff;
}

.schedule-list [data-day].is-day-hidden {
  display: none;
}

.sticky-cta {
  background: #141413;
  border-top: 1px solid rgba(255, 90, 31, 0.3);
  padding: 10px clamp(1rem, 3vw, 2rem);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
}

.sticky-cta-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.sticky-cta-price {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.sticky-cta-price strong {
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 1.125rem;
}

.sticky-cta-price strong small {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
}

.sticky-cta-was {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
}

.sticky-cta .btn {
  flex: none;
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, var(--space-site-margin));
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  z-index: 100;
}

.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

/* ---------- Header / navegação ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

.site-header.is-scrolled {
  box-shadow: var(--elevation-raised);
}

.site-header .container {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.brand {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: #faf9f5;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.brand-mark {
  color: var(--clay-vivid);
}

.nav-list {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-6);
  align-items: center;
}

.nav-list a {
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(250, 249, 245, 0.72);
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-list a:hover {
  color: #faf9f5;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Alternância de tema — botão único e compacto (cicla sistema → claro → escuro),
   em vez de um grupo de 3 botões, para não brigar por espaço com o menu no header */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  background: transparent;
  color: rgba(250, 249, 245, 0.75);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.theme-toggle-btn:hover {
  border-color: rgba(255, 255, 255, 0.4);
  color: #faf9f5;
}

.theme-toggle-btn .theme-icon {
  display: none;
}

.theme-toggle-btn[data-active="system"] .theme-icon-system,
.theme-toggle-btn[data-active="light"] .theme-icon-light,
.theme-toggle-btn[data-active="dark"] .theme-icon-dark {
  display: block;
}

.mobile-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding-inline: 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--clay-vivid);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--space-4) clamp(1.25rem, 3vw, var(--space-site-margin));
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav a {
  text-decoration: none;
  color: #faf9f5;
  font-family: var(--font-sans);
  font-weight: 500;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 960px) {
  .nav-list {
    display: flex;
  }

  .mobile-nav-toggle {
    display: none;
  }

  .mobile-nav {
    display: none !important;
  }
}

/* ---------- Hero ---------- */
.hero {
  border-bottom: 1px solid var(--color-border);
}

.hero-grid {
  display: grid;
  gap: var(--space-12);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-areas:
      "top    media"
      "bottom media";
    gap: var(--space-8) var(--space-16);
    align-items: start;
  }

  .hero-col-top {
    grid-area: top;
  }

  .hero-media {
    grid-area: media;
    align-self: center;
  }

  .hero-col-bottom {
    grid-area: bottom;
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-4);
}

.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--swatch-clay);
  display: inline-block;
}

.hero-claude-logo {
  display: block;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
}

.hero h1 {
  margin: 0 0 var(--space-4);
}

.hero-lead {
  max-width: var(--reading-column);
  margin: 0 0 var(--space-8);
  color: var(--color-ink-soft);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #faf9f5;
}

.hero-meta-pill svg {
  color: var(--clay-vivid);
  flex-shrink: 0;
}

.hero-meta-pill span {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
}

.hero-meta-pill strong {
  color: var(--clay-vivid);
  font-weight: 700;
}

.hero-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

@media (max-width: 959px) {
  .hero-media {
    margin-top: calc(-1 * var(--space-12));
  }
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------- Hero de impacto (o único momento "alto volume" da página) ---------- */
.hero-impact {
  position: relative;
  overflow: hidden;
  padding-block: 35px;
  background:
    linear-gradient(rgba(250, 249, 245, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 249, 245, 0.05) 1px, transparent 1px),
    linear-gradient(160deg, #0c0b0a 0%, #1b120c 45%, #2a1409 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  border-bottom-color: rgba(255, 90, 31, 0.25);
}

.hero-impact-glow {
  position: absolute;
  top: -25%;
  right: -8%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 90, 31, 0.55) 0%, rgba(255, 90, 31, 0) 70%);
  filter: blur(10px);
  pointer-events: none;
}

.hero-impact-figure {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  height: 133%;
  max-height: 893px;
  width: auto;
  z-index: 0;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}

.hero-impact-figure img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
}

@media (max-width: 720px) {
  .hero-impact-figure {
    top: 0;
    left: auto;
    right: 0;
    transform: translateX(calc(50% - 20px));
    height: 182%;
  }
}

/* Marcas decorativas com a imagem do Claude, espalhadas pelo fundo do hero
   em tamanhos/posições diferentes, com efeito alfa (opacidade baixa) — puramente
   decorativo, por isso são <div aria-hidden> vazias, fora da ordem de leitura.
   Usa a própria imagem como máscara CSS (em vez de <img>) pra poder colorir de
   laranja com background-color — mesmo resultado visual de um SVG colorido,
   sem depender de vetorizar o PNG. */
.hero-impact-motif {
  position: absolute;
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  background-color: var(--clay-vivid);
  -webkit-mask-image: var(--claude-mask);
  mask-image: var(--claude-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.hero-impact-motif-1 {
  top: -14%;
  right: -10%;
  width: 480px;
  max-width: 52vw;
  opacity: 0.2;
  transform: rotate(-8deg);
  filter: blur(3px);
}

.hero-impact-motif-2 {
  bottom: -18%;
  left: 0%;
  width: 340px;
  max-width: 38vw;
  opacity: 0.22;
  transform: rotate(12deg);
}

.hero-impact-motif-3 {
  top: 54%;
  right: 14%;
  width: 240px;
  max-width: 28vw;
  opacity: 0.24;
  transform: rotate(-16deg);
}

/* Marcas do Claude espalhadas pelo RESTO do site (fora do hero) — mesma técnica
   de máscara CSS, reaproveitável em qualquer seção. Posição/tamanho/rotação de
   cada instância vai inline no HTML (são só uns 20 usos pontuais, não vale a
   pena uma classe nomeada pra cada uma); aqui só o essencial (mask + cor +
   z-index) e os dois níveis de opacidade pedidos: sólida e em alfa. */
.site-motif {
  position: absolute;
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  background-color: var(--clay-vivid);
  -webkit-mask-image: var(--claude-mask);
  mask-image: var(--claude-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.site-motif-solid {
  opacity: 1;
}

.site-motif-alpha {
  opacity: 0.14;
}

.hero-impact .container {
  position: relative;
  z-index: 1;
}

.hero-impact .hero-eyebrow {
  color: rgba(250, 249, 245, 0.66);
}

.hero-impact .hero-eyebrow .dot {
  background: var(--clay-vivid);
  box-shadow: 0 0 12px 1px rgba(255, 90, 31, 0.8);
}

.hero-impact h1.text-display {
  color: #faf9f5;
}

.hero-impact .hero-lead {
  color: rgba(250, 249, 245, 0.76);
}


.hero-impact .btn-primary {
  background: var(--clay-vivid);
  border-color: transparent;
  color: #1a0d05;
  box-shadow: 0 10px 34px -8px rgba(255, 90, 31, 0.6), var(--btn-shadow);
}

.hero-impact .btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 6px 20px -6px rgba(255, 90, 31, 0.65), var(--btn-shadow-hover);
}

.hero-impact .btn-ghost {
  border-color: rgba(250, 249, 245, 0.3);
  color: #faf9f5;
}

.hero-impact .btn-ghost:hover {
  border-color: rgba(250, 249, 245, 0.55);
  background: rgba(250, 249, 245, 0.06);
}

.hero-media-impact {
  aspect-ratio: 7 / 4;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
}

.hero-media-impact img {
  object-fit: contain;
}

.hero-media-video {
  aspect-ratio: 16 / 9;
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.hero-media-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #000;
}

.hero-h1-small,
.text-heading-small {
  font-size: 0.5em;
}

.hero-lead-note {
  margin: 0 0 var(--space-6);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgba(250, 249, 245, 0.52);
}

/* ---------- Seções genéricas ---------- */
/* Brilho quente bem sutil no topo de cada seção clara, por cima do quadriculado
   do body (o próprio .section não pinta cor de fundo, só essa camada de
   gradiente — o grid continua aparecendo por trás, inclusive sob o brilho). */
.section {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-24);
  border-bottom: 1px solid var(--color-border);
  background-image: radial-gradient(60% 55% at 50% 0%, rgba(255, 90, 31, 0.15), transparent 70%);
  background-repeat: no-repeat;
}

.section:last-of-type {
  border-bottom: none;
}

/* Precisa ficar acima das marcas decorativas (.site-motif, z-index:0, position:absolute
   sem z-index positivo pintam DEPOIS do conteúdo em fluxo normal — ver nota em .site-motif). */
.section>.container,
.inverse-section>.container {
  position: relative;
  z-index: 1;
}

.section-header {
  max-width: 720px;
  margin: 0 auto var(--space-12);
  text-align: center;
}

.section-header .text-eyebrow {
  display: block;
  margin-bottom: var(--space-2);
}

.section-header h2 {
  margin: 0 0 var(--space-3);
}

.section-header p {
  margin: 0 auto;
  color: var(--color-ink-soft);
}

/* Seções "quietas" — tratamento "nebulosa no espaço", fixo e escuro em qualquer
   tema (mesmo compromisso do hero/CTA final: essas seções não seguem o toggle
   claro/escuro, então nunca mais ficam "apagadas" quando o visitante está em
   modo escuro). Camadas: (1) gradiente base + blooms coloridos = nebulosa,
   (2) ::before = campo de estrelas. */
.section-muted {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(55% 55% at 12% 10%, rgba(255, 138, 61, 0.30) 0%, transparent 62%),
    radial-gradient(50% 60% at 88% 20%, rgba(142, 108, 255, 0.22) 0%, transparent 65%),
    radial-gradient(65% 65% at 50% 105%, rgba(255, 90, 31, 0.20) 0%, transparent 70%),
    linear-gradient(180deg, #0c0b0a 0%, #171310 55%, #0c0b0a 100%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

#orquestracao {
  padding-top: 20px;
}

/* "Por que esta imersão" — mesma nebulosa, com a foto de orquestração como
   camada de fundo (o gradiente escuro fica translúcido em vez de opaco, pra
   deixar a imagem aparecer por baixo dos glows de cor). */
#diferenciais {
  padding-top: 50x;
  padding-bottom: 200px;
  background-image:
    radial-gradient(55% 55% at 12% 10%, rgba(255, 138, 61, 0.30) 0%, transparent 62%),
    radial-gradient(50% 60% at 88% 20%, rgba(142, 108, 255, 0.22) 0%, transparent 65%),
    radial-gradient(65% 65% at 50% 105%, rgba(255, 90, 31, 0.20) 0%, transparent 70%),
    linear-gradient(180deg, rgba(12, 11, 10, 0.8) 0%, rgba(23, 19, 16, 0.6) 55%, rgba(12, 11, 10, 0.88) 100%),
    url('../../Imgs/orquestracao.png');
  background-size: auto, auto, auto, auto, cover;
  background-position: 0 0, 0 0, 0 0, 0 0, center center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

.section-muted::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255, 255, 255, 0.55) 50%, transparent 100%),
    radial-gradient(1.4px 1.4px at 28% 68%, rgba(255, 255, 255, 0.4) 50%, transparent 100%),
    radial-gradient(1.8px 1.8px at 45% 15%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 62% 40%, rgba(255, 255, 255, 0.35) 50%, transparent 100%),
    radial-gradient(1.6px 1.6px at 75% 75%, rgba(255, 255, 255, 0.45) 50%, transparent 100%),
    radial-gradient(1.3px 1.3px at 88% 30%, rgba(255, 255, 255, 0.4) 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 95% 60%, rgba(255, 255, 255, 0.3) 50%, transparent 100%),
    radial-gradient(1.3px 1.3px at 20% 88%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  pointer-events: none;
}

.section-muted>.container {
  position: relative;
  z-index: 1;
}

/* Texto que fica direto sobre o fundo da nebulosa (fora dos cards brancos)
   precisa de cor fixa clara — os cards (.card, .faq-item) mantêm fundo branco
   e continuam usando as cores normais do sistema por dentro. */
.section-muted .text-eyebrow {
  color: rgba(255, 255, 255, 0.55);
}

.section-muted h2.text-heading {
  color: #faf9f5;
}

.section-muted .section-header p {
  color: rgba(255, 255, 255, 0.7);
}

.section-muted .simple-item p {
  color: rgba(255, 255, 255, 0.82);
}

.section-muted .simple-item p strong {
  color: #ffffff;
}

.section-muted .stat {
  border-top-color: rgba(255, 255, 255, 0.18);
}

.section-muted .stat strong {
  color: #faf9f5;
}

.section-muted .stat span {
  color: rgba(255, 255, 255, 0.55);
}

.section-muted .trust-strip {
  border-top-color: rgba(255, 255, 255, 0.14);
}

.section-muted .card-placeholder {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.6);
}

.section-muted .testimonial-who span:not(.pending),
.section-muted .instructor-role:not(.pending) {
  color: rgba(255, 255, 255, 0.45);
}

/* Bastidores — mesmo fundo escuro do antigo .bastidor-panel, mas na seção
   inteira (id em vez de classe, pra não virar um tratamento genérico
   reutilizável ainda: é um teste de layout, só texto por enquanto). Ao
   contrário de .section-muted, aqui o quadriculado continua visível por cima
   do gradiente escuro — daí as duas camadas de linha antes do gradiente base. */
#bastidores {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(rgba(250, 249, 245, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 249, 245, 0.06) 1px, transparent 1px),
    linear-gradient(160deg, #0c0b0a 0%, #1b120c 45%, #2a1409 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

#bastidores .text-eyebrow {
  color: rgba(255, 255, 255, 0.55);
}

#bastidores h2.text-heading {
  color: #faf9f5;
}

#bastidores .section-header p {
  color: rgba(255, 255, 255, 0.72);
}

#bastidores .section-header p strong {
  color: #ffffff;
}

#bastidores>.container>p.text-body {
  color: rgba(255, 255, 255, 0.72);
}

#bastidores>.container>p.text-body strong {
  color: #ffffff;
}

/* ---------- Programação (aulas) ---------- */
.schedule-list {
  display: grid;
  gap: var(--space-4);
  position: relative;
}

.schedule-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6);
  padding: var(--space-6);
}

/* Variante com imagem cobrindo o card inteiro (teste de copy) — o texto fica
   ancorado embaixo, sobre um gradiente laranja "de baixo pra cima" que garante
   leitura, deixando o topo da foto mais visível/limpo. */
.schedule-item-media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center 25%;
}

.schedule-item-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #170f0a 0%, rgba(23, 15, 10, 0.88) 30%, rgba(255, 90, 31, 0.3) 55%, rgba(255, 90, 31, 0) 90%);
  pointer-events: none;
}

.schedule-item-body {
  position: relative;
  z-index: 1;
  padding: var(--space-6);
}

.schedule-item-media .timeline-dot {
  z-index: 2;
}

/* ---------- Timeline (linha do tempo que revela conforme rola) ----------
   Trilho vertical + bolinhas alinhadas a cada item. Bolinhas grandes (blocos de
   conteúdo) pulsam em laranja vívido quando o bloco entra na tela; bolinhas
   pequenas (intervalo/almoço) só acendem, sem pulsar — o pulso é reservado
   para "aqui tem aula", não para pausas. Movimento reduzido é neutralizado
   globalmente pela regra prefers-reduced-motion já definida no topo deste
   arquivo (tokens.css), então nada extra é necessário aqui para acessibilidade. */
.timeline-rail {
  position: absolute;
  left: 18px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--color-border);
}

.timeline-item {
  position: relative;
  margin-left: 40px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.timeline-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.timeline-dot {
  position: absolute;
  top: 50%;
  left: -27px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--color-border);
  transition: background-color 0.4s var(--ease-out);
}

.timeline-dot-major {
  width: 14px;
  height: 14px;
}

.timeline-dot-minor {
  width: 9px;
  height: 9px;
  left: -24.5px;
}

.timeline-item.is-visible .timeline-dot-major {
  background: var(--clay-vivid);
}

.timeline-item.is-visible .timeline-dot-minor {
  background: var(--clay-vivid);
}

.timeline-dot-major::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--clay-vivid);
  opacity: 0;
  pointer-events: none;
}

.timeline-item.is-visible .timeline-dot-major::after {
  animation: timeline-pulse 1.8s ease-out infinite;
}

@keyframes timeline-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.55;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.6);
    opacity: 0;
  }
}

.schedule-num {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffffff;
  background: var(--clay-vivid);
  border: none;
  border-radius: var(--radius-full);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px -4px rgba(255, 90, 31, 0.55);
}

.schedule-item h3 {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 700;
}

/* Palavra-gancho do título maior que o resto — teste de copy (Dia 1) */
.card-title-word {
  font-size: 1.6em;
  line-height: 0.85;
  color: var(--clay-vivid);
  font-weight: 800;
}

.schedule-item p {
  margin: 0 0 var(--space-2);
  color: var(--color-ink-soft);
}

.schedule-date {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
}

/* Aviso em destaque dentro de um bloco da Programação (ex: pré-requisito
   obrigatório) — precisa de mais especificidade que ".schedule-item p" acima
   pra garantir fundo laranja + texto branco em vez do parágrafo padrão do card. */
.schedule-item .schedule-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: var(--space-3) 0 0;
  padding: 10px 14px;
  background: var(--clay-vivid);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: #ffffff;
}

.schedule-item .schedule-alert svg {
  flex: none;
  margin-top: 2px;
}

/* Linhas de intervalo/almoço — mais discretas que os blocos de conteúdo, para o olho
   distinguir rapidamente "aqui se aprende algo" de "aqui é pausa" */
.schedule-break {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-3);
  padding: 6px var(--space-4);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}

.schedule-break span:first-child {
  font-variant-numeric: tabular-nums;
}

.schedule-break span:last-child::before {
  content: "· ";
}

/* Divisor de dia (Dia 1 / Dia 2) — reaproveita o mesmo componente do
   .schedule-break, só mais robusto visualmente pra marcar a virada de dia,
   não apenas um intervalo dentro do mesmo dia. */
.schedule-break-day {
  gap: var(--space-2);
  padding: 10px var(--space-6);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-foreground);
}

.schedule-break-day span:first-child {
  color: var(--clay-vivid);
}

/* Desktop: trilho no meio. Os horários/intervalos viram um badge centralizado
   sobre o trilho (.schedule-break); só os blocos numerados (01–04) alternam de
   lado, via classe explícita .timeline-item-left/-right — mais robusto do que
   contar posição no HTML (uma tentativa anterior com :nth-child quebrava toda
   vez que a lista ganhava ou perdia um item). */
@media (min-width: 860px) {
  .schedule-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
    row-gap: var(--space-6);
  }

  .timeline-rail {
    left: 50%;
  }

  .timeline-item {
    margin-left: 0;
  }

  .timeline-item-left {
    grid-column: 1;
  }

  .timeline-item-right {
    grid-column: 2;
  }

  /* trilho fica no meio do gap de 56px (28px de cada lado); a bolinha de 14px
     precisa recuar mais 7px (metade da própria largura) pra ficar com o
     CENTRO dela em cima da linha, não a borda */
  .timeline-item-left .timeline-dot {
    left: auto;
    right: -35px;
  }

  .timeline-item-right .timeline-dot {
    left: -35px;
    right: auto;
  }

  /* Badge de horário/intervalo — centralizado sobre o trilho, ocupando as duas colunas */
  .schedule-break.timeline-item {
    grid-column: 1 / -1;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 8px 20px;
    box-shadow: var(--elevation-raised);
  }

  .schedule-break.timeline-item .timeline-dot {
    display: none;
  }

  .schedule-break.timeline-item::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clay-vivid);
    flex: none;
  }
}

/* ---------- Transformação (frase de impacto abaixo do hero) ---------- */
#transformacao h2.text-heading .text-accent-lg {
  font-size: 1.25em;
}

.transformacao-lead {
  font-size: clamp(1rem, 0.8vw + 0.8rem, 1.25rem);
}

.transformacao-instagram-img {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: var(--space-6) auto 0;
  border-radius: var(--radius-lg);
}

#orquestracao .section-header {
  margin-bottom: 0;
}

#orquestracao picture {
  display: block;
}

.orquestracao-img {
  display: block;
  width: 100%;
  max-width: 900px;
  margin-top: 0;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-floating);
}

@media (max-width: 767px) {
  .orquestracao-img {
    margin-top: -8px;
    border-radius: 0;
    box-shadow: none;
  }
}

.transformacao-punch {
  max-width: var(--reading-column);
  margin: var(--space-4) auto 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.8vw + 0.8rem, 1.25rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* ---------- Bastidores (como a gente mesmo usa IA) — timeline vertical ----------
   Reaproveita o MESMO componente de timeline da Programação (.schedule-list /
   .timeline-rail / .timeline-dot / [data-timeline]) — já resolvido e testado
   pra mobile (rail à esquerda, cards indentados) — só com skin escura e ícones
   coloridos por ramo em vez de números. Evita reinventar a responsividade. */
.bastidor-root {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.bastidor-root-mark {
  width: 34px;
  aspect-ratio: 1;
  margin: 0 auto 4px;
  background-color: var(--clay-vivid);
  -webkit-mask-image: var(--claude-mask);
  mask-image: var(--claude-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  filter: drop-shadow(0 0 10px rgba(255, 90, 31, 0.6));
}

.bastidor-root strong {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  color: #faf9f5;
}

.bastidor-root span {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: rgba(250, 249, 245, 0.55);
}

.bastidor-root::after {
  content: "";
  display: block;
  width: 2px;
  height: 32px;
  margin: var(--space-3) auto 0;
  background: linear-gradient(rgba(255, 90, 31, 0.55), rgba(255, 90, 31, 0.12));
}

.bastidor-timeline {
  margin-top: 0;
}

.bastidor-timeline .timeline-rail {
  background: rgba(255, 255, 255, 0.14);
}

.bastidor-timeline .timeline-dot {
  background: rgba(255, 255, 255, 0.2);
}

.bastidor-timeline .schedule-item {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.bastidor-timeline .schedule-item h3 {
  color: #faf9f5;
}

.bastidor-timeline .schedule-item p {
  color: rgba(250, 249, 245, 0.62);
  margin-bottom: 0;
}

/* .schedule-item-media usa background (atalho) na própria classe pra imagem de
   fundo — precisa vencer o "background" acima (mesma especificidade, mas essa
   regra roda antes), senão volta pro tamanho/posição padrão da imagem. */
.bastidor-timeline .schedule-item-media {
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
}

.bastidor-node-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
}

/* Todos os ícones em laranja (--clay-vivid), independente do modificador de
   cor (is-clay/is-sky/is-olive/is-kraft) — mantém as classes no HTML por
   enquanto, só unifica a cor visual entre os 4 ramos. */
.bastidor-node-icon.is-clay,
.bastidor-node-icon.is-sky,
.bastidor-node-icon.is-olive,
.bastidor-node-icon.is-kraft {
  background: rgba(255, 90, 31, 0.18);
  border-color: rgba(255, 90, 31, 0.5);
  color: var(--clay-vivid);
}

.bastidor-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bastidor-tag {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, var(--clay-vivid-bright), var(--clay-vivid));
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  padding: 6px 14px;
  box-shadow: 0 6px 16px -8px rgba(255, 90, 31, 0.6);
}

/* ---------- Grades (para quem é / transformação / diferenciais) ---------- */
.grid-3 {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-2 {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Bônus (prompts de imagem com IA) ---------- */
.bonus-grid {
  align-items: center;
  gap: var(--space-8);
}

.bonus-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bonus-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bonus-item .bump-tag {
  align-self: flex-start;
}

.bonus-item p {
  margin: 0;
}

.bonus-media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bonus-media img {
  display: block;
  width: 100%;
  max-width: 480px;
  filter: drop-shadow(0 30px 50px rgba(20, 20, 19, 0.28));
}

.simple-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.simple-item .icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--clay-vivid);
  color: #1a0d05;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8125rem;
  box-shadow: 0 4px 14px -4px rgba(255, 90, 31, 0.55);
}

.simple-item p {
  margin: 0;
}

/* ---------- Estatísticas ---------- */
.stat-row {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--space-12);
}

@media (min-width: 720px) {
  .stat-row {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.stat strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.stat span {
  color: var(--color-muted-foreground);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
}

/* ---------- Credibilidade (Fortune 100 / citação Anthropic) — vive dentro do
   #diferenciais (nebulosa fixa e escura), por isso as cores são fixas e não
   seguem o toggle claro/escuro, igual ao resto da seção. ---------- */
.credibility-row {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-top: var(--space-12);
}

@media (min-width: 720px) {
  .credibility-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

.credibility-card {
  border-top: 3px solid var(--clay-vivid);
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.credibility-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #faf9f5;
  margin-bottom: var(--space-4);
}

.credibility-heading,
.credibility-quote {
  margin: 0;
  color: var(--clay-vivid);
  font-size: 1.375rem;
  line-height: 1.4;
  font-weight: 700;
}

.credibility-quote {
  margin-bottom: var(--space-3);
}

.credibility-source {
  display: block;
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Instrutores ---------- */
.instructor-card {
  text-align: left;
}

.avatar-placeholder {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-muted);
  border: 1px dashed var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
  margin-bottom: var(--space-4);
}

/* Foto real de instrutor/depoimento (substitui .avatar-placeholder quando
   a pessoa já está confirmada) -- mesmo tamanho/formato circular, sem a
   borda tracejada (tracejado = convenção visual de "ainda pendente" no
   site inteiro). */
.avatar-photo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin-bottom: var(--space-4);
  display: block;
}

.instructor-card h3 {
  margin: 0 0 2px;
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 700;
}

.instructor-role {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--swatch-clay);
  margin-bottom: var(--space-3);
}

.instructor-card p {
  margin: 0;
  color: var(--color-ink-soft);
}

/* ---------- Prova social / logos ---------- */
.trust-strip {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.logos-row {
  /* Full-bleed: sai do .container (que tem max-width) e ocupa a largura
     inteira da viewport, independente do padding/centralização do resto
     da página. overflow-x:hidden no body (tokens.css) é o que impede
     isso de criar barra de rolagem horizontal. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.logos-track {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: max-content;
  padding-inline: var(--space-8);
  animation: logos-scroll 26s linear infinite;
}

.logos-row:hover .logos-track {
  animation-play-state: paused;
}

/* Nem largura fixa nem altura fixa sozinhas funcionam -- a wordmark da
   Anthropic é muito mais larga/fina que as outras (~8.7:1) e o glyph do
   Instagram é quadrado (1:1): uma altura igual faz a Anthropic dominar em
   largura; uma largura igual faz o Instagram virar um quadrado gigante.
   Por isso limita-se as duas dimensões ao mesmo tempo (como object-fit:
   contain) -- cada logo cabe dentro da mesma "caixa", a proporção de cada
   desenho decide se é a largura ou a altura que encosta no limite. */
.logo-chip-img {
  flex-shrink: 0;
  opacity: 0.8;
  width: auto;
  height: auto;
  max-width: 100px;
  max-height: 24px;
}

@keyframes logos-scroll {
  from {
    transform: translateX(0);
  }

  to {
    /* -50% porque a faixa duplica o conjunto de logos, pra fechar o loop sem corte visível */
    transform: translateX(-50%);
  }
}

/* ---------- Depoimentos ---------- */
.testimonial-card p.quote {
  margin: 0 0 var(--space-4);
  font-size: 1.0625rem;
}

.testimonial-who {
  display: flex;
  align-items: center;
  gap: 10px;
}

.testimonial-who .avatar-placeholder {
  width: 36px;
  height: 36px;
  margin-bottom: 0;
  font-size: 0.6875rem;
}

.testimonial-who strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

.testimonial-who span {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-muted-foreground);
}

/* ---------- Investimento ---------- */
.pricing-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 860px) {
  .pricing-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.price-card.is-featured {
  border-color: var(--swatch-clay);
  box-shadow: var(--shadow-clay);
}

.price-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.price-tag {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.price-was {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-muted-foreground);
  text-decoration: line-through;
  text-decoration-color: var(--color-destructive);
}

.price-now {
  font-family: var(--font-sans);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.price-now small {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-muted-foreground);
}

.price-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.price-includes li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 1rem;
}

.price-includes li::before {
  content: "✓";
  color: var(--color-success);
  font-weight: 700;
}

.bump-tag {
  align-self: flex-start;
  background: var(--color-primary-soft);
  color: var(--color-primary-deep);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

/* O card de order bump não tem CTA próprio — é só uma prévia do que aparece no
   checkout, então fica visualmente mais quieto (sem sombra) e nunca "compete" com
   o botão real de compra do card de ingresso. */
.price-card-bump {
  background: var(--color-muted);
  box-shadow: none;
}

.bump-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-muted-foreground);
}

.bump-note svg {
  flex: none;
  margin-top: 3px;
}

/* Lista de benefícios em bullet (ex: "Para quem é? Para quem quer:") — teste de copy */
.benefit-list {
  list-style: none;
  margin: var(--space-4) auto 0;
  padding: 0;
  display: inline-grid;
  gap: 10px;
  text-align: left;
}

.benefit-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.0625rem;
}

.benefit-list li::before {
  content: "✓";
  color: var(--clay-vivid);
  font-weight: 700;
  flex: none;
}

.section-muted .benefit-list li {
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- CTA final (inverse) ---------- */
.final-cta {
  text-align: left;
}

.final-cta .container {
  max-width: 900px;
}

.final-cta h2 {
  color: #faf9f5;
  margin: 0 0 var(--space-4);
}

.final-cta p {
  color: rgba(250, 249, 245, 0.72);
  max-width: var(--reading-column);
  margin: 0 0 var(--space-8);
}

.final-cta .badge {
  background: rgba(250, 249, 245, 0.08);
  color: rgba(250, 249, 245, 0.85);
  border-color: rgba(250, 249, 245, 0.18);
  margin-bottom: var(--space-4);
}

/* ---------- FAQ ---------- */
.faq-list {
  display: grid;
  gap: var(--space-3);
  max-width: var(--reading-column);
  margin-inline: auto;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--clay-vivid);
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

.faq-question .chevron {
  flex: none;
  transition: transform var(--duration-normal) var(--ease-out);
}

.faq-item[data-open="true"] .chevron {
  transform: rotate(180deg);
}

/* grid-template-rows 0fr→1fr em vez de max-height fixo: acompanha a altura real do
   texto (uma resposta longa não fica cortada) e ainda anima suavemente */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  padding-inline: var(--space-6);
  transition: grid-template-rows var(--duration-gentle) var(--ease-in-out);
}

.faq-answer>p {
  margin: 0 0 var(--space-4);
  color: var(--color-ink-soft);
  overflow: hidden;
  min-height: 0;
}

.faq-item[data-open="true"] .faq-answer {
  grid-template-rows: 1fr;
}

/* ---------- Footer ---------- */
/* Fundo laranja fixo (mesmo compromisso "sempre nessa cor" do hero/CTA final) —
   por isso os overrides de contraste abaixo: tudo que antes usava cores
   pensadas pro fundo claro (cinza mudo, --color-border, --clay-vivid em texto)
   precisa virar branco/translúcido pra continuar legível sobre o laranja. */
.site-footer {
  padding-block: var(--space-16) var(--space-8);
  background: #141413;
  color: #faf9f5;
}

.footer-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: var(--space-6);
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.footer-grid h4 {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0 0 var(--space-3);
  color: rgba(255, 255, 255, 0.5);
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.footer-grid a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
}

.footer-grid a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
}

.site-footer .brand {
  color: #faf9f5;
}

.site-footer .brand-mark {
  color: var(--clay-vivid);
}

.site-footer .text-muted {
  color: rgba(255, 255, 255, 0.6);
}

.site-footer .pending {
  color: var(--clay-vivid);
}

/* ---------- Utilidades de placeholder visível ---------- */
.pending {
  color: var(--clay-vivid);
  font-weight: 600;
}

/* Variante em badge sólido (fundo laranja + texto branco) — pra "pending" que
   precisa de mais destaque que o texto colorido sozinho, ex: hero-meta. Sem
   isso, texto laranja direto sobre fundo escuro/quadriculado fica meio "solto". */
.pending-badge {
  display: inline-flex;
  color: #ffffff;
  background: linear-gradient(135deg, var(--clay-vivid-bright), var(--clay-vivid));
  border-radius: var(--radius-full);
  padding: 3px 12px;
  font-size: 0.875rem;
  box-shadow: 0 6px 16px -8px rgba(255, 90, 31, 0.6);
}

/* ---------- Revelação genérica ao rolar (fora da Programação, que tem sua
   própria timeline) ---------- */
/* A classe .reveal-pending só é aplicada via JS (main.js) — se o JS não
   rodar, nada fica escondido (progressive enhancement: sem JS, tudo visível
   normalmente desde o carregamento). Transição combinada para não perder a
   animação de hover que .card já tem (mesma especificidade, a última regra
   do cascata vence a lista inteira de "transition", por isso repetimos
   background-color/box-shadow aqui). */
.reveal-pending {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out),
    background-color var(--duration-gentle) var(--ease-out), box-shadow var(--duration-gentle) var(--ease-out);
}

.reveal-pending.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Cascata leve dentro de cada grade — os itens não aparecem todos de uma vez */
.grid-2>.reveal-pending:nth-child(2),
.grid-3>.reveal-pending:nth-child(2),
.pricing-grid>.reveal-pending:nth-child(2) {
  transition-delay: 0.08s;
}

.grid-3>.reveal-pending:nth-child(3) {
  transition-delay: 0.16s;
}

.grid-3>.reveal-pending:nth-child(4) {
  transition-delay: 0.24s;
}

.grid-3>.reveal-pending:nth-child(5) {
  transition-delay: 0.32s;
}

.grid-3>.reveal-pending:nth-child(6) {
  transition-delay: 0.4s;
}