/*
 * Página "Experiência DL2" (/experiencia/): um dia para viver a Dança Livre a Dois antes de decidir por um curso.
 *
 * Carregada depois de jornada.css, de quem herda o design system inteiro (cores, tipografia, botões, animações,
 * ingresso, garantia, dúvidas). Aqui ficam só o que muda nesta página:
 *   - a cor dos divisores, que é a da seção anterior (a ordem das seções é outra);
 *   - "No horário da sua turma": as duas turmas da Jornada, em portas em arco;
 *   - "Para quem é": o filtro, em dois cartões;
 *   - no ingresso, um botão de inscrição para cada horário.
 */

/* ---------- divisores: cor da seção anterior ---------- */

.cx .ci-mover .ci-shape {
  fill: var(--amarelo);
}

.cx .ci-encontro .ci-shape {
  fill: var(--laranja);
}

.cx .cx-filtro .ci-shape {
  fill: var(--off-white);
}

.cx .ci-depo .ci-shape {
  fill: var(--vinho-profundo);
}

.cx .ci-garantia .ci-shape {
  fill: var(--amarelo);
}

#para-quem:focus,
#agora:focus {
  outline: none;
  box-shadow: none;
}

/* ---------- 6. no horário da sua turma ---------- */

.cx-caminhos {
  background: var(--off-white);
}

/* a seção anterior é o mapa musical (fundo vinho profundo, assets/css/mapa-musical.css) */
.cx .ci-musica + .cx-caminhos .ci-shape {
  fill: var(--vinho-profundo);
}

.cx-portas {
  display: grid;
  gap: 22px;
  max-width: calc(640px + var(--gutter) * 2);
  margin-block: clamp(48px, 12vw, 80px);
}

/* no celular: porta à esquerda, texto à direita */
.cx-porta {
  display: grid;
  grid-template-columns: clamp(84px, 24vw, 120px) 1fr;
  align-items: center;
  gap: 20px;
  text-align: left;
}

.cx-portas .ci-arco {
  margin-top: 0;
}

.cx-porta:nth-child(2) {
  transition-delay: 0.1s;
}

.cx-porta__nome {
  font-size: clamp(1.375rem, 5.6vw, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--vinho-profundo);
}

.cx-porta__meta {
  margin-top: 4px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--laranja-forte);
}

/* datas abertas desta turma (o vendas.js mantém em dia e esconde quando não sobra nenhuma) */
.cx-porta__datas {
  margin-top: 2px;
  font-size: 0.9375rem;
  color: var(--vinho-profundo);
}

.cx-porta__datas::before {
  content: "Datas: ";
}

.cx-porta__desc {
  margin-top: 6px;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--texto);
  text-wrap: pretty;
}

/* ---------- 7. para quem é: o filtro ---------- */

.cx-filtro {
  background: var(--vinho-profundo);
}

.cx-lados {
  display: grid;
  gap: 20px;
  max-width: calc(980px + var(--gutter) * 2);
  margin-top: clamp(48px, 12vw, 72px);
}

.cx-lado {
  padding: clamp(28px, 7vw, 40px);
  border-radius: var(--radius-card);
  text-align: left;
}

.cx-lado--sim {
  background: var(--off-white);
  color: var(--texto);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.6);
}

.cx-lado--nao {
  border: 1.5px solid rgba(255, 246, 250, 0.3);
  color: var(--rosa-texto);
  transition-delay: 0.15s;
}

.cx-lado__titulo {
  font-size: clamp(1.375rem, 5.6vw, 1.75rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--vinho-profundo);
}

.cx-lado--nao .cx-lado__titulo {
  color: var(--rosa-claro);
}

.cx-lado ul {
  margin-top: 20px;
}

.cx-lado li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1.0625rem;
  line-height: 1.45;
}

.cx-lado li + li {
  margin-top: 14px;
}

.cx-lado--sim svg {
  flex: none;
  width: 15px;
  height: 23px;
  margin-top: 1px;
  fill: var(--laranja);
}

/* o que não é: um traço, não um "x" (é um aviso, não uma proibição) */
.cx-lado--nao li::before {
  content: "";
  flex: none;
  width: 15px;
  height: 2px;
  margin-top: 0.72em;
  border-radius: 2px;
  background: var(--laranja);
}

/* ---------- 9. ingresso: um botão para cada horário ---------- */

.cx-horarios__rotulo {
  margin-top: 28px;
  padding-inline: clamp(24px, 6vw, 44px);
  font-size: 1.0625rem;
  font-weight: 500;
  text-align: center;
  color: var(--rosa-claro);
}

.ci-ticket .cx-horarios .ci-btn {
  margin-top: 14px;
}

.ci-ticket .cx-horarios .ci-btn + .ci-btn {
  margin-top: 12px;
}

/* um botão por data (vendas.js): dia em cima, horário embaixo */
.ci-ticket .cx-horarios .cx-data {
  justify-content: space-between;
  text-align: left;
}

.cx-data__txt {
  display: grid;
  gap: 2px;
}

.cx-data__dia {
  font-weight: 600;
}

.cx-data__hora {
  font-size: 0.9375rem;
  font-weight: 400;
}

/* só o primeiro botão respira: dois chamando juntos viram alarme */
.js .ci-ticket.is-in .cx-horarios .ci-btn + .ci-btn {
  animation: none;
}

/* ---------- tablet e desktop ---------- */

@media (min-width: 768px) {
  .cx-portas {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .cx-porta {
    grid-template-columns: 1fr;
    align-content: start;
    text-align: center;
  }

  .cx-porta .ci-arco__porta {
    width: min(100%, 220px);
    margin-inline: auto;
  }

  .cx-lados {
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
  }
}