/* Bloco 6 (Como funciona), bloco 7 (Inscrição, faixa laranja) e rodapé */

.como { background: var(--grafite); }

.como-grid { display: grid; gap: 3.5rem; margin-top: clamp(2rem, 5vw, 3.5rem); align-items: start; }

/* Linha do tempo */

.linha-tempo li { position: relative; display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.1rem; padding-bottom: 2rem; }
.linha-tempo li:last-child { padding-bottom: 0; }
.linha-tempo li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(1.625rem - 1px);
  top: 3.5rem;
  bottom: 0.25rem;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--cinza) 0 5px, transparent 5px 11px);
}

.lt-n {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--laranja);
  color: var(--preto);
  font: 400 1.75rem/1 var(--display);
  padding-top: 0.1em;
}

.linha-tempo h3 { font: 700 1.25rem/1.2 var(--painel); text-transform: uppercase; letter-spacing: 0.01em; --bh: 1rem; }
.linha-tempo .bandeira { display: inline-block; margin-left: 0.4rem; vertical-align: -0.1em; }
.linha-tempo p { margin-top: 0.3rem; font-size: 1.0625rem; color: var(--creme); }
.linha-tempo li > div { padding-top: 0.5rem; }

/* Quem pode participar e quem avalia */

.quem .sub { margin-bottom: 1rem; }
.quem .lista-ok li { font-size: 1.0625rem; }
.quem .lista-ok li::before { background: var(--laranja); }

.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 2rem; }
.tri figure { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 0.25rem; background: var(--grafite-2); }
.tri figure:nth-child(2) { margin-top: 1.5rem; }
.tri img { width: 100%; height: 100%; object-fit: cover; }
.tri figure:last-child img { object-position: 68% 50%; }

.avalia { margin-top: clamp(3.5rem, 8vw, 6rem); padding-top: 2rem; border-top: 1px solid var(--linha); display: grid; gap: 1.5rem; }
.avalia-lista { display: grid; gap: 1.25rem; }
.staff { display: flex; align-items: center; gap: 1.1rem; }
.staff img { flex: none; width: 7.5rem; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: 0.25rem; }
.staff strong { display: block; font: 400 1.75rem/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.staff span { display: block; margin-top: 0.4rem; font: 400 0.9375rem/1.45 var(--texto); color: color-mix(in srgb, var(--creme) 84%, var(--grafite)); }

@media (min-width: 560px) { .avalia-lista { grid-template-columns: 1fr 1fr; } }

@media (min-width: 960px) {
  .como-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(2rem, 6vw, 6rem); }
  .avalia { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); align-items: center; }
  .staff img { width: 9.5rem; }
}

/* Bloco 7: faixa inteira laranja */

.inscricao { background: var(--laranja); color: var(--preto); }
.inscricao ::selection { background: var(--preto); color: var(--creme); }
.inscricao :focus-visible { outline-color: var(--preto); }
.inscricao .tit { font-size: clamp(2.75rem, 12.5vw, 6rem); line-height: 0.95; }

.insc-grid { display: grid; gap: 2rem; }

.regras { font: 500 1.0625rem/1.45 var(--texto); }
.regras li { padding-block: 0.4rem; }
.regras li::before { top: 0.7rem; }

.aviso { padding: 1.1rem 1.25rem; background: var(--preto); color: var(--creme); border-radius: 0.25rem; font-size: 0.9375rem; line-height: 1.55; }
.aviso b { color: var(--pessego); }

/* O que está incluído: folha de recibo, borda inferior serrilhada */

.inclui {
  padding: 1.25rem 1.5rem calc(1.5rem + 9px);
  background: var(--creme-claro);
  color: var(--preto);
  border-radius: 0.5rem 0.5rem 0 0;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, var(--preto) 1deg 89deg, #0000 90deg) 50% / 18px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, var(--preto) 1deg 89deg, #0000 90deg) 50% / 18px 100%;
}
.inclui-tit { padding-bottom: 0.9rem; border-bottom: 2px dashed var(--linha-escura); font: 400 clamp(1.5rem, 5vw, 1.875rem)/1 var(--display); letter-spacing: 0.02em; }
.inclui-lista li { padding-block: 0.6rem; border-bottom: 1px dashed var(--linha-escura); font: 400 0.9375rem/1.45 var(--texto); }
.inclui-lista li:last-child { border-bottom: 0; }
.inclui-lista li::before { top: 0.85rem; background: var(--laranja-escuro); }
.inclui-lista strong { display: block; font-size: 1rem; font-weight: 700; line-height: 1.4; }

/* Cartão de embarque */

.pass { position: relative; overflow: hidden; padding: 1.5rem; background: var(--creme-claro); border-radius: 0.5rem; box-shadow: 0 1.25rem 2.5rem rgb(11 11 12 / 0.28); }
.pass-cab { margin-bottom: 1.25rem; font: 700 0.75rem/1 var(--painel); letter-spacing: 0.22em; }

.pass-dados { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem 0.75rem; }
.pass-dados > div { grid-column: span 2; }
.pass-dados .w6 { grid-column: span 6; }
.pass-dados .w3 { grid-column: span 3; }
.pass-dados dt { font: 700 0.6875rem/1.2 var(--painel); letter-spacing: 0.16em; color: color-mix(in srgb, var(--preto) 68%, var(--creme-claro)); }
.pass-dados dd { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem; font: 400 clamp(1.5rem, 6.4vw, 2.25rem)/1.1 var(--display); letter-spacing: 0.03em; --bh: 1rem; }

.pass-corte { position: relative; margin: 1.5rem -1.5rem; border-top: 2px dashed var(--linha-escura); }
.pass-corte::before,
.pass-corte::after { content: ""; position: absolute; top: -0.875rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--laranja); }
.pass-corte::before { left: -0.75rem; }
.pass-corte::after { right: -0.75rem; }

.pass-preco { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.pass-preco strong { display: block; font: 400 clamp(2.25rem, 9vw, 3.25rem)/1 var(--display); letter-spacing: 0.02em; }
.pass-preco span { font: 700 0.8125rem/1.3 var(--painel); letter-spacing: 0.1em; text-transform: uppercase; }
.pass-preco .pass-de { display: block; margin-bottom: 0.2rem; }
.pass-vagas { text-align: right; }
.pass-vagas span { display: block; margin-bottom: 0.2rem; }
.pass-vagas strong { font-size: clamp(1.75rem, 7vw, 2.5rem); }

.pass-barra { width: 100%; max-width: 12rem; height: 2rem; margin-top: 1.25rem; color: var(--preto); }
.pass .btn { width: 100%; margin-top: 1.25rem; }

/* FAQ */

.faq-bloco { display: grid; gap: 1.5rem; margin-top: clamp(3.5rem, 8vw, 6rem); }

@media (min-width: 960px) {
  .insc-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas: "titulo pass" "inclui pass" "regras pass" "aviso pass";
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(2rem, 6vw, 6rem);
    row-gap: 2.5rem;
    align-items: start;
  }
  .insc-titulo { grid-area: titulo; }
  .pass { grid-area: pass; padding: 2rem; }
  .pass-corte { margin-inline: -2rem; }
  .inclui { grid-area: inclui; }
  .regras { grid-area: regras; }
  .aviso { grid-area: aviso; align-self: start; }
  .faq-bloco { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: clamp(2rem, 6vw, 6rem); }
}

/* Rodapé */

.rodape { padding: 3rem 0 calc(3rem + 4.5rem); background: var(--preto); border-top: 1px solid var(--linha); }
.rodape-in { display: grid; gap: 1.75rem; }
.rodape .logo-futedu { height: 2rem; }
.rodape .logo-nona { height: 3rem; }
.rodape p { max-width: 34rem; color: var(--cinza); }
.contato { display: grid; gap: 0.35rem; font: 500 0.9375rem/1.5 var(--painel); }
.contato a { color: var(--pessego); }

@media (min-width: 768px) {
  .rodape { padding-bottom: 3rem; }
  .rodape-in { grid-template-columns: auto 1fr auto; align-items: center; gap: 2.5rem; }
}