/*
 * responsive.css — mobile-first
 *
 * Todos os valores em rem (base 16px do browser).
 * Cada bloco cobre de seu min-width até o próximo.
 *
 * Escala:
 *   base      — até 36rem  (< 576px)
 *   xs  36rem — 576px
 *   sm  48rem — 768px
 *   md  62rem — 992px
 *   lg  75rem — 1200px
 *   xl  87.5rem — 1400px
 *   2xl 100rem  — 1600px
 *   uw  160rem  — 2560px+
 */

/* ============================================================
   BASE — mobile pequeno (< 36rem / 576px)
   Regras que valem para o menor tamanho e sobem por herança.
   ============================================================ */

:root {
  --section-padding-y: 3rem;
  --title-gap: 1.5rem;
  --header-offset: 5rem;
}

[data-aos-delay] {
  transition-delay: 0s !important;
}

/* Header */
.header .header-container {
  width: auto;
  margin-inline: auto;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
}

/* Hero */
.hero {
  padding: 3.5rem 0 2rem;
}

.hero .hero-content {
  text-align: center;
  padding-inline: 1rem;
  margin-bottom: 2rem;
}

.hero .hero-buttons {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* Glass cards */
.glass-cards-row {
  flex-direction: column;
}

.glass-card--iniciativas .iniciativas-stat-row {
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ring-wrap {
  width: 5rem;
  height: 5rem;
}

.ring-inner .ist-num--verde {
  font-size: 1.25rem;
}

.container.section-title-obj {
  width: 100%;
  text-align: center;
}

.stat-divisor {
  display: none;
}

.principios .container::before {
  display: none;
}

.principios .principios-card {
  padding: 1.25rem 1rem;
}

/* Objetivos */
.objetivos .objetivos-filters {
  gap: 0.375rem;
  margin-bottom: 1.5rem;
}

.objetivos .objetivos-filters li {
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
}

.objetivos .objetivos-wrapper {
  height: auto;
}

.constelacao-svg {
  width: 199px;
  height: 202px;
  overflow: hidden;
}

/* Footer */
.footer-links {
  border-left: none;
  border-right: none;
  padding-inline: 0;
}

.footer .row>[class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 1.25rem;
}

.footer h6,
.footer ul {
  text-align: center;
  padding-left: 0;
}

.footer ul li {
  display: block;
  margin-bottom: 0.375rem;
}

.footer-logo {
  max-width: 15rem;
  margin: 0 auto 1rem;
  display: block;
}

.footer .footer-gap {
  flex-direction: column !important;
  gap: 0.875rem;
  text-align: center;
}

.footer .footer-gap p {
  text-align: center;
}

.footer .footer-gap .d-flex.gap-4 {
  justify-content: center;
}

/* Constelação */
.constelacao-wrap {
  margin-top: -2rem;
}

/* Roadmap */
.rd-trilha-vertical {
  display: none;
}

.rd-eixo-marcador {
  justify-content: flex-start;
  margin: 2rem 0 1.25rem;
}

.rd-eixo-marcador__titulo {
  max-width: none;
}

.rd-eixo-marcador .rd-planeta__anel,
.rd-eixo-marcador .rd-planeta__halo {
  display: none;
}

.rd-card-linha {
  grid-template-columns: 1.5rem 1fr;
  margin-bottom: 1rem;
}

.rd-card-linha--esquerda .rd-card-linha__vazio,
.rd-card-linha--direita .rd-card-linha__vazio {
  display: none;
}

.rd-card-linha--esquerda .rd-card-linha__ponto,
.rd-card-linha--direita .rd-card-linha__ponto {
  grid-column: 1;
  grid-row: 1;
  padding-top: 1rem;
}

.rd-card-linha--esquerda .rd-card-linha__card,
.rd-card-linha--direita .rd-card-linha__card {
  grid-column: 2;
  grid-row: 1;
  padding: 0 0 0 0.75rem;
}

.rd-trilha-svg {
  height: 3.75rem;
}

/* Regulamentações */
.reg-trilha-vertical {
  display: none;
}

.reg-item {
  flex-direction: column;
  padding-left: 3rem;
  margin-bottom: 1.5rem;
}

.reg-card-wrap--vazio {
  display: none;
}

.reg-ponto {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  padding-top: 0.75rem;
}

.reg-card-wrap--esquerdo,
.reg-card-wrap--direito {
  padding: 0;
  text-align: left;
  width: 100%;
}

/* Progresso */
.progress {
  width: 90%;
}

/* ============================================================
   LARGURA UNIFORME DE CONTAINERS — mobile (< md / 992px)
   Um único token --container-px controla o padding lateral de
   todos os .container e sections do site em telas pequenas.
   Isso garante que o conteúdo de todas as páginas fique
   alinhado na mesma margem, sem exceções.
   ============================================================ */
@media (max-width: 61.9375rem) {

  :root {
    --container-px: 1.25rem;
    /* 20px — margem lateral uniforme mobile */
  }

  /* Normaliza TODOS os .container do Bootstrap para usar o token */
  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-left: var(--container-px) !important;
    padding-right: var(--container-px) !important;
  }

  /* Garante que sections não adicionem padding lateral próprio */
  section {
    padding-left: 0;
    padding-right: 0;
  }

  .hero .hero-content h1 {
    text-align: center;
  }

  .hero .hero-content p {
    text-align: center;
  }

  /* A timeline de Regulamentações tem padding-left próprio —
     precisa ser ajustada para respeitar o token */
  .timeline {
    padding-left: 2.75rem;
    /* espaço para o fio + ponto sem sair da margem */
  }

  .timeline::before {
    left: 0.5rem;
  }

  .timeline-item::before {
    left: -0.125rem;
  }

  .timeline-date,
  .timeline-content {
    margin-left: 1.5rem;
  }


}

/* ============================================================
   TÍTULOS E SUBTÍTULOS — páginas internas (< md / 992px)
   Centraliza h1/h2/p nos blocos de título do body.
   Não afeta cards, badges ou elementos internos de componentes.
   ============================================================ */
@media (max-width: 61.9375rem) {

  /* Páginas internas — todos os blocos de título */
  .pagina-interna .section-title,
  .pagina-interna .section-titulo,
  .pagina-interna .section-title-obj {
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .pagina-interna .section-title h1,
  .pagina-interna .section-title h2,
  .pagina-interna .section-titulo h1,
  .pagina-interna .section-titulo h2,
  .pagina-interna .section-title-obj h1,
  .pagina-interna .section-title-obj h2 {
    text-align: center;
  }

  .pagina-interna .section-title p,
  .pagina-interna .section-titulo p,
  .pagina-interna .section-title-obj p,
  .pagina-interna p.alinha-texto-esquerda {
    text-align: center;
    max-width: 100%;
  }

  /* Roadmap hero — label, título e subtítulo */
  .roadmap-hero__texto {
    text-align: center;
  }

  .section-title-obj {
    flex-direction: column;
    gap: 33px;
    justify-content: center;
  }

  /* Eixo inline no home — bloco de texto do título do eixo */
  .section-title-obj-texto {
    display: flex;
    text-align: center;
    width: 100dvw;
    flex-direction: column;
    align-items: center;
  }

  .section-title-obj p {
    width: 91dvw !important;
  }

  .section-title-obj-texto h2,
  .section-title-obj-texto p {
    text-align: center;
    width: 100dvw;
  }

  /* Título "Objetivos" dentro do eixo expandido */
  .objetivos-titulo {
    text-align: center;
    align-self: center;
  }



}

/* ============================================================
   HERO HOME — card de stats mobile (< md / 992px)
   Os três números (6 / 18 / 81) ficam lado a lado num card único
   semitransparente separado por linhas sutis.
   O anel + contadores ficam logo abaixo.
   A imagem do cérebro fica posicionada atrás do card via JS.
   ============================================================ */
@media (max-width: 61.9375rem) {

  /* Oculta a coluna da imagem — será usada só como fundo */
  .hero .colunaImg {
    display: none !important;
  }

  /* hero-content precisa de position para o fundo absoluto */
  .hero .hero-content {
    position: relative;
  }

  /* Imagem do cérebro injetada via JS como fundo atrás dos stats */
  .hero-stats-mobile-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    max-width: none;
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
    filter: blur(1px);
  }

  /* O bloco .hero-stats fica sobre o fundo */
  .hero-stats {
    position: relative;
    z-index: 1;
    gap: 20px;
  }

  /* ── Card único dos três stats ── */
  .hero-stats__topo {
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    background: rgba(5, 7, 30, 0.52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 1rem 0.25rem;
    box-shadow:
      0 8px 32px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
    position: relative;
  }

  .hero-stats__topo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(to right,
        transparent,
        rgba(4, 196, 217, 0.3),
        transparent);
    border-radius: 1px;
    pointer-events: none;
  }

  /* Cada stat ocupa 1/3 do card */
  .hero-stat {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Separador vertical entre os stats */
  .hero-stat+.hero-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  .hero-stat+.hero-stat::before {
    display: none;
  }

  /* Números uniformes e proporcionais no mobile */
  .hero-stat--eixos .hero-stat__num,
  .hero-stat--objetivos .hero-stat__num,
  .hero-stat--iniciativas .hero-stat__num {
    font-size: clamp(1.9rem, 6.5vw, 2.6rem);
  }

  /* Cancela os transforms verticais do desktop */
  .hero-stat--objetivos {
    transform: none;
  }

  /* Texto info centralizado */
  .hero-stat__info {
    align-items: center;
    text-align: center;
  }

  /* ── Linha do anel + contadores de carregamento ── */
  .hero-stats__anel-row {
    flex-wrap: nowrap;
    padding-left: 0;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }

  .hero-stats__contadores {
    margin-left: 0;
  }

  .hero-contador--nao {
    transform: none;
  }

  .hero .hero-visual .hero-image {
    transform: none;
  }

}

/* ============================================================
   XS — 36rem+ (576px)
   ============================================================ */
@media (min-width: 36rem) {

  :root {
    --section-padding-y: 3.5rem;
    --title-gap: 1.75rem;
    --container-px: 1.5rem;
    /* aumenta ligeiramente em telas um pouco maiores */
  }

  .glass-cards-row {
    flex-direction: row;
  }

  .glass-card--iniciativas .iniciativas-stat-row {
    flex-wrap: nowrap;
  }

  .stat-divisor {
    display: block;
  }

  .ring-wrap {
    width: 5.5rem;
    height: 5.5rem;
  }

  .progress {
    width: 80%;
  }

}

/* ============================================================
   SM — 48rem+ (768px)
   ============================================================ */
@media (min-width: 48rem) {

  :root {
    --section-padding-y: 4rem;
    --title-gap: 2rem;
    --header-offset: 6.25rem;
  }

  .header .header-container {
    width: 62%;
    padding: 7px 1.625rem;
  }

  .hero {
    padding: 4rem 0;
  }

  .hero .hero-content {
    text-align: center;
    padding-inline: 0;
    margin-bottom: 0;
  }



  .hero .hero-buttons {
    justify-content: flex-start;
  }

  .principios .container::before {
    display: block;
  }

  .principios .principios-card {
    padding: 1.5rem 1.25rem;
  }

  .objetivos .objetivos-wrapper {
    height: 12rem;
  }

  .footer .row>[class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .footer h6,
  .footer ul {
    text-align: left;
  }

  .footer-logo {
    max-width: 21.875rem;
  }

  .footer .footer-gap {
    flex-direction: row !important;
    gap: 2.5rem;
  }

  /* Regulamentações */
  .reg-trilha-vertical {
    display: block;
  }

  .reg-item {
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 1.75rem;
  }

  .reg-card-wrap--vazio {
    display: block;
  }

  .reg-ponto {
    position: relative;
    left: auto;
    top: auto;
    width: 2.5rem;
    padding-top: 0.875rem;
  }

  .reg-card-wrap--esquerdo {
    padding-right: 2.25rem;
    text-align: right;
  }

  .reg-card-wrap--direito {
    padding-left: 2.25rem;
    text-align: left;
  }

}

/* ============================================================
   MD — 62rem+ (992px)
   Restaura tudo ao comportamento desktop original.
   ============================================================ */
@media (min-width: 62rem) {

  :root {
    --section-padding-y: 5rem;
    --title-gap: 2.5rem;
  }

  /* Devolve o padding lateral padrão do Bootstrap aos containers */
  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    padding-left: var(--bs-gutter-x, 0.75rem) !important;
    padding-right: var(--bs-gutter-x, 0.75rem) !important;
  }

  /* Restaura padding lateral de sections */
  section {
    padding-left: unset;
    padding-right: unset;
  }

  /* Restaura timeline */
  .timeline {
    padding-left: 60px;
  }

  .timeline::before {
    left: 20px;
  }

  .timeline-item::before {
    left: 10px;
  }

  .timeline-date,
  .timeline-content {
    margin-left: 50px;
  }

  .container.section-title-obj {
    width: 100%;
    text-align: start;
  }

  .header .header-container {
    width: 70%;
  }

  .hero .hero-visual .hero-image {
    display: block;
    transform: translateX(5%);
  }

  /* Restaura os transforms assimétricos do desktop */
  .hero-stat--objetivos {
    transform: translateY(-12px);
  }

  .hero-contador--nao {
    transform: translateX(16px);
  }

  .ring-wrap {
    width: 6.875rem;
    height: 6.875rem;
  }

  .ring-inner .ist-num--verde {
    font-size: 1.75rem;
  }

  .objetivos .objetivos-wrapper {
    height: 10.75rem;
  }

  .constelacao-svg {
    width: 100%;
    max-width: 592px;
    height: auto;
    overflow: hidden;
  }

  .objetivos-details .objetivos-details-content {
    padding-left: 0.75rem;
  }

  /* Roadmap */
  .rd-trilha-vertical {
    display: block;
  }

  .rd-card-linha {
    grid-template-columns: 1fr 1.75rem 1fr;
    margin-bottom: 1.25rem;
  }

  .rd-card-linha--esquerda .rd-card-linha__vazio,
  .rd-card-linha--direita .rd-card-linha__vazio {
    display: block;
  }

  .rd-card-linha--esquerda .rd-card-linha__ponto,
  .rd-card-linha--direita .rd-card-linha__ponto {
    grid-column: 2;
    padding-top: 1.125rem;
  }

  .rd-card-linha--esquerda .rd-card-linha__card {
    grid-column: 1;
    padding: 0 1.5rem 0 0;
  }

  .rd-card-linha--direita .rd-card-linha__card {
    grid-column: 3;
    padding: 0 0 0 1.5rem;
  }

  .rd-eixo-marcador .rd-planeta__anel,
  .rd-eixo-marcador .rd-planeta__halo {
    display: block;
  }

  /* Restaura alinhamento dos títulos nas páginas internas */
  .pagina-interna .section-title,
  .pagina-interna .section-titulo,
  .pagina-interna .section-title-obj {
    text-align: left;
    align-items: flex-start;
  }

  .pagina-interna .section-title h1,
  .pagina-interna .section-title h2,
  .pagina-interna .section-titulo h1,
  .pagina-interna .section-titulo h2,
  .pagina-interna .section-title-obj h1,
  .pagina-interna .section-title-obj h2 {
    text-align: left;
  }



  .section-title-obj-texto {
    text-align: left;
    width: auto;
  }



  .objetivos-titulo {
    text-align: left;
    align-self: flex-start;
  }

  /* Remove o cérebro de fundo mobile e restaura a imagem original */
  .hero-stats-mobile-bg {
    display: none;
  }

  .hero .colunaImg {
    display: block !important;
  }

  /* Restaura o card de stats para o layout assimétrico original */
  .hero-stats__topo {
    flex-wrap: nowrap;
    gap: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
  }

  .hero-stats__topo::before {
    display: none;
  }

  .hero-stat {
    flex: unset;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: unset;
    margin: unset;
  }

  .hero-stat+.hero-stat {
    border-left: none;
    padding-left: 24px;
    margin-left: 24px;
  }

  .hero-stat+.hero-stat::before {
    display: block;
  }

  .hero-stat__info {
    align-items: flex-start;
    text-align: left;
  }

  .hero-stats__anel-row {
    flex-wrap: nowrap;
    padding-left: 8px;
    justify-content: flex-start;
    gap: 20px;
  }

  .hero-stats__contadores {
    margin-left: 8px;
  }

  /* Restaura tamanhos dos números */
  .hero-stat--eixos .hero-stat__num {
    font-size: clamp(2.8rem, 4vw, 4rem);
  }

  .hero-stat--objetivos .hero-stat__num {
    font-size: clamp(3.4rem, 5vw, 5rem);
  }

  .hero-stat--iniciativas .hero-stat__num {
    font-size: clamp(4.2rem, 6.5vw, 6.5rem);
  }

}

/* ============================================================
   LG — 75rem+ (1200px)
   ============================================================ */
@media (min-width: 75rem) {

  :root {
    --section-padding-y: 5rem;
    --title-gap: 2.5rem;
  }


  .header .header-container {
    width: 73%;
    padding: 0 1.625rem;
  }


  .objetivos-details .objetivos-details-content {
    padding-left: 1.25rem;
  }

}

/* ============================================================
   XL — 87.5rem+ (1400px)
   ============================================================ */
@media (min-width: 87.5rem) {

  :root {
    --section-padding-y: 5rem;
  }

  .header .header-container {
    width: 62%;
  }

}

/* ============================================================
   2XL — 100rem+ (1600px)
   ============================================================ */
@media (min-width: 100rem) {

  :root {
    --section-padding-y: 5.5rem;
  }

  .header .header-container {
    width: 58%;
  }

}

/* ============================================================
   UW — 160rem+ (2560px)
   ============================================================ */
@media (min-width: 160rem) {

  :root {
    --section-padding-y: 6.25rem;
    --title-gap: 3rem;
  }

  .header .header-container {
    width: 40%;
  }

  section#hero {
    padding-top: 1rem;
  }

  .section-title h2,
  .section-title-obj h2,
  .section-titulo h1,
  .section-titulo h2 {
    font-size: 2.125rem;
  }

}