/**
 * Preços do Curso — card com seletor de polo/ingresso, preço calculado, CTA e
 * disclaimer.
 *
 * Estrutura do resultado (espelhada em PHP render_estado_geral() e
 * JS renderResultado()) — v2, pedido de 27/08:
 *   .pucpr-precos__card              → clipa os cantos (overflow:hidden + radius)
 *     .pucpr-precos__preco-box       → faixa branca: título + preço da MATRÍCULA
 *                                      + badge (cupom/desconto próprio) ou pill
 *                                      + linhas de informação (Exibição básica)
 *   .pucpr-precos__cond              → bloco lilás com os textos de condição
 *   .pucpr-precos__reforco           → bloco "Selecione seu polo..." (estado inicial)
 *
 * Namespace: .pucpr-precos__*.
 * A aba "Invista na sua carreira" NÃO é gerada aqui (montada no Elementor).
 */

.pucpr-precos {
  --pucpr-precos-roxo: #863bff;
  --pucpr-precos-roxo-escuro: #3e0f8a;
  --pucpr-precos-rosa: #ffbbbb;
  --pucpr-precos-rosa-texto: #8a0538;
  --pucpr-precos-vermelho: #ff0040;
  --pucpr-precos-cinza-bg: #f5f0f2;
  --pucpr-precos-preto: #000000;
  --pucpr-precos-lilas: #e6d6fa;
  --pucpr-precos-verde-pastel: #e4e98d;
  /* Texto dos blocos lilás (.cond/.reforco): mais escuro que o roxo-escuro
     "de marca" porque, em 12px regular sobre um fundo colorido (não branco),
     o roxo-escuro puro lê como "fraco" mesmo com contraste WCAG adequado. */
  --pucpr-precos-roxo-texto-forte: #2a0a5e;

  /* Sem isso, max-width:393px vira só a área de conteúdo e os 30px de padding
     somam por fora — o card renderiza 453px (393 + 60), 60px mais largo que o
     frame do Figma (393px já incluindo o padding). O Elementor injeta um reset
     global border-box no frontend, mas o widget não deveria depender disso
     (mesmo raciocínio do .pucpr-botao, que já é auto-suficiente por esse motivo). */
  box-sizing: border-box;
  max-width: 393px;
  min-height: 440px;
  padding: 30px;
  border-radius: 20px;
  background: var(--pucpr-precos-cinza-bg);
  position: relative;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pucpr-precos,
.pucpr-precos *,
.pucpr-precos *::before,
.pucpr-precos *::after {
  box-sizing: border-box;
}

/* ---------- Seletores (polo / ingresso) ---------- */
.pucpr-precos__selects {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Cada seletor é um dropdown custom (botão + listbox) — o <select> nativo não
   deixa estilizar o menu. `position: relative` ancora o menu absoluto; no estado
   aberto o dropdown sobe acima do overlay de foco (z-index). */
.pucpr-precos__select {
  position: relative;
}

/* Gatilho: pílula branca (Figma 5728:3288 — px 20 / py 15, texto 16). */
.pucpr-precos__select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background-color: #ffffff !important;
  border: none;
  border-radius: 999px;
  padding: 15px 20px;
  font-family: "Source Sans Pro", sans-serif !important;
  font-size: 16px !important;
  text-align: left;
  color: var(--pucpr-precos-preto) !important;
  cursor: pointer;
}

.pucpr-precos__select-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pucpr-precos__select-chevron {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--pucpr-precos-preto);
  transition: transform 0.2s ease;
}

.pucpr-precos__select-chevron svg {
  display: block;
}

/* Aberto: seta invertida + dropdown acima do overlay de foco. */
.pucpr-precos__select.is-open {
  z-index: 20;
}

.pucpr-precos__select.is-open .pucpr-precos__select-chevron {
  transform: rotate(180deg);
}

/* Menu estilizado (Figma 5728:3291 — raio 25, padding 10, gap 5, sem sombra). */
.pucpr-precos__select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 21;
  margin: 0;
  padding: 10px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: #ffffff;
  border-radius: 25px;
  max-height: 320px;
  overflow-y: auto;
}

.pucpr-precos__select-menu[hidden] {
  display: none;
}

/* Opção (Figma — raio 15, padding 10/15, texto Source Sans 16). */
.pucpr-precos__select-option {
  padding: 10px 15px;
  border-radius: 15px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: var(--pucpr-precos-preto);
  cursor: pointer;
}

/* Item ativo (hover/teclado) e o selecionado — mesmo realce do layout (#f5f0f2). */
.pucpr-precos__select-option.is-active,
.pucpr-precos__select-option:hover,
.pucpr-precos__select-option[aria-selected="true"] {
  background: var(--pucpr-precos-cinza-bg);
}

/* ---------- Focus Mode: desfoca o conteúdo atrás do dropdown aberto ----------
   Valores do layout (Figma 5728:3287): overlay escuro translúcido + blur 5px. */
.pucpr-precos__overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  border-radius: 0 0 20px 20px;
  background: rgba(31, 23, 26, 0.25);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.pucpr-precos.is-focus .pucpr-precos__overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .pucpr-precos__select-chevron,
  .pucpr-precos__overlay {
    transition: none;
  }
}

/* ---------- Bloco de resultado ---------- */
.pucpr-precos__resultado {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Clipa os cantos: a faixa branca e a vermelha viram um bloco único. */
.pucpr-precos__card {
  border-radius: 20px;
  overflow: hidden;
}

.pucpr-precos__preco-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: #ffffff;
}

/* Linha preço × badge/pill dentro da faixa branca. */
.pucpr-precos__linha {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

/* Título editável acima do preço ("Matrícula", "1ª parcela"…). */
.pucpr-precos__titulo {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--pucpr-precos-roxo);
}

.pucpr-precos__valores {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Centraliza o bloco (riscado + preço) na altura da linha, que é ditada
	   pelo badge (mais alto) — alinhando-o ao centro da caixinha. */
  justify-content: center;
}

.pucpr-precos__valor {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 2px;
  line-height: 1;
  color: var(--pucpr-precos-roxo);
  font-family: "Poppins", sans-serif;
}

.pucpr-precos__moeda {
  font-size: 12px;
  font-weight: 400;
  color: var(--pucpr-precos-roxo);
}

.pucpr-precos__inteiro {
  font-size: 48px;
  font-weight: 700;
  color: var(--pucpr-precos-roxo);
}

.pucpr-precos__centavos {
  font-size: 12px;
  font-weight: 700;
  color: var(--pucpr-precos-roxo);
}

/* Linhas de informação (Exibição básica): mensalidades + investimento total. */
.pucpr-precos__infolines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pucpr-precos__infoline {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--pucpr-precos-preto);
  opacity: 0.7;
}

/* Preço cheio riscado — aparece sempre que há desconto no card. */
.pucpr-precos__riscado {
  font-size: 14px;
  font-weight: 600;
  color: var(--pucpr-precos-preto);
  opacity: 0.6;
  text-decoration: line-through;
  margin-bottom: 5px;
}

/* Ressalva da forma de ingresso (ex.: validação da nota do ENEM). */
.pucpr-precos__aviso {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: var(--pucpr-precos-rosa-texto);
  text-align: center;
}

.pucpr-precos__aviso::before {
  content: "ⓘ ";
}

/* ---------- Badge de desconto (bicolor) ---------- */
.pucpr-precos__badge {
  flex: 0 1 auto;
  align-self: stretch;
  max-width: 40%;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  overflow: hidden;
  text-align: center;
}

.pucpr-precos__badge-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: var(--pucpr-precos-rosa);
  color: var(--pucpr-precos-rosa-texto);
  font-family: "Source Sans Pro", sans-serif;
  font-size: 12px;
  line-height: 1.25;
}

.pucpr-precos__badge-main strong {
  font-size: 18px;
  font-weight: 700;
}

.pucpr-precos__badge-selo {
  background: var(--pucpr-precos-vermelho);
  color: #ffffff;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 12px;
  line-height: 1.2;
  padding: 5px 10px;
}

/* Pill de duração (variante simplificado). */
.pucpr-precos__pill--duracao {
  flex: 0 1 auto;
  align-self: stretch;
  min-width: 96px;
  max-width: 46%;
  border-radius: 15px;
  padding: 10px 12px;
  background: var(--pucpr-precos-rosa);
  color: var(--pucpr-precos-rosa-texto);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ---------- Badge do cupom (vermelho, com código copiável) ---------- */
.pucpr-precos__cupom {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  background: var(--pucpr-precos-vermelho);
  color: #ffffff;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}

.pucpr-precos__cupom-topo strong,
.pucpr-precos__cupom-topo b {
  font-size: 18px;
  font-weight: 700;
}

/* !important nas mesmas propriedades do .pucpr-precos__select-trigger (é um
   <button> real, igual este): o Kit Global do Elementor aplica
   `.elementor-kit-<id> button` (especificidade 0,2,0) em cima de background-
   -color/font-family/font-size/font-weight/color/border-radius de QUALQUER
   <button> do site — maior que a nossa classe única (0,1,0). Isso só aparece
   em ambiente com Elementor carregado (o wireframe estático em
   docs/wireframe/ nunca tem esse CSS, por isso o bug passou despercebido lá). */
.pucpr-precos__cupom-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(255, 255, 255, 0.85);
  border-radius: 999px !important;
  background: transparent !important;
  color: #ffffff !important;
  padding: 5px 10px;
  font-family: "Source Sans Pro", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  cursor: pointer;
}

.pucpr-precos__cupom-code:hover {
  background: var(--pucpr-precos-rosa-texto) !important;
  border-color: var(--pucpr-precos-rosa-texto);
}

.pucpr-precos__cupom-copy {
  margin-left: 4px;
  opacity: 0.85;
}

/* ---------- Bloco lilás de condição (textos configuráveis) ---------- */
.pucpr-precos__cond {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: 20px;
  padding: 15px 20px;
  background: var(--pucpr-precos-lilas);
  color: var(--pucpr-precos-roxo-texto-forte);
  font-family: "Source Sans Pro", sans-serif;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.pucpr-precos__cond-linha--destaque {
  background: var(--pucpr-precos-verde-pastel);
  color: var(--pucpr-precos-preto);
  border-radius: 10px;
  padding: 10px;
  width: 100%;
  font-weight: 700;
}

/* ---------- Bloco de reforço (estado sem seleção) ---------- */
/* Único bloco lilás com borda no Figma (nó 5981:3306: border-solid, cor "Roxo"
   #3e0f8a — var(--pucpr-precos-roxo-escuro) aqui, já que os nomes das duas
   variáveis estão invertidos entre Figma e este CSS). O bloco de condição
   (.pucpr-precos__cond) não tem borda no Figma — só este tem. */
.pucpr-precos__reforco {
  border: 1px solid var(--pucpr-precos-roxo-escuro);
  border-radius: 20px;
  padding: 15px 20px;
  background: var(--pucpr-precos-lilas);
  color: var(--pucpr-precos-roxo-texto-forte);
  font-family: "Source Sans Pro", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

/* Chama atenção enquanto polo/forma não forem selecionados
   (animar_condicao_reforco) sem NADA de geometria envolvida: só a cor de
   fundo varia (lilás ↔ um tom mais saturado, puxado pro roxo da marca).
   Nada de borda, contorno ou box-shadow aparecendo/crescendo — isso lia como
   o bloco "piscando" ou "se mexendo". Cor de fundo é a única coisa animada,
   então não há como o texto ou o card parecerem se mover. */
.pucpr-precos__reforco--pulse {
  animation: pucpr-precos-reforco-pulse 1.6s ease-in-out infinite;
}

@keyframes pucpr-precos-reforco-pulse {
  0%,
  100% {
    background-color: var(--pucpr-precos-lilas);
  }
  50% {
    background-color: #ceb0fb;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pucpr-precos__reforco--pulse {
    animation: none;
  }
}

/* ---------- CTA "Inscreva-se agora" ---------- */
/* Reutiliza o componente .pucpr-botao (widget Botão Hero): markup + hover
   (morph de cor + "pop" do círculo) vêm de botao-hero.css. Aqui só trocamos o
   esquema de cor via custom props e forçamos largura total (spec do Figma). */
.pucpr-precos .pucpr-botao-wrap {
  width: 100%;
  /* Com min-height no card (.pucpr-precos), o flex column deixa o espaço
     extra sobrando embaixo do último item por padrão — isso empurra o CTA
     (e o disclaimer, se houver) pro final do card em vez de flutuar acima
     de um vazio. */
  margin-top: auto;
}

/* Figma pede Poppins Medium (500) no texto do CTA; o componente compartilhado
   .pucpr-botao usa 600 (Semibold) — outros usos dele (Botão Hero) ficam como
   estão, o override é só aqui dentro do widget de Preços. */
.pucpr-precos .pucpr-botao__texto {
  font-weight: 500;
}

.pucpr-precos .pucpr-botao {
  --pucpr-btn-bg: var(--pucpr-precos-roxo);
  --pucpr-btn-bg-hover: var(--pucpr-precos-roxo-escuro);
  --pucpr-btn-text: #ffffff;
  --pucpr-btn-circle-bg: var(--pucpr-precos-roxo-escuro);
  --pucpr-btn-circle-fg: #ffffff;
  /* Sem "pop" da seta no hover: zera o deslocamento do círculo e o recuo do
	   corpo (só o morph de cor permanece). */
  --pucpr-btn-icon-pop-hover: 0px;
  --pucpr-btn-body-recede-hover: 0px;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

/* Hover igual ao CTA do FAQ: a pílula escurece pro roxo, o círculo vira
   verde-pastel e a seta fica escura (a seta permanece parada — o "pop" é
   desativado pelas custom props acima). */
.pucpr-precos .pucpr-botao:hover .pucpr-botao__icone,
.pucpr-precos .pucpr-botao:focus-visible .pucpr-botao__icone {
  background-color: #e4e98d;
  color: var(--pucpr-precos-preto);
}

.pucpr-precos .pucpr-botao:hover .pucpr-botao__icone svg,
.pucpr-precos .pucpr-botao:focus-visible .pucpr-botao__icone svg {
  fill: var(--pucpr-precos-preto);
}

/* Sem polo + forma de ingresso selecionados, o CTA fica sem href (JS) — aqui
   só damos a pista visual de que ele não está clicável ainda. */
.pucpr-precos .pucpr-botao.is-disabled {
  cursor: not-allowed;
}

/* ---------- Disclaimer ---------- */
.pucpr-precos__disclaimer {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #1e1e1e; /* "Preto Óleo" do layout — o disclaimer não usa o preto #000 */
}

/* ---------- Responsivo ---------- */
@media (max-width: 400px) {
  .pucpr-precos {
    padding: 25px;
  }
  .pucpr-precos__preco-box {
    padding: 16px;
  }
  .pucpr-precos__inteiro {
    font-size: 32px;
  }
  .pucpr-precos .pucpr-botao {
    --pucpr-btn-pad-left: 24px;
  }
}