/* ==========================================================================
   Páginas de forma de ingresso (Vestibular, Enem, …)

   Um só arquivo para todas: o tema entra por .pagina-forma--<tema>, que define
   --forma-cor e --forma-cor-escura. Preço Fixo, Pravaler e os cards de outras
   formas vêm de components.css.
   ========================================================================== */

/* ---------- Temas ---------- */

.pagina-forma--verde {
  --forma-cor: var(--us-green);
  --forma-cor-escura: var(--us-green-dark);
}

.pagina-forma--sky {
  --forma-cor: var(--us-sky);
  --forma-cor-escura: var(--us-blue-light);
}

.pagina-forma--azul {
  --forma-cor: var(--us-blue);
  --forma-cor-escura: #002038;   /* amostrado do frame 2773-189 */
}

.pagina-forma--coral {
  --forma-cor: var(--us-coral);
  --forma-cor-escura: #7d0600;   /* amostrado do frame 2788-129 */
}

/**
 * Reabertura. Não tem card colorido, faixa de documentação nem calculadora —
 * o tema existe só para o contrato `.pagina-forma--<tema>` continuar valendo.
 */
.pagina-forma--escuro {
  --forma-cor: var(--gray-800);
  --forma-cor-escura: var(--black);
}

/* ==========================================================================
   Lista com chevron duplo (»)
   Usada no card promocional e na faixa de documentação.
   ========================================================================== */

.lista-chevron {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.lista-chevron li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}

.lista-chevron__icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.15em;
  color: var(--chevron-color, var(--forma-cor));
  stroke-width: 2.5;
}

/* ==========================================================================
   Intro
   ========================================================================== */

.forma-intro__grid {
  display: grid;
  gap: var(--sp-8);
  align-items: start;
}

@media (min-width: 64rem) {
  .forma-intro__grid {
    gap: var(--sp-10);
    /**
     * O card tem 558px fixos em todos os frames e o texto fica com a sobra —
     * no de 1512px dá 541px. O min() evita que perto de 1024px o card esmague
     * a coluna de texto.
     */
    grid-template-columns: minmax(0, 1fr) min(558px, 50%);
  }
}

.forma-intro__p {
  max-width: 32em;
  margin-top: var(--sp-4);
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-body);
}

.forma-intro__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  max-width: 23rem;
}

/* O edital do ENEM fica preservado no HTML, mas temporariamente fora da tela. */
.forma-intro__edital.is-hidden {
  display: none;
}

/* ==========================================================================
   Card promocional
   ========================================================================== */

.promo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sp-5);
  background: var(--surface-alt);
  border: 2px solid var(--forma-cor);
  border-radius: var(--radius-md);
}

@media (min-width: 48rem) {
  .promo {
    padding: var(--sp-6);
  }
}

@media (min-width: 64rem) {
  .promo {
    /* 420px é a altura do card no frame — dá espaço para o notebook inteiro. */
    min-height: 26.25rem;
  }
}

/**
 * Círculo pálido atrás da ilustração. Só na variante "oferta": nos frames do
 * ENEM e da 2ª Graduação o card é #f1f2f6 liso — o círculo existe para dar
 * profundidade ao notebook, então sem ilustração não faz sentido.
 */
.promo--oferta::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18%;
  right: -12%;
  width: 26rem;
  height: 26rem;
  background: var(--forma-cor);
  border-radius: var(--radius-pill);
  opacity: 0.12;
}

.promo__head {
  /* Acima da ilustração: sem isso o selo "Preço Fixo" fica atrás do notebook. */
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
}

.promo__etiqueta {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.promo__etiqueta-icon {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--forma-cor);
}

.promo__selo {
  --c: var(--forma-cor);
  flex: none;
}

.promo__oferta {
  position: relative;
  z-index: 1;
  max-width: 17rem;
  margin-top: var(--sp-8);
}

.promo__chamada {
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-h4), 1rem + 1vw, var(--fs-h3));
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.promo__destaque {
  color: var(--forma-cor);
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  font-weight: var(--fw-bold);
  line-height: 1.05;
}

.promo__itens {
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/**
 * A ilustração encosta na borda direita e é cortada por ela — é assim nos dois
 * frames. O que muda é o eixo: no desktop ela fica ao lado do texto (absoluta,
 * atrás dele); no mobile entra empilhada entre a etiqueta e a oferta.
 */
.promo--oferta {
  display: flex;
  flex-direction: column;
}

.promo__media {
  order: 1;
  /* Começa deslocada e vaza o padding do card à direita, como no frame mobile. */
  margin-right: calc(var(--sp-5) * -1);
  margin-left: 1.75rem;
}

/**
 * Sem recorte: o asset é retrato (690x924) e no mobile o frame desenha a
 * ilustração quase quadrada, mas cortá-la come a base do notebook. Preferimos a
 * ilustração inteira — o card fica ~90px mais alto que o frame.
 */
.promo__media img {
  width: 100%;
  height: auto;
}

.promo--oferta .promo__oferta {
  order: 2;
  margin-top: var(--sp-4);
}

@media (min-width: 48rem) {
  .promo__media {
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    width: 14.5rem;
    margin-right: 0;
    margin-left: 0;
  }


  .promo--oferta .promo__oferta {
    margin-top: var(--sp-8);
  }
}

@media (min-width: 64rem) {
  .promo__media {
    width: 17rem;
  }
}

/* ==========================================================================
   Documentação Necessária
   ========================================================================== */

.documentacao {
  --chevron-color: var(--white);
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-6);
  color: var(--white);
  /* Tom escuro -> tom base do tema, na diagonal (amostrado dos frames). */
  background: linear-gradient(to top right, var(--forma-cor-escura), var(--forma-cor));
  border-radius: var(--radius-md);
}

@media (min-width: 64rem) {
  .documentacao {
    gap: var(--sp-10);
    padding: var(--sp-8);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.documentacao__titulo {
  color: var(--white);
  font-size: clamp(1.5rem, 1.16rem + 1.4vw, var(--fs-h2));
}

.documentacao__texto {
  margin-top: var(--sp-3);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-snug);
}

.documentacao__itens {
  gap: var(--sp-4);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
}

/**
 * Na Transferência os chevrons são amarelos, não brancos — é assim nos dois
 * frames (2788-129 e 2709-52). Nos temas verde, sky e azul continuam brancos.
 */
.pagina-forma--coral .documentacao {
  --chevron-color: var(--us-yellow);
}

/* ==========================================================================
   Faixa Pravaler
   ========================================================================== */

.pravaler {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6);
  background: var(--white);
  border: 1px solid var(--us-orange);
  border-radius: var(--radius-md);
}

@media (min-width: 64rem) {
  .pravaler {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--sp-6) var(--sp-8);
  }
}

.pravaler__logo {
  width: auto;
  height: 1.75rem;
  margin-bottom: var(--sp-4);
}

.pravaler__titulo {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, var(--fs-h2));
}

.pravaler__sub {
  margin-top: var(--sp-1);
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.4vw, var(--fs-h3));
}

.pravaler__cta {
  min-width: 20rem;
  justify-self: start;
}

@media (min-width: 64rem) {
  .pravaler__cta {
    justify-self: end;
  }
}

/* ==========================================================================
   "Veja outras formas de ingresso:"
   ========================================================================== */

.formas__titulo {
  margin-bottom: var(--sp-6);
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.9rem + 0.5vw, var(--fs-h3));
  font-weight: var(--fw-regular);
}

/* ==========================================================================
   Card variante "calculadora" (Enem)
   ========================================================================== */

.promo--calculadora {
  /* Temporariamente desativada em todas as formas de ingresso. O restante do
     componente fica preservado para reativação futura. */
  display: none;
  flex-direction: column;
}

/* Sem o card, o texto do intro ocupa a largura disponível em vez de deixar uma
   segunda coluna vazia no desktop. */
@media (min-width: 64rem) {
  .forma-intro__grid:has(> .promo--calculadora) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.promo--calculadora .promo__head {
  margin-bottom: var(--sp-5);
}

.calc {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-4);
}

/**
 * O frame reserva o espaço entre o slider e o campo — é onde o ENEM tem o texto
 * de ajuda e a 2ª Graduação não tem nada. Empurrar o campo para baixo mantém as
 * duas variantes com o mesmo desenho.
 */
.calc__campo {
  margin-top: auto;
}

.calc__titulo {
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, var(--fs-h2));
}

.calc__instrucao {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
}

.calc__ajuda {
  color: var(--color-text-subtle);
  font-size: var(--fs-sm);
  line-height: var(--lh-md);
}

/* ---------- Slider ---------- */

/**
 * A parte preenchida da trilha é pintada com um background-image que o JS
 * atualiza via --calc-progresso. Sem JS o slider continua funcional, só sem o
 * preenchimento acompanhar (o valor inicial já vem correto do PHP).
 */
.calc__slider {
  --calc-progresso: 50%;
  width: 100%;
  height: 1.25rem;
  margin: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.calc__slider:focus-visible {
  outline-offset: 4px;
}

/* Trilha — Chrome/Safari */
.calc__slider::-webkit-slider-runnable-track {
  height: 0.75rem;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--forma-cor) 45%, white), var(--forma-cor)) no-repeat,
    var(--gray-200);
  background-size: var(--calc-progresso) 100%;
  border-radius: var(--radius-pill);
}

/* Trilha — Firefox */
.calc__slider::-moz-range-track {
  height: 0.75rem;
  background: var(--gray-200);
  border-radius: var(--radius-pill);
}

.calc__slider::-moz-range-progress {
  height: 0.75rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--forma-cor) 45%, white), var(--forma-cor));
  border-radius: var(--radius-pill);
}

/* Manopla */
.calc__slider::-webkit-slider-thumb {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.25rem;
  background: var(--forma-cor);
  border: 2px solid var(--white);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  appearance: none;
  -webkit-appearance: none;
}

.calc__slider::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  background: var(--forma-cor);
  border: 2px solid var(--white);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

/* ---------- Campo e botão ---------- */

.calc__campo {
  font-size: var(--fs-h3);
  text-align: center;
}

/* Esconde as setinhas do number: o slider já cumpre esse papel. */
.calc__campo::-webkit-outer-spin-button,
.calc__campo::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.calc__campo {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* No frame o botão é transparente sobre o card (#f1f2f6), não branco. */
.calc__cta {
  --btn-color: var(--forma-cor);
}

/* ==========================================================================
   Card variante "passos" (Reabertura)

   Ocupa o lugar do card promocional: mesma coluna do grid do intro, mas fundo
   escuro liso e uma lista ordenada em vez de calculadora.
   ========================================================================== */

.readmissao {
  padding: var(--sp-6);
  color: var(--white);
  /* Liso, não gradiente — ver README → Divergências. */
  background: var(--surface-dark);
  border-radius: var(--radius-md);
}

@media (min-width: 48rem) {
  .readmissao {
    padding: var(--sp-8);
  }
}

@media (min-width: 64rem) {
  .readmissao {
    /* 384px é a altura do card no frame 2794-735. */
    min-height: 24rem;
  }
}

/* Não escala: os dois frames trazem o título em 32px. */
.readmissao__titulo {
  color: var(--white);
  font-size: var(--fs-h2);
}

.readmissao__list {
  display: flex;
  flex-direction: column;
  /* 32px de respiro dá os 64px de passo entre itens medidos no frame. */
  gap: var(--sp-8);
  margin-top: var(--sp-8);
  list-style: none;
}

.readmissao__item {
  display: flex;
  gap: var(--sp-3);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-body);
}

/**
 * O número é decorativo: o <ol> já informa a ordem ao leitor de tela, e deixá-lo
 * visível para a leitura faria "1. um: Acesse…". Um <span> em vez do marcador
 * nativo porque o frame reserva uma calha de 32px que `::marker` não controla.
 */
.readmissao__num {
  flex: none;
  min-width: 1.25rem;
  font-weight: var(--fw-bold);
}

/* ==========================================================================
   Aproveitamento Acadêmico (2ª Graduação e Transferência)
   ========================================================================== */

.aproveitamento__grid {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

@media (min-width: 64rem) {
  .aproveitamento__grid {
    gap: var(--sp-10);
    /* 384px de ilustração + o resto para o texto, como no frame */
    grid-template-columns: 24rem minmax(0, 1fr);
  }
}

.aproveitamento__media img {
  width: 100%;
  height: auto;
}

.aproveitamento__text > * + * {
  margin-top: var(--sp-4);
}

.aproveitamento__cta {
  margin-top: var(--sp-6);
}