html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

/* Mídia nunca ultrapassa o container */
img,
video,
iframe {
  height: auto;
}

/* Evita qualquer scroll horizontal acidental dentro da section */
.feature {
  overflow-x: clip;
}

/* use hidden se quiser mais compatibilidade */

/* .bg__hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/bg_st.svg');
} */

.section__title--hero {
  font-size: 3.2rem;
  text-align: start;
}


/* Sobre estágio*/
/* Tema e objetivo do programa */

.media--sobre {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
}

.container__tema-objetivo {
  /* display: flex;
   flex-direction: row;
   gap: 48px;
   width: 100%;
   flex-wrap: wrap; */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3.2vw, 44px);
  align-items: start;
}


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

.card__tema-container {
  display: flex;
  width: 100%;
  flex-direction: row;
  gap: 12px;
}


.card__tema-title {
  color: var(--black);
  font-family: Afacad;
  text-align: left;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
}

.card__tema-icon img {
  width: 92px;
}

.card__tema-text {
  color: var(--black);
  font-family: Afacad;
  font-size: 16px;
  text-align: left;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin: 24px;
}

.roadmap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
}

.roadmap__container {
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.roadmap__title {
  color: var(--black);
  font-family: Afacad;
  font-size: 24px;
  text-align: left;
  font-style: normal;
  font-weight: 700;
}

.roadmap_icon img {
  width: 100%;
}

.roadmap__container-cards {
  display: flex;
  flex-direction: row;
  gap: 24px;
  justify-content: center;
  align-items: center;
}

/* Wrapper com linha central contínua */
.roadmap__wrap {
  width: min(100%, var(--feature-maxw));
  position: relative;
  display: grid;
  row-gap: clamp(18px, 3vw, 28px);
}

.roadmap__wrap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-2px);
  width: 4px;
  background: linear-gradient(180deg, var(--orange), var(--orange-red));
  border-radius: 4px;
  opacity: .95;
}

/* Camada dos pontos (JS posiciona) */
.roadmap__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* não bloqueia clique/seleção */
}

.roadmap__dot {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--orange-light);
  box-shadow: 0 0 0 4px var(--bg-page), 0 0 0 6px var(--orange-light);
  z-index: 1;
}

/* Cada etapa (row) com 3 colunas no desktop */
.roadmap__row {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  align-items: center;
  column-gap: clamp(18px, 3.2vw, 44px);
}

/* Alternância automática: ímpares esquerda, pares direita */
.roadmap__card {
  grid-column: 1;
}

.roadmap__row:nth-of-type(even) .roadmap__card {
  grid-column: 3;
}

/* Cards */
.roadmap__card {
  background: #0b1b24;
  color: var(--white);
  height: 238px;
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 -9px 8.9px 2px rgba(0, 0, 0, 0.05), 0 16px 16.8px -8px rgba(0, 0, 0, 0.07);

}

.roadmap__card--accent {
  background: linear-gradient(180deg, var(--orange), var(--orange-red));

}

.roadmap__card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  border-radius: 19px 19px 0 0;
  padding: 12px 24px;
  color: var(--black);
  opacity: .95;
  background: var(--white);
}

.roadmap__icon {
  inline-size: 24px;
  block-size: 24px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 24px !important;
  font-weight: 700;
}

.roadmap__card--accent .roadmap__icon {

  color: var(--orange-light);
}

.roadmap__title-sm {
  font: 600 20px/1.05 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.roadmap__text {
  margin-top: 8px;
  padding: 24px 24px;
  font: 400 18px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: #f1f5f9;
}

.roadmap__card--accent .roadmap__text {
  color: #fffdfb;
}

/*objective*/


.section__title--objective {
  text-align: left;
}

.section__title--large--objective {
  text-align: left;
}

.section__text--objective {
  text-align: left;
  padding: 0 50% 0 0;
}



.objective_glass-card {
  display: flex;
  width: 310px;
  padding-bottom: 24px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  height: 480px;
  background: linear-gradient(154deg, rgba(13, 56, 73, 0.09) 4.25%, rgba(32, 134, 175, 0.09) 96.78%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.177);

  position: relative;
  overflow: hidden;
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}


.objective__est-text-card {
  display: flex;
  padding: 24px 12px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

.objective_glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.8),
      transparent);
}

.objective__container-cards {
  display: flex;
  gap: 96px;
  margin: 0 auto;
  padding: 20px 0;
  flex-direction: row;
  /* Desktop padrão */
  align-items: center;
  justify-content: space-between;
}

.objective__est-title-card {
  display: flex;
  padding: 24px 12px;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}

.objective__est-icon-card img {
  width: 100%;
  z-index: -1px;
  position: relative;
  top: 0;
}


.objective__est-title {
  color: var(--white);
  text-align: center;

  font-family: Afacad;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}

.objective__est-text-card {
  display: flex;
  padding: 0px 12px 24px 12px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

.objective__est-text-card p {
  color: var(--white);
  opacity: 0.7;
  text-align: center;
  font-family: Afacad;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;

}

.tag__card {
  display: flex;
  height: 68px;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 10px;
  align-self: stretch;
  flex-wrap: wrap;
}

.tag__continer {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 57px;
  border: 1px solid rgba(255, 255, 255, 0.177);
  background: linear-gradient(90deg, rgba(13, 56, 73, 0.36) 5.22%, rgba(255, 255, 255, 0.12) 100%);
  box-shadow: 4px 5px 8.4px 0 rgba(0, 0, 0, 0.09);
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tag__continer:hover {
  transform: scale(1.09);
}

.tag__text {
  color: #FFF;
  text-align: center;
  font-family: Afacad;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
}


/* Projetos */

.section_content--projetos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3.2vw, 44px);
  align-items: start;
}

.game_project_text {
  color: var(--white);
  font-family: Afacad;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.section__container-title--pro-est {
  flex: 1 1 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: baseline;
}

.container__game-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: clamp(18px, 3.2vw, 44px);
  align-items: start;
}

.pro_est__container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: end;
  gap: 24px;
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.pro_est__container:hover {
  transform: scale(1.2);
}

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

.name__game {
  color: var(--white);
  font-family: Afacad;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}

.dev__game {
  color: var(--grey-light3);
  font-family: Afacad;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
}

/* Princípios */
.section__container-title--prin-est {
  padding-right: 50%;
}


.prin__container-card1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 24px;
  width: 100%;
}

.prin_card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.prin__est-title-card {
  color: var(--black);
  font-family: Afacad;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  /* 32px */
}

.prin__est-text-card {
  color: var(--grey);
  font-family: Afacad;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  margin: 12px 0px 24px 0px;

}

/* games page */
/* a section não precisa mais de padding-top do menu */
.feature {
  /* defaults (JS sobrescreve por slide) */
  --feature-bg: linear-gradient(0, #ffffff 0%, #ffffff 100%);
  --feature-bg-position: center;
  --feature-bg-size: cover;
  --feature-bg-repeat: no-repeat;
}

.slide__game__preview {
  background: var(--feature-bg);
  background-position: var(--feature-bg-position);
  background-size: var(--feature-bg-size);
  background-repeat: var(--feature-bg-repeat);
  /* ajuste visual: */
  background-origin: border-box;
  background-clip: padding-box;
  aspect-ratio: 800/450;
  width: 75%;
  border-radius: 10px;
  position: relative;
}

.btn__game {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .feature {
    transition: none;
  }
}


/* garante que menu/slider fiquem acima do fundo */
.feature__menu,
.slider {
  position: relative;
  z-index: 1;
}

/* container do menu centralizado */
.tabs {
  width: 100%;
  max-width: var(--feature-maxw, 1200px);
  /* garante limite mesmo se a var não existir */
  margin: 0 auto;

}

.tabs__list {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding-block: 48px;
  padding-inline: 0;
  /* mantemos centralizado se quiser */
  list-style: none;
  overflow-x: auto;
  /* rola só aqui, não na página */
  overflow-y: visible;
  /* sombras/blur dos cards aparecem */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  justify-content: center;
  /* pode trocar pra flex-start se preferir */
  contain: paint;
  /* isola a pintura; transform/blur não vaza */
}

/* ====== Quebra responsiva via CSS (sem JS) ====== */
/* Inline: títulos/subtítulos das abas */
.js-br-inline {
  white-space: normal;
}

@media (min-width: 821px) {
  .js-br-inline {
    white-space: pre-line;
  }

  /* \n => quebra */
}

/* Blocos: parágrafos internos dos slides/cards */
.js-br {
  white-space: normal;
}

@media (min-width: 821px) {
  .js-br {
    white-space: pre-line;
  }

  /* \n => quebra */
}

/* Espaçamento entre parágrafos gerados */
.slide__p>p:not(:last-child),
.character-card__text>p:not(:last-child),
.info-card__text>p:not(:last-child) {
  margin-bottom: 0.75em;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
}

.tabs__list {
  position: relative;
  scroll-behavior: smooth;
  /* suaviza o scroll programático */
}

.tabs__indicator {
  position: absolute;
  bottom: 12px;
  /* ajuste fino conforme seu padding */
  height: 3px;
  border-radius: 2px;
  background: var(--orange-light);
  width: var(--indicator-w, 0px);
  transform: translateX(var(--indicator-x, 0px));
  transition: transform 250ms ease, width 250ms ease;
  pointer-events: none;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tabs__indicator {
    transition: none;
  }
}

.tabs__tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 264px;
  min-width: 150px;
  padding: var(--space-1);
  cursor: pointer;
  text-align: left;
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease, border-color var(--transition-fast) ease, margin-right var(--transition-fast) ease;

  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  background: linear-gradient(96deg, rgba(255, 255, 255, 0.16) 0.54%, rgba(255, 255, 255, 0.16) 97.17%);
  box-shadow: 0 2.052px 2.052px 0 rgba(0, 0, 0, 0.06);
  height: 100%;
}

.tabs__tab[aria-selected="true"], .tabs__tab:hover {
  transform: scale(1.19);
  margin: 0 24px;
  box-shadow: 0 10px 28px rgba(242, 97, 34, .18);
}

.tabs__tab[aria-selected="true"] .tabs__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 120%; 
}

/* .tabs__tab:hover {
  transform: scale(1.19);
  margin: 0 16px;
} */

.tabs__tab:focus-visible {
  outline: 3px solid #111;
  outline-offset: 2px;
}

.tabs__media {
  inline-size: 115px;
  block-size: 67px;
  border-radius: 10px;
  flex: 0 0 115px;
  overflow: hidden;
}

.tabs__media img {
  inline-size: 100%;
  block-size: 113%;
  object-fit: cover;
  display: block;
}

.tabs__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: flex-start;
  padding-top: 4px;
}

.tabs__title {
  color: var(--white);
  font-family: "Exo 2";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; 
}

.tabs__subtitle {
  color: var(--white);
  font-family: Saira;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  opacity: 0.7;
}

/* ===========================
   Slider / painéis
   =========================== */
.slider {
  width: 100%;
  max-width: var(--feature-maxw, 1200px);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.slider__panel {
  border-radius: var(--radius);
  margin-block: var(--space-3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition-med) ease, transform var(--transition-med) ease;
}

.slider__panel[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .slider__panel {
    transition: none;
  }
}

/* Blocos internos do slide (BEM) */
.slide {
  display: grid;
  /* gap: clamp(var(--space-3), 3vw, var(--space-4)); */
  justify-content: center;
  justify-items: center;
}

.slide__intro,
.slide__narrative,
.slide__tech,
.slide__game {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.slide__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  gap: 56px;
  max-height: 840px;
}

.slide__content_text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 56px;
}

.slide__characters {
  width: fit-content;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 40px;
  max-width: 358px;
  height: 100%;
} 

.slide__content_text, .slide__characters {
  overflow: hidden;
}

.slide__title {
  color: var(--white);
  font-family: Exo;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.slide__kicker {
  color: var(--white);
  font-family: Exo;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.slide__p {
  color: var(--white);
  font-family: Saira;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
}

/* Personagens: 3 cards */

.characters {
  gap: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: none;
  scroll-behavior: auto; /* Desabilitar smooth scroll para controle manual */
  -webkit-overflow-scrolling: touch; /* Scroll suave no iOS */
  height: 100%; /* Herdar altura do pai */
  max-height: 100%; /* Garantir que não ultrapasse */
  position: relative; /* Para posicionamento correto */
  will-change: scroll-position; /* Otimizar para animação */
  backface-visibility: hidden; /* Melhorar performance */
  transform: translateZ(0); /* Acelerar hardware */
}

.characters::-webkit-scrollbar { 
  display: none; /* Chrome, Safari */ 
}

.characters__inner,
.characters__clone {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-shrink: 0;
  width: 100%;
  will-change: transform; /* Otimizar para animação */
  backface-visibility: hidden; /* Melhorar performance */
}

.character-card {
  display: grid;
  gap: var(--space-2);

}

.character-card__media {
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}

.character-card__media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.character-card__title {
  color: var(--white);
  font-family: Exo;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.character-card__text {
  opacity: 0.7;
  color: var(--white);
  font-family: Saira;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Logos carousel (autoplay) */
.logos {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 12px;
}

.logos__track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: center;
  will-change: transform;
  justify-items: center;
}

.logos.is-paused .logos__track {
  animation-play-state: paused;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

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

.logos__item img {
  display: block;
  inline-size: auto;
  width: 100%;
  max-height: 33px;
}

/* Cards sob o iframe (imagem esquerda + textos à direita) */
.info-cards {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  cursor: pointer;
  text-decoration: none;
  margin-top: 24px;
}

.info-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-2);
  background: #fff;
  border: 1px solid var(--grey-light3);
  border-radius: 12px;
  padding: var(--space-2);
  cursor: pointer;
  text-decoration: none;
}

.info-card__media {
  inline-size: 72px;
  block-size: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--grey-light2);
}

.info-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.info-card__title {
  font-weight: 700;
  color: var(--text-strong);
}

.info-card__text {
  color: var(--text-body);
}

/* Iframe do jogo */
.slide__iframe {
  inline-size: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Estados de foco visível gerais */
button:focus-visible,
a:focus-visible,
iframe:focus-visible {
  outline: 3px solid var(--orange-light);
  outline-offset: 2px;
}


.slide__p,
.character-card__text,
.info-card__text {
  white-space: normal;
}

.slide__p>p:not(:last-child),
.character-card__text>p:not(:last-child),
.info-card__text>p:not(:last-child) {
  margin-bottom: 0.75em;
}



/* se suas tabs forem horizontais roláveis, garanta overflow-x */
#featureTabsList { overflow-x: auto; scroll-behavior: smooth; }

/* Cores e contraste (WCAG AA) */
a {
  color: var(--midnight-blue);
}

strong {
  color: var(--text-strong);
}

/* Utilitários */
.u-muted {
  color: #475569;
  font-size: .95rem;
}