/* ==========================================================================
   03 · Seções compartilhadas (Home e páginas de curso)
   Blocos que aparecem iguais na Home e nas páginas de curso: imagens com zoom,
   divisores, indicadores, Metodologia, Intercâmbio, CTA final, Formas de
   ingresso e FAQ. Variações de uma página ficam no CSS daquela página, com
   seletor próprio (ex.: .imp-pg-curso .imp-faq__ajuda).
   Mobile-first: base = celular; 768 = tablet; 1024 = desktop; 1280 = desktop largo.
   ========================================================================== */

/* ---------- Imagens com zoom leve no hover (sempre dentro do próprio quadro) */
.imp-zoom { position: relative; overflow: hidden; margin: 0; }
.imp-zoom img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--imp-dur-zoom) var(--imp-ease-out); }
@media (hover: hover) {
  .imp-zoom:hover img { transform: scale(1.03); }
}
/* Entrada: a imagem é revelada de cima para baixo ao entrar na tela (só com JS).
   O recorte fica no quadro e o zoom na imagem, então os dois efeitos não competem. */
.imp-js .imp-zoom { clip-path: inset(0 0 100% 0); transition: clip-path var(--imp-dur-mask) var(--imp-ease-out); }
.imp-js .imp-zoom.is-visible { clip-path: inset(0); }

/* ---------- Divisores de imagem em largura total (sem zoom) */
.imp-divisor { position: relative; overflow: hidden; height: 300px; background: var(--imp-surface-sunken); }
.imp-divisor img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) {
  .imp-divisor { height: 500px; }
  .imp-divisor--robotica { height: 440px; }
  .imp-divisor--amigos { height: 720px; }
}
@media (min-width: 1024px) {
  .imp-divisor--robotica { height: 680px; }
}

/* ==========================================================================
   S2 · Credibilidade
   ========================================================================== */
.imp-cred { background: var(--imp-surface-sunken); padding: 48px 0; }
.imp-cred__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; }
.imp-cred__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
/* Algarismos de largura fixa: a contagem (js/comum.js) não faz o número oscilar */
.imp-cred__num { font-family: var(--imp-font-display); font-weight: 700; font-size: 36px; line-height: 36px; color: var(--imp-orange); font-variant-numeric: tabular-nums; }
.imp-cred__rotulo { font-size: 18px; line-height: 1.5; color: var(--imp-text-muted); }

@media (min-width: 768px) {
  .imp-cred__num { font-size: 38px; line-height: 40px; }
}
@media (min-width: 1024px) {
  .imp-cred__lista { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .imp-cred__item { min-height: 120px; padding: 0 16px; }
  .imp-cred__item + .imp-cred__item { border-left: 1px solid var(--imp-surface-overlay); }
  .imp-cred__num { font-size: 52px; line-height: 56px; }
}

/* ==========================================================================
   S8 · Metodologia
   ========================================================================== */
.imp-metodo { padding: 72px 0; }
.imp-metodo__topo { display: flex; flex-direction: column; gap: 96px; }
.imp-metodo__contorno { text-transform: uppercase; }
.imp-metodo__intro { margin-top: 24px; max-width: 640px; font-size: 18px; line-height: 1.5; color: var(--imp-text-muted); }
.imp-metodo__bloco { display: flex; flex-direction: column; gap: 40px; }
.imp-metodo__lead { font-family: var(--imp-font-display); font-weight: 500; font-size: 24px; line-height: 1.2; color: var(--imp-text-primary); }
.imp-metodo__duo { display: grid; grid-template-columns: 1fr; gap: 24px; }
.imp-metodo__duo .imp-text + .imp-text { margin-top: 16px; }
.imp-metodo__forte strong { color: var(--imp-text-primary); }

/* Innovation Labs */
.imp-ilabs__topo { display: flex; flex-direction: column; gap: 32px; }
.imp-ilabs__logo { margin: 0; width: 100%; max-width: 350px; }
.imp-ilabs__texto { display: flex; flex-direction: column; gap: 16px; }

/* Imagens de bloco: proporção natural de cada exportação do Figma */
.imp-metodo__img img { height: auto; }

/* Nanodegrees */
.imp-nano__lead { font-family: var(--imp-font-display); font-weight: 500; font-size: 20px; line-height: 28px; color: var(--imp-text-primary); }
.imp-nano__textos { display: flex; flex-direction: column; gap: 16px; }
.imp-nano__logos { display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; gap: 32px 24px; }
.imp-nano__logos img { width: auto; max-height: 52px; }

/* Plataforma */
.imp-plat__marca { display: flex; flex-direction: column; gap: 8px; }
.imp-plat__titulo { margin: 0; font-family: var(--imp-font-display); font-weight: 400; font-size: 26px; line-height: 1.1; }
.imp-plat__logos { display: flex; align-items: center; gap: 12px; }
.imp-plat__logos img:first-child { width: 150px; margin: -24px -8px -24px -8px; }
.imp-plat__logos img:last-child { width: 140px; }
.imp-plat__mais { font-family: var(--imp-font-display); font-size: 32px; line-height: 1; color: var(--imp-text-primary); }
.imp-plat__lead { font-family: var(--imp-font-display); font-weight: 500; font-size: 20px; line-height: 28px; color: var(--imp-text-muted); }
.imp-plat__texto { font-size: 18px; line-height: 1.5; color: var(--imp-text-muted); }

/* Career Labs */
.imp-career__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
.imp-career__texto { display: flex; flex-direction: column; gap: 16px; }
.imp-career__lead { font-family: var(--imp-font-display); font-weight: 500; font-size: 20px; line-height: 28px; color: var(--imp-text-primary); }
.imp-career__img { aspect-ratio: 636 / 397.5; }
.imp-career__empresas { display: flex; flex-direction: column; gap: 24px; }
.imp-career__rotulo { font-size: 16px; line-height: 1.25; text-transform: uppercase; color: var(--imp-text-secondary); }
.imp-career__logos { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: center; gap: 24px 16px; }
.imp-career__logos img { width: auto; max-height: 32px; }

@media (min-width: 768px) {
  .imp-metodo { padding: 100px 0; }
  .imp-metodo__topo { gap: 120px; }
  .imp-metodo__intro { font-size: 24px; }
  .imp-metodo__duo { grid-template-columns: 1fr 1fr; gap: 48px; }
  .imp-nano__logos { grid-template-columns: repeat(5, auto); justify-content: center; gap: 40px 48px; }
  .imp-plat__titulo { font-size: 32px; }
  .imp-career__logos { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 32px; }
}
@media (min-width: 1024px) {
  .imp-metodo { padding: 130px 0; border-top: 1px solid var(--imp-text-primary); }
  .imp-metodo__topo { gap: 160px; }
  .imp-metodo__bloco + .imp-metodo__bloco { margin-top: 20px; }
  .imp-metodo__lead { font-size: 32px; }
  .imp-metodo__duo { gap: 130px; }
  .imp-ilabs__topo { flex-direction: row; align-items: center; gap: 120px; }
  .imp-ilabs__logo { flex: none; width: 360px; max-width: none; }
  .imp-nano__lead { font-size: 24px; line-height: 32px; }
  .imp-nano__logos { gap: 48px 80px; }
  .imp-plat__titulo { font-size: 41.6px; }
  .imp-plat__logos img:first-child { width: 215px; margin: -32px -9px -32px -9px; }
  .imp-plat__logos img:last-child { width: 185px; }
  .imp-plat__texto { font-size: 20px; }
  .imp-career__grid { grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 24px; align-items: center; }
  .imp-career__texto { grid-column: 1 / 6; }
  .imp-career__img { grid-column: 6 / 15; }
  .imp-career__empresas { flex-direction: row; align-items: center; gap: 40px; margin-top: 24px; }
  .imp-career__rotulo { flex: none; max-width: 200px; line-height: 1.2; }
  .imp-career__logos { flex: 1; flex-wrap: nowrap; }
  .imp-career__logos img { opacity: 1; }
}
@media (min-width: 1280px) {
  .imp-ilabs__logo { width: 460px; }
  .imp-career__rotulo { max-width: none; }
}

/* ==========================================================================
   S9 · Intercâmbio
   ========================================================================== */
.imp-inter { padding: 72px 0; }
.imp-inter__topo { display: grid; grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
.imp-inter__lead { font-family: var(--imp-font-display); font-weight: 500; font-size: 20px; line-height: 28px; color: var(--imp-text-primary); }
.imp-inter__img { aspect-ratio: 350 / 263; }
.imp-inter__texto { margin-top: 24px; }

@media (min-width: 768px) {
  .imp-inter { padding: 128px 0; }
  .imp-inter__img { aspect-ratio: 1400 / 426; }
}
@media (min-width: 1024px) {
  .imp-inter { padding: 200px 0; }
  .imp-inter__topo { grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; margin-bottom: 16px; }
  .imp-inter__lead { font-size: 24px; line-height: 32px; max-width: 640px; }
}

/* ==========================================================================
   S18 · CTA final
   ========================================================================== */
.imp-cta { padding: 72px 0; }
.imp-cta__grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
.imp-cta__nota { margin-top: 24px; }
.imp-cta .imp-link-arrow { text-align: left; }

@media (min-width: 768px) {
  .imp-cta { padding: 100px 0; }
}
@media (min-width: 1024px) {
  .imp-cta { padding: 130px 0; }
  .imp-cta__grid { grid-template-columns: minmax(0, 1fr) 395px; align-items: center; gap: 64px; }
  .imp-cta .imp-title-section { max-width: 540px; }
  .imp-cta .imp-vest .imp-btn { white-space: nowrap; }
}
@media (min-width: 1280px) {
  .imp-cta__grid { grid-template-columns: minmax(0, 1fr) 395px; padding-right: 110px; }
}

/* ==========================================================================
   S15 · Formas de ingresso
   ========================================================================== */
.imp-ingresso { padding: 72px 0; }
.imp-ingresso__cab { display: flex; flex-direction: column; gap: 12px; text-align: center; margin-bottom: 40px; }
.imp-ingresso__lista { border: 1px solid rgba(255, 255, 255, .15); }
.imp-ingresso__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 28px 20px;
  background: rgba(4, 4, 5, .5);
  transition: background-color var(--imp-dur-fast) ease;
}
.imp-ingresso__item + .imp-ingresso__item { border-top: 1px solid rgba(255, 255, 255, .15); }
.imp-ingresso__num { font-weight: 500; font-size: 16px; line-height: 20px; color: #00d8ff; }
.imp-ingresso__nome { font-family: var(--imp-font-display); font-weight: 500; font-size: 26px; line-height: 1.1; text-transform: uppercase; }
.imp-ingresso__desc { font-size: 18px; line-height: 1.5; color: var(--imp-text-muted); }
.imp-ingresso__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 1.12px;
  text-transform: uppercase;
  color: var(--imp-text-primary);
}
/* Linha inteira clicável; o foco fica visível na linha */
.imp-ingresso__cta::after { content: ""; position: absolute; inset: 0; }
.imp-ingresso__cta:focus-visible { outline: none; }
.imp-ingresso__item:focus-within { outline: 2px solid var(--imp-text-primary); outline-offset: -2px; }
.imp-ingresso__cta .imp-ico { transition: transform var(--imp-dur-fast) ease; }
.imp-ingresso__vest { margin-top: 56px; }
.imp-ingresso__vest-btn { width: 100%; max-width: 390px; white-space: normal; }

@media (hover: hover) {
  .imp-ingresso__item:hover { background: rgba(5, 216, 255, .06); }
  .imp-ingresso__item:hover .imp-ingresso__cta .imp-ico { transform: translate(2px, -2px); }
}

@media (min-width: 768px) {
  .imp-ingresso { padding: 100px 0; }
  .imp-ingresso__item { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 32px 24px; }
  .imp-ingresso__nome { font-size: 28px; }
}
@media (min-width: 1024px) {
  .imp-ingresso { padding: 160px 0 128px; }
  .imp-ingresso__cab { margin-bottom: 40px; }
  .imp-ingresso__item { grid-template-columns: 120px minmax(0, 480px) minmax(0, 1fr) 200px; gap: 0; padding: 32px 40px; }
  .imp-ingresso__num { font-size: 20px; }
  .imp-ingresso__nome { font-size: 40px; padding-right: 24px; }
  .imp-ingresso__cta { justify-content: flex-end; color: var(--imp-cyan); }
  .imp-ingresso__cta span { opacity: 0; transition: opacity var(--imp-dur-fast) ease; }
  .imp-ingresso__cta .imp-ico { color: var(--imp-text-primary); }
  .imp-ingresso__item:hover .imp-ingresso__cta span, .imp-ingresso__item:focus-within .imp-ingresso__cta span { opacity: 1; }
  .imp-ingresso__item:hover .imp-ingresso__cta .imp-ico, .imp-ingresso__item:focus-within .imp-ingresso__cta .imp-ico { color: var(--imp-cyan); }
}
/* Sem hover (toque): "Saiba mais" sempre visível */
@media (min-width: 1024px) and (hover: none) {
  .imp-ingresso__cta span { opacity: 1; }
}

/* ==========================================================================
   S16 · FAQ
   ========================================================================== */
.imp-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-top: 40px;
  /* Linha superior só na largura útil do container */
  background: linear-gradient(var(--imp-text-primary), var(--imp-text-primary)) no-repeat var(--imp-gutter) 0 / calc(100% - 2 * var(--imp-gutter)) 1px;
}
.imp-faq__ajuda { margin-top: 40px; }
.imp-faq__ajuda-titulo { font-family: var(--imp-font-display); font-weight: 500; font-size: 20px; line-height: 28px; color: var(--imp-orange); }
.imp-faq__ajuda-acoes { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.imp-faq__ajuda-acoes .imp-btn { white-space: normal; }

@media (min-width: 768px) {
  .imp-faq__ajuda-acoes { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 1024px) {
  .imp-faq__grid { grid-template-columns: minmax(0, 440px) minmax(0, 832px); justify-content: space-between; padding-top: 48px; }
  .imp-faq__btn:first-child { padding-top: 0; }
  .imp-faq__ajuda { margin-top: 40px; }
}