/* ============================================================
   hero.css — Seção hero da home
   Contém: container, tipografia, stats, anel de progresso,
           pills de status, visual, reflexos de luz e partículas.
   Keyframes: keyframes.css (via main.css).
   Responsividade: responsive.css.
   ============================================================ */

/* ============================================================
   Container e tipografia
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: 80px;
}

section#hero {
    position: relative;
    color: var(--cor-texto);
    min-height: clamp(600px, 69dvh, 1000px);
    display: flex;
    align-items: center;
    overflow: visible !important;
    scroll-margin-top: 90px;
    z-index: 2;
}

section#hero .container {
  /* padding-top: 60px; */
}

.hero .hero-content h1 {
  font-size: var(--tipo-4xl);
  font-weight: 700;
  line-height: var(--lh-compacto);
  margin-bottom: 1.2rem;
  font-family: var(--fonte-titulo);
  text-align: left;
}

.hero .hero-content p {
  font-size: var(--tipo-body);
  margin-bottom: 2rem;
  line-height: var(--lh-amplo);
  text-align: left;
}

/* ============================================================
   Stats — layout assimétrico
   ============================================================ */
.hero-stats {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 12px;
}

.hero-stats__topo {
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.hero-stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  position: relative;
}

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

.hero-stat + .hero-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.hero-stat__num {
  font-family: var(--fonte-titulo);
  font-weight: 800;
  line-height: 1;
}

.hero-stat__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 4px;
}

.hero-stat__label {
  font-size: var(--tipo-sm);
  font-weight: 700;
  color: rgba(232, 231, 247, 0.85);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.hero-stat__desc {
  font-size: var(--tipo-xs);
  color: color-mix(in srgb, var(--cor-texto), transparent 50%);
}

/* Variantes por grupo de stat */
.hero-stat--eixos .hero-stat__num {
  font-size: clamp(2.8rem, 4vw, 4rem);
  color: #93c5fd;
  text-shadow: 0 0 18px rgba(59, 130, 246, 0.2);
}

.hero-stat--objetivos {
  transform: translateY(-12px);
}

.hero-stat--objetivos .hero-stat__num {
  font-size: clamp(3.4rem, 5vw, 5rem);
  color: #c4b8ff;
  text-shadow: 0 0 18px rgba(124, 110, 240, 0.2);
}

.hero-stat--iniciativas .hero-stat__num {
  font-size: clamp(4.2rem, 6.5vw, 6.5rem);
  color: #a8f0f7;
  text-shadow: 0 0 22px rgba(4, 196, 217, 0.2);
}

/* ============================================================
   Linha do anel + contadores
   ============================================================ */
.hero-stats__anel-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 8px;
}

.hero-stats__contadores {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-left: 8px;
}

.hero-contador {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hero-contador--andamento {
  transform: translateX(0);
}

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

/* ============================================================
   Anel de progresso SVG
   ============================================================ */
.ring-wrap {
  position: relative;
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iniciativas-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-track {
  fill: none;
  stroke: rgba(0, 219, 121, 0.1);
  stroke-width: 6;
}

.ring-progress {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  transition: stroke-dashoffset 0.05s linear;
  filter: drop-shadow(0 0 5px rgba(0, 219, 121, 0.65));
}

.ring-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ring-inner .ist-num--verde {
  font-size: 1.8rem;
  font-weight: 800;
  font-family: var(--fonte-titulo);
  line-height: 1;
  color: #00db79;
  filter: drop-shadow(0 0 8px rgba(0, 219, 121, 0.6));
}

.ring-label-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ist-desc {
  font-size: var(--tipo-xs);
  color: color-mix(in srgb, var(--cor-texto), transparent 45%);
  line-height: 1.4;
}

.stat-divisor {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.stat-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
}

/* ============================================================
   Números de status
   ============================================================ */
.ist-num {
  font-size: 1.6rem;
  font-weight: 800;
  font-family: var(--fonte-titulo);
  line-height: 1;
}

.ist-num--verde {
  color: #00db79;
  filter: drop-shadow(0 0 6px rgba(0, 219, 121, 0.55));
}

.ist-num--amarelo {
  color: #ffd232;
  filter: drop-shadow(0 0 6px rgba(255, 210, 50, 0.55));
}

.ist-num--vermelho {
  color: #e13a1d;
  filter: drop-shadow(0 0 6px rgba(225, 58, 29, 0.55));
}

/* ============================================================
   Pills de status
   ============================================================ */
.ist-pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--tipo-xs);
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 50px;
  border: 1px solid;
  white-space: nowrap;
}

.ist-pill--verde {
  color: #00db79;
  background: rgba(0, 219, 121, 0.1);
  border-color: rgba(0, 219, 121, 0.25);
}

.ist-pill--amarelo {
  color: #ffd232;
  background: rgba(255, 210, 50, 0.1);
  border-color: rgba(255, 210, 50, 0.25);
}

.ist-pill--vermelho {
  color: #e13a1d;
  background: rgba(225, 58, 29, 0.1);
  border-color: rgba(225, 58, 29, 0.25);
}

/* ============================================================
   Textos internos dos cards de stats
   ============================================================ */
.glass-card-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.glass-card-titulo {
  font-size: var(--tipo-body);
  font-weight: 700;
  color: color-mix(in srgb, var(--cor-titulo), transparent 10%);
  letter-spacing: 0.2px;
}

.glass-card-desc {
  font-size: var(--tipo-sm);
  color: color-mix(in srgb, var(--cor-texto), transparent 40%);
  line-height: 1.4;
}

/* ============================================================
   Visual — imagem do hero
   ============================================================ */
.hero .hero-visual {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.hero .hero-visual .hero-image {
  position: relative;
  justify-content: center;
  text-align: end;
  z-index: 2;
  width: 100%;
  transform: translateX(5%);
}

.hero .hero-visual .hero-image img {
  border-radius: 20px;
  animation: flutua3 5s ease-in-out infinite;
}

/* ============================================================
   Reflexos de luz ao redor da imagem
   ============================================================ */
.hero .hero-visual .hero-image #reflexo-img-1 {
  position: absolute;
  width: 137%;
  height: 93%;
  background: radial-gradient(circle, #04c4d986 0%, rgba(255, 255, 0, 0) 70%);
  border-radius: 50%;
  filter: blur(130px);
  top: -6%;
  left: -11%;
  z-index: -1;
  animation: spreadLight 2s ease-in-out;
}

.hero .hero-visual .hero-image #reflexo-img-3 {
  position: absolute;
  width: 30%;
  height: 30%;
  background: radial-gradient(circle, #04c4d9 0%, rgba(255, 255, 0, 0) 100%);
  border-radius: 50%;
  filter: blur(80px);
  bottom: 12%;
  left: 53%;
  z-index: 1;
}

.hero .hero-visual .hero-image #reflexo-img-4 {
  position: absolute;
  width: 15%;
  height: 30%;
  background: radial-gradient(circle, #cc8c33fa 0%, rgba(255, 255, 0, 0) 70%);
  border-radius: 50%;
  filter: blur(60px);
  bottom: 30%;
  right: -2%;
  animation: pulseReflexo 6s ease-in-out infinite;
}

.hero .hero-visual .hero-image #reflexo-img-5 {
  position: absolute;
  width: 10%;
  height: 10%;
  background: radial-gradient(circle, #ccbd33 0%, rgba(255, 255, 0, 0) 70%);
  border-radius: 100%;
  filter: blur(26px);
  bottom: 42%;
  right: 39%;
  animation: flutua3 5s ease-in-out infinite;
}

.hero .hero-visual .hero-image #reflexo-img-6 {
  position: absolute;
  width: 20%;
  height: 20%;
  background: radial-gradient(circle, #ffed4e 2%, rgba(255, 255, 0, 0) 70%);
  border-radius: 100%;
  filter: blur(45px);
  top: 25.5%;
  right: 13.5%;
  animation: flutua3 5s ease-in-out infinite;
}

.hero .hero-visual .hero-image #reflexo-img-7 {
  position: absolute;
  width: 40%;
  height: 40%;
  background: radial-gradient(#ffed4ea8 2%, rgba(255, 255, 0, 0) 50%);
  rotate: -230deg;
  border-radius: 100%;
  filter: blur(70px);
  top: 3%;
  left: 8%;
  animation: pulseReflexo 9s ease-in-out infinite;
}

/* ============================================================
   Grade de partículas dentro do hero
   ============================================================ */
.hero .hero-bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.hero .hero-bg-elements .bg-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, #1482bd, transparent 75%) 2px, transparent 1px);
  background-size: 50px 50px;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.1) 100%);
  mask-image:         linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0.1) 100%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  animation: ondaLuz 1s linear infinite;
}