/* RESET BÁSICO */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  color: #111827;

  /* gradiente que estava no hero, agora no site inteiro */
  background: radial-gradient(circle at top left, #fef3c7 0, #ffffff 42%, #f3f4f6 100%);
}

/* ESTRUTURA GERAL (MOBILE FIRST) */

.page-brinquedo {
  min-height: 100vh;
}

/* TOPO */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

.topbar-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-logo {
  height: 18px;
  width: auto;
  display: block;
}

.topbar-actions {
  display: flex;
  gap: 12px;
}

.icon-button {
  border: none;
  background: transparent;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default; /* por enquanto só visual */
}

.icon-button img {
  width: 20px;
  height: 20px;
}

/* CONTEÚDO PRINCIPAL */

.content {
  max-width: 1120px;
  margin: 0 auto;
  padding: 84px 16px 132px; /* espaço pro topo fixo e rodapé */
}

/* BOTÕES GENÉRICOS */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: default;
  transition: transform 0.12s ease, box-shadow 0.12s ease,
    background-color 0.12s ease;
}

.btn-primary {
  background: #16a34a;
  color: #ffffff;
  box-shadow: 0 6px 0 #15803d;
}

.btn-primary:hover {
  transform: translateY(1px);
  box-shadow: 0 3px 0 #15803d;
}

.btn-ghost {
  background: #ffffff;
  color: #111827;
  border: 1px solid rgba(15, 23, 42, 0.12);
}

.btn-disabled {
  background: #e5e7eb;
  color: #6b7280;
}

/* “TAG” DE SEÇÃO */

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(192, 132, 0, 0.08);
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* HERO */

.hero {
  text-align: center;
  padding: 20px 18px 24px;

  /* sem card: sem borda arredondada, sem sombra, sem fundo próprio */
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hero-tag {
  font-size: 16px;      /* tamanho no mobile */
  color: #6b7280;
  text-align: center;   /* centraliza o texto */
  margin-bottom: 8px;
}

.hero-logo {
  margin-bottom: 10px;
}

/* Logo grande – mobile */
.hero-logo img {
  width: 150px;
  max-width: 65vw;
  height: auto;
  display: block;
  margin: 0 auto;
}

.hero-subtitle {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 18px;
}


/* imagem do kit */

.hero-image {
  margin: 16px 0 22px;
}

.hero-image img {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* CTAs hero */

.hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* SEÇÕES GENÉRICAS */

.section {
  margin-top: 32px;
}

.section-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 22px 18px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.section-header {
  text-align: left;
  margin-bottom: 18px;
}

.section-header h2 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 8px;
  margin-bottom: 6px;
}

.section-header p {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
}

/* COMO BRINCAR */

.cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-step {
  padding: 12px 14px;
  border-radius: 18px;
  background: #f9fafb;
  border: 1px solid rgba(148, 163, 184, 0.5);
}

.card-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #c08400;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}

.card-step h3 {
  font-size: 15px;
  margin-bottom: 4px;
}

.card-step p {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
}

/* PARA QUEM É */

.card-audience {
  padding: 14px 14px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.6);
}

.card-audience h3 {
  font-size: 15px;
  margin-bottom: 4px;
}

.card-audience p {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
}

/* MATERIAIS */

.materials-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.materials-column h3 {
  font-size: 15px;
  margin-bottom: 8px;
}

.materials-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.materials-item {
  padding: 10px 12px;
  border-radius: 14px;
  background: #f9fafb;
  border: 1px dashed rgba(148, 163, 184, 0.9);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.materials-title {
  font-size: 13px;
  color: #111827;
}

.materials-tag {
  font-size: 11px;
  color: #6b7280;
}

.materials-actions {
  margin-top: 16px;
  text-align: center;
}

/* PESQUISA / TCC */

.timeline {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-left: 2px solid rgba(192, 132, 0, 0.35);
  padding-left: 16px;
  margin-top: 10px;
}

.timeline-item {
  position: relative;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #c08400;
}

.timeline-item h3 {
  font-size: 15px;
  margin-bottom: 4px;
}

.timeline-item p {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.6;
}

.research-author {
  font-size: 13px;
  color: #374151;
  margin-top: 16px;
}

/* COMUNIDADE */

.community-list {
  list-style: disc;
  padding-left: 20px;
  font-size: 13px;
  color: #4b5563;
  line-height: 1.6;
}

/* RODAPÉ FIXO */

.bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #c08400;
  color: #ffffff;
  z-index: 30;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.3);
}

.bottombar-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bottombar-logo img {
  height: 18px;
  width: auto;
  display: block;
}

.icon-button--light img {
  width: 22px;
  height: 22px;
}
/* ===== HERO – LAYOUT V2 (MOBILE FIRST) ===== */

.hero {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 0 32px;
}

.hero-left,
.hero-right {
  width: 100%;
}

/* imagem do kit */
.hero-image {
  margin-bottom: 18px;
}

.hero-image img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* bloco "Projeto" + texto */
.hero-project-label {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.hero-project-text {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.7;
  margin-bottom: 18px;
  max-width: 420px;
}

/* botões embaixo do texto */
.hero-project-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* coluna da direita (logo + chips) */
.hero-right {
  text-align: center;
}

.hero-tag {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 6px;
}

.hero-logo {
  margin-bottom: 16px;
}

.hero-logo img {
  width: 180px;
  max-width: 70vw;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* chips de informação */
.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

/* chips de informação – igual ao Figma */
.hero-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.hero-meta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 10px 24px;
  border-radius: 999px;

  background: #F7F2FA;          /* cor do Figma */
  border: 1px solid #E5DDF5;    /* borda bem suave */

  /* dois drop-shadows como no Figma */
  box-shadow:
    0 1px 2px 0 rgba(0, 0, 0, 0.30),  /* X0 Y1 Blur2 Spread0 Opacidade 30% */
    0 3px 3px 1px rgba(0, 0, 0, 0.15);/* X0 Y3 Blur3 Spread1 Opacidade 15% */
}

.hero-meta-label {
  font-size: 12px;
  color: #6b7280;
}

.hero-meta-value {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

/* ===== DESKTOP (>= 1024px) ===== */
@media (min-width: 1024px) {
  .topbar-inner {
    padding: 14px 24px;
  }

  .topbar-logo {
    height: 22px;
  }

  /* container central no desktop */
  .content {
    max-width: 1120px;
    margin: 0 auto;
    padding: 120px 56px 160px; /* top, laterais, bottom */
  }

  /* HERO em duas colunas (layout do Figma) */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: center;
    text-align: left;
    padding: 48px 32px 40px;  /* respiro lateral */
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .hero-left {
    text-align: left;
  }

  .hero-right {
    text-align: left;
  }

  /* "Bem-vindo!" no desktop */
  .hero-tag {
    font-size: 22px;     /* tamanho maior no desktop */
    text-align: center;  /* continua centralizado na página */
    margin-bottom: 16px;
  }
}

  /* ===== HERO – LAYOUT V2 (DESKTOP) ===== */

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 56px;
    align-items: center;
    padding: 48px 0 40px;
  }

  .hero-left {
    text-align: left;
  }

  .hero-right {
    text-align: left;
    align-self: flex-start;
  }

  .hero-image {
    margin-bottom: 24px;
  }

  .hero-image img {
    max-width: 520px;
    margin: 0;           /* encosta na esquerda como no Figma */
  }

  .hero-project-text {
    max-width: 460px;
  }

  .hero-project-ctas {
    flex-direction: row;
    gap: 14px;
  }

  .hero-logo img {
    width: 260px;
    max-width: 100%;
  }

  .hero-meta {
    max-width: 360px;
  }

  .hero-tag {
    font-size: 13px;
  }

  .hero-logo {
    margin-bottom: 10px;
  }

  .hero-logo img {
    width: 260px;
    max-width: 100%;
  }

  .hero-subtitle {
    font-size: 15px;
    max-width: 420px;
  }

  .hero-meta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 460px;
  }

  .hero-meta-item {
    flex: 1 1 45%;
  }

  .hero-image {
    margin: 0;
    text-align: center;
  }

  .hero-image img {
    max-width: 480px;
  }

  .hero-ctas {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 16px;
  }

  .section {
    margin-top: 40px;
  }

  .section-card {
    padding: 24px 24px 26px;
  }

  .section-header h2 {
    font-size: 22px;
  }

  .cards--steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .cards--audience {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .materials-grid {
    flex-direction: row;
  }

  .materials-column {
    flex: 1 1 0;
  }
}

/* Botão fantasma "Conheça o projeto" e chips brancos – igual ao Figma */
.info-pill,
.cta-secondary,
.btn-ghost {
  background: #F7F2FA; /* mesma cor do Figma */
  color: #4B5563;

  box-shadow:
    0 1px 2px 0 rgba(0, 0, 0, 0.30),
    0 3px 3px 1px rgba(0, 0, 0, 0.15);

  border-radius: 999px;
}

/* ===== PÍLULAS (Idade / Modo de uso / Formato) ===== */
/* use aqui as classes que estão nos seus chips */
.hero-chip,
.hero-chip--large,
.info-pill {
  background: #F7F2FA;      /* mesma cor do botão do Figma */
  border-radius: 999px;

  /* sombreamento duplo igual ao Figma */
  box-shadow:
    0 1px 2px 0 rgba(0, 0, 0, 0.30),
    0 3px 3px 1px rgba(0, 0, 0, 0.15);

  border: 1px solid #E5E7EB;   /* borda bem suave, se quiser igual à UI */
}