.page-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--page-gradient);
}
.page-bg__glow {
  display: none;
}
/* Estrelas brancas do hero estendidas à página toda: um único tile SVG (960×720, 180 estrelas dos mesmos
   tipos/cores do hero) repetido. Estático de propósito — animar uma camada do tamanho da página seria caro. */
.page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../img/pattern/estrelas-pagina.svg") 0 0 / 960px 720px repeat;
}

.section:not(.hero) {
  overflow: hidden;
  isolation: isolate;
}

.section:not(.hero) > .container {
  position: relative;
  z-index: 2;
}

.hero {
  position: relative;
  z-index: 0;
  padding-block: calc(var(--header-h) + var(--space-2)) var(--space-5);
  overflow: hidden;
  text-align: center;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 64% 58% at 50% 100%, rgba(0, 51, 214, 0.12) 0%, transparent 74%),
    radial-gradient(ellipse 46% 58% at 8% 54%, rgba(23, 42, 128, 0.08) 0%, transparent 76%),
    radial-gradient(ellipse 46% 58% at 92% 50%, rgba(79, 24, 112, 0.06) 0%, transparent 76%),
    linear-gradient(180deg, #010104 0%, #010108 44%, #02020e 100%);
  /* dissolve o hero no gradiente da página, sem borda dura entre as seções */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 62%,
    rgba(0, 0, 0, 0.85) 72%,
    rgba(0, 0, 0, 0.55) 82%,
    rgba(0, 0, 0, 0.22) 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 62%,
    rgba(0, 0, 0, 0.85) 72%,
    rgba(0, 0, 0, 0.55) 82%,
    rgba(0, 0, 0, 0.22) 92%,
    transparent 100%
  );
}

.hero__stars {
  position: absolute;
  inset: 0;
  background: url("../img/pattern/estrelas-hero.svg") 0 0 / 100% 100% no-repeat;
}
.hero__stars::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .72;
  background:
    radial-gradient(circle at 4% 12%, rgba(255,255,255,.72) 0 .7px, transparent 1.5px),
    radial-gradient(circle at 9% 48%, rgba(232,255,255,.66) 0 .7px, transparent 1.5px),
    radial-gradient(circle at 18% 27%, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 25% 64%, rgba(255,255,255,.68) 0 .7px, transparent 1.5px),
    radial-gradient(circle at 31% 16%, rgba(232,255,255,.74) 0 .8px, transparent 1.7px),
    radial-gradient(circle at 72% 18%, rgba(232,255,255,.9) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 65% 72%, rgba(255,255,255,.68) 0 .7px, transparent 1.5px),
    radial-gradient(circle at 78% 38%, rgba(232,255,255,.72) 0 .8px, transparent 1.7px),
    radial-gradient(circle at 88% 61%, rgba(255,255,255,.82) 0 .9px, transparent 2px),
    radial-gradient(circle at 94% 24%, rgba(255,255,255,.7) 0 .7px, transparent 1.5px),
    radial-gradient(circle at 36% 75%, rgba(232,255,255,.8) 0 1px, transparent 2px),
    radial-gradient(circle at 57% 42%, rgba(255,255,255,.8) 0 .8px, transparent 1.8px);
}



.hero__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__particle {
  position: absolute;
  bottom: -6%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0;
  --particle-peak: .8;
  /* núcleo claro + halo suave na cor da própria partícula (currentColor) */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.4),
    0 0 5px 1px currentColor,
    0 0 12px 3px color-mix(in srgb, currentColor 55%, transparent);
  filter: brightness(1.1);
  animation: tf-hero-particle-up linear infinite;
}
.hero__particle:nth-child(1) { left: 6%; width: 4px; height: 4px; background: var(--festival-dot-green); animation-duration: 16s; animation-delay: -2s; --drift: 18px; }
.hero__particle:nth-child(2) { left: 14%; width: 3px; height: 3px; background: var(--festival-dot-red); animation-duration: 14s; animation-delay: -9s; --drift: -13px; }
.hero__particle:nth-child(3) { left: 23%; width: 5px; height: 5px; background: var(--festival-dot-yellow); animation-duration: 18s; animation-delay: -4s; --drift: 14px; }
.hero__particle:nth-child(4) { left: 34%; width: 3px; height: 3px; background: var(--festival-dot-green); animation-duration: 15s; animation-delay: -12s; --drift: 12px; }
.hero__particle:nth-child(5) { left: 44%; width: 6px; height: 6px; background: var(--festival-dot-pink); animation-duration: 19s; animation-delay: -6s; --drift: 20px; }
.hero__particle:nth-child(6) { left: 54%; width: 4px; height: 4px; background: var(--festival-dot-red); animation-duration: 16s; animation-delay: -10s; --drift: -16px; }
.hero__particle:nth-child(7) { left: 64%; width: 5px; height: 5px; background: var(--festival-dot-yellow); animation-duration: 17s; animation-delay: -1s; --drift: 18px; }
.hero__particle:nth-child(8) { left: 73%; width: 3px; height: 3px; background: var(--festival-dot-green); animation-duration: 15s; animation-delay: -6s; --drift: 11px; }
.hero__particle:nth-child(9) { left: 81%; width: 4px; height: 4px; background: var(--festival-dot-pink); animation-duration: 20s; animation-delay: -7s; --drift: 16px; }
.hero__particle:nth-child(10) { left: 88%; width: 4px; height: 4px; background: var(--festival-dot-yellow); animation-duration: 18s; animation-delay: -11s; --drift: -12px; }
.hero__particle:nth-child(11) { left: 47%; width: 3px; height: 3px; background: var(--festival-dot-green); animation-duration: 13s; animation-delay: -8s; --drift: 9px; }
.hero__particle:nth-child(12) { left: 96%; width: 3px; height: 3px; background: var(--festival-dot-red); animation-duration: 27s; animation-delay: -18s; --drift: -10px; }

.hero__geo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__geo-nest rect {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
  opacity: 0.42;
}

@media (max-width: 48em) {
  .hero__particle {
    --particle-peak: 0.38;
  }
  .hero__particle:nth-child(5),
  .hero__particle:nth-child(9) {
    display: none;
  }
  .hero__geo-nest rect:nth-child(3),
  .hero__geo-nest rect:nth-child(4) {
    display: none;
  }
}
.hero__geo-step {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 2;
}
.hero__geo .d {
  opacity: 0.85;
}
.hero__geo .d1 { fill: var(--color-secondary-vivid); }
.hero__geo .d2 { fill: var(--color-tertiary-vivid); }
.hero__geo .d3 { fill: var(--color-warm-vivid); }
.hero__geo .d4 { fill: var(--color-olive-vivid); }
.hero__geo .d5 { fill: var(--color-primary-300); }

.hero__stack {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  margin-inline: auto;
}

.hero__title {
  position: relative;
  width: min(100%, 780px);
  aspect-ratio: 1669 / 1043;
  overflow: hidden;
}
.hero__stack::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: min(100vw, 1100px);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: url("../img/logo/vento-cores-limpas-1200.webp") center / contain no-repeat;
  pointer-events: none;
}
.hero__title img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
}

.hero__subtitle {
  margin-top: var(--space-5);
  font-size: var(--fs-md);
  color: var(--color-text-primary);
  max-width: 56ch;
}
.hero__service {
  color: var(--color-text-primary);
  margin: 0 auto var(--space-4);
  max-width: 48rem;
  font-size: clamp(0.8rem, 1.5vw, 0.95rem);
  line-height: 1.5;
  text-wrap: balance;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: 3rem;
}
.hero__secondary-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-secondary-300);
}

.countdown {
  margin-top: var(--space-6);
}
.countdown + .hero__service {
  border-top: 1px solid var(--color-text-secondary);
  margin: var(--space-6) auto 0;
  max-width: 22rem;
  padding-top: var(--space-5);
}
.countdown__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.countdown__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.countdown__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 68px;
  padding: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.countdown__value {
  font-family: var(--font-secondary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.countdown__unit {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.scroll-cue {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: var(--space-6) auto 0;
  color: var(--color-text-secondary);
}
.scroll-cue:hover {
  color: var(--color-text-primary);
}
.scroll-cue .motif {
  animation: tf-float 2.4s var(--ease-in-out) infinite;
}

.news-teaser__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
}
.news-teaser__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.news-teaser__empty {
  grid-column: 1 / -1;
  padding: var(--space-10);
  text-align: center;
  color: var(--color-text-secondary);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.news-teaser__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.news-teaser__item > .news-card {
  flex: 1;
}
.news-teaser__vertente {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-secondary);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: 1.15;

  min-height: 2.3em;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.news-teaser__item .news-card__title {
  font-size: var(--fs-lg);
}
.news-teaser__vertente::before {
  content: "";
  flex: none;
  width: 1.6em;
  height: 1.6em;
  background: url(../img/elementos/ornamento-dourado-v1.webp) center / contain
    no-repeat;
}
/* Preamar: Ativo 8 no lugar do ornamento dourado (menor, para igualar o peso visual) */
.news-teaser__vertente[href*="cat=preamar"]::before {
  width: 1.35em;
  height: 1.35em;
  margin-inline: 0.125em;
  background-image: url("../img/elementos/Ativo%208.webp");
}
/* Maré Lançante: Ativo 10 de lado, com a ponta voltada para o texto */
.news-teaser__vertente[href*="cat=mare-lancante"]::before {
  width: 1.5em;
  height: 0.75em;
  margin-inline: 0.05em;
  background-image: url("../img/elementos/Ativo%2010.webp");
  transform: rotate(90deg);
}
.news-teaser__vertente:hover,
.news-teaser__vertente:focus-visible {
  color: var(--color-text-primary);
}
.news-teaser__vertente .icon {
  width: 0.9em;
  height: 0.9em;
}

.about__grid {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-6);
}

.arte__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  margin-top: var(--space-6);
}
.arte__img {
  width: 100%;

  clip-path: polygon(
    0 var(--step),
    var(--step) var(--step),
    var(--step) 0,
    100% 0,
    100% calc(100% - var(--step)),
    calc(100% - var(--step)) calc(100% - var(--step)),
    calc(100% - var(--step)) 100%,
    0 100%
  );
}
.arte__caption {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--color-text-secondary);
}
.arte__facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: var(--space-5) 0;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.arte__facts strong {
  color: var(--color-text-primary);
}

.steps-grid {
  list-style: none;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
  counter-reset: step;
}
.step-card {
  position: relative;
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.step-card::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-secondary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-secondary-300);
}
.step-card h3 {
  margin-top: var(--space-2);
  font-family: var(--font-primary);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}
.step-card__when {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent-soft);
}
.step-card p {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

/* ---------- Agenda: timeline por mês + semana principal ---------- */
/* o divisor logo após a agenda não deve formar uma faixa sobre o degradê da página */
#programacao + .ribbon-divider {
  background: transparent;
}
#programacao + .ribbon-divider {
  opacity: 1;
}
#programacao + .ribbon-divider svg {
  height: clamp(32px, 4.5vw, 64px);
}
@media (max-width: 640px) {
  #programacao + .ribbon-divider {
    height: auto;
    opacity: 1;
  }
  #programacao + .ribbon-divider svg {
    height: 32px;
  }
  #programacao + .ribbon-divider path {
    stroke-width: 1.6;
    opacity: 0.9;
  }
}
#programacao + .ribbon-divider path {
  stroke-width: 2;
  opacity: 0.9;
}
#programacao + .ribbon-divider .rd-1 { stroke: var(--color-secondary-300); }
#programacao + .ribbon-divider .rd-3 { stroke: var(--color-tertiary-300); }
#programacao + .ribbon-divider .rd-5 { stroke: var(--color-primary-300); }

/* mesmo tratamento (fundo transparente, traço forte) no divisor entre "Arte" e "Como funciona" */
#arte + .ribbon-divider {
  background: transparent;
  opacity: 1;
}
#arte + .ribbon-divider svg {
  height: clamp(32px, 4.5vw, 64px);
}
#arte + .ribbon-divider path {
  stroke-width: 2;
  opacity: 0.9;
}
#arte + .ribbon-divider .rd-1 { stroke: var(--color-secondary-300); }
#arte + .ribbon-divider .rd-3 { stroke: var(--color-tertiary-300); }
#arte + .ribbon-divider .rd-5 { stroke: var(--color-primary-300); }
@media (max-width: 640px) {
  #arte + .ribbon-divider {
    height: auto;
    opacity: 1;
  }
  #arte + .ribbon-divider svg {
    height: 32px;
  }
  #arte + .ribbon-divider path {
    stroke-width: 1.6;
    opacity: 0.9;
  }
}

.agenda {
  --tl-c1: var(--color-primary-300);
  --tl-c2: var(--color-secondary-vivid);
  --tl-c3: var(--color-tertiary-300);
  --tl-c4: var(--color-warm-vivid);
  --tl-c5: var(--color-olive-vivid);
  margin-top: var(--space-1);
}
.agenda-head {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
.agenda-head .section-title {
  margin-top: var(--space-2);
}
.agenda-head__lead {
  max-width: 34ch;
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--color-text-secondary);
}
@media (min-width: 48em) {
  .agenda-head {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-6);
  }
  .agenda-head__lead {
    padding-left: var(--space-6);
    border-left: 1px solid var(--color-border-strong);
  }
}
.agenda__range {
  width: fit-content;
  margin-top: var(--space-2);
  font-family: var(--font-secondary);
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--color-secondary-300), var(--color-tertiary-300));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.agenda__month {
  margin-top: var(--space-6);
}
.agenda__month:first-child {
  margin-top: 0;
}
.agenda__month-title {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-secondary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.agenda__month-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--color-border-strong), transparent);
}

.timeline {
  --tl-gap: var(--space-3);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--tl-gap);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.tl-item {
  position: relative;
  min-width: 0;
  padding-top: var(--space-4);
}
.tl-item::before {
  content: "";
  position: absolute;
  top: 5px;
  right: calc(var(--tl-gap) * -1);
  left: 16px;
  height: 1px;
  background: linear-gradient(90deg, var(--c), var(--color-border));
}
.tl-item:nth-child(2n)::before {
  display: none;
}
.tl-item__diamond {
  position: absolute;
  top: 0;
  left: 1px;
  width: 10px;
  height: 10px;
  background: var(--c);
  transform: rotate(45deg);
  transition: transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out);
}
.tl-item__date {
  display: block;
}
.tl-item__day {
  display: block;
  font-family: var(--font-secondary);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.65rem);
  line-height: 1;
}
.tl-item__month {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-secondary-300);
}
.tl-item__title {
  margin-top: 0.375rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  overflow-wrap: break-word;
  text-wrap: balance;
}
.tl-item__detail {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--color-text-secondary);
  overflow-wrap: break-word;
}
.tl-item__title + .tl-item__detail {
  color: var(--color-accent-soft);
}
@media (hover: hover) {
  .tl-item:hover .tl-item__diamond {
    transform: rotate(45deg) scale(1.5);
    box-shadow: 0 0 14px var(--c);
  }
}

@media (max-width: 47.99em) {
  .tl-item__date {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
  }
  .tl-item__day,
  .tl-item__month {
    display: inline;
    margin-top: 0;
  }
}
@media (min-width: 40em) {
  .timeline {
    --tl-gap: var(--space-4);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .tl-item:nth-child(2n)::before {
    display: block;
  }
  .tl-item:nth-child(4n)::before {
    display: none;
  }
}
@media (min-width: 64em) {
  .timeline {
    grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  }
  .tl-item:nth-child(4n)::before {
    display: block;
  }
  .tl-item:last-child::before {
    display: none;
  }
}

.agenda__split {
  display: grid;
  gap: var(--space-5);
}
.agenda__aside .agenda__month-title {
  font-size: var(--fs-md);
}
@media (min-width: 64em) {
  .agenda__split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }
  .agenda__aside {
    padding-left: var(--space-4);
    border-left: 1px solid var(--color-border);
  }
  .agenda__aside .timeline {
    margin-top: var(--space-3);
  }
}

.week {
  position: relative;
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding: var(--space-5);
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(47, 79, 240, 0.16), transparent 72%),
    var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.week::before {
  content: "";
  position: absolute;
  top: -1px;
  right: var(--radius-lg);
  left: var(--radius-lg);
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--tl-c1),
    var(--tl-c2),
    var(--tl-c3),
    var(--tl-c4),
    var(--tl-c5)
  );
}
.week__head {
  text-align: center;
}
.week__title {
  margin-top: var(--space-1);
  font-family: var(--font-secondary);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.85rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.week__dates {
  margin-top: var(--space-2);
  font-family: var(--font-secondary);
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--color-secondary-300), var(--tl-c3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.week__lead {
  margin-top: var(--space-2);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-text-secondary);
}
@media (min-width: 75em) {
  .week {
    grid-template-columns: 11.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
  }
  .week__head {
    padding-right: var(--space-4);
    text-align: left;
    border-right: 1px solid var(--color-border);
  }
  .week .days-grid {
    gap: var(--space-3);
    margin-top: 0;
  }
  .week .day-card {
    padding-inline: var(--space-2);
  }
  .week .day-card__status {
    font-size: 0.8125rem;
  }
  .week__title {
    font-size: 1.3rem;
    letter-spacing: 0.02em;
  }
}

.days-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 40em) {
  .days-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
  }
}
@media (min-width: 64em) {
  .week {
    padding-inline: var(--space-6);
  }
  .days-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.day-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: transform var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}
@media (hover: hover) {
  .day-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-border-strong);
  }
}

.day-card::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--color-secondary-vivid);
}
.day-card:nth-child(1)::before { background: var(--color-primary-300); }
.day-card:nth-child(2)::before { background: var(--color-secondary-vivid); }
.day-card:nth-child(3)::before { background: var(--color-tertiary-vivid); }
.day-card:nth-child(4)::before { background: var(--color-warm-vivid); }
.day-card:nth-child(5)::before { background: var(--color-olive-vivid); }
.day-card:nth-child(6)::before { background: var(--color-accent); }
.day-card--accent {
  border-color: var(--color-accent);
}
.day-card__num {
  font-family: var(--font-secondary);
  font-size: var(--fs-xl);
  line-height: 1.1;
  font-weight: var(--fw-bold);
}
.day-card__month {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-secondary-300);
}
.day-card__status {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.day-card__detail {
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

@media (max-width: 30em) {
  .week {
    padding-inline: var(--space-3);
  }
  .day-card {
    padding-inline: var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-item__diamond,
  .day-card {
    transition: none;
  }
}

.sponsors__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/pattern/quebramar-lines.svg") center / cover no-repeat;
  opacity: 0.14;
  pointer-events: none;
}

.participate-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--space-6);
}

.sponsors {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: var(--space-6);
}
.sponsors__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.sponsors__names {
  margin-top: var(--space-2);
  font-weight: var(--fw-medium);
}

#realizacao {
  padding-block: clamp(var(--space-4), 2vw, var(--space-6));
}
#realizacao .sponsors__logos {
  margin-top: var(--space-4);
}

.sponsors__logos {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-surface-light);
  border-radius: var(--radius-md);
  color: var(--color-text-on-light);
}
.sponsors__logos img {
  width: 100%;
  height: auto;
}
.sponsors__logos--vertical {
  padding: 0;
  background: transparent;
}

.local__grid {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-6);
  align-items: center;
}
.local__map {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.local__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.local-facts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.local-facts strong {
  color: var(--color-text-primary);
}

.final-cta {
  position: relative;
  padding-block: var(--section-gap);
  text-align: center;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/pattern/quebramar-lines.svg") center / cover no-repeat;
  opacity: 0.14;
  pointer-events: none;
}
.final-cta__inner {
  position: relative;
  max-width: 52ch;
  margin-inline: auto;
}
.final-cta h2 {
  font-size: var(--fs-2xl);
}
.final-cta p {
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
}
.final-cta .btn {
  margin-top: var(--space-8);
}

.footer-waves {
  position: relative;
  line-height: 0;
  overflow: hidden;
}
.footer-waves::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/pattern/quebramar-lines.svg") center / cover no-repeat;
  opacity: 0.14;
  pointer-events: none;
}
.footer-waves svg {
  position: relative;
  width: 100%;
  height: clamp(80px, 12vw, 160px);
}
.footer-waves .fw-back {
  fill: var(--wave-navy);
}
.footer-waves .fw-front {
  fill: var(--wave-void);
}

.section-wave {
  width: 100%;
  height: clamp(40px, 6vw, 80px);
  line-height: 0;
}
.section-wave svg {
  width: 100%;
  height: 100%;
}
.section-wave path {
  fill: var(--color-background-alt);
}
.section-wave--up path {
  fill: var(--color-background);
}

/* Ativo 5 é uma forma larga (2:1): usa mais largura para manter o peso dos demais ícones */
.card__icon img.card__icon-img--wide {
  width: 4.5rem;
}

/* Ativo 10 de lado (como em Maré Lançante): caixa de 3rem como os demais ícones; gira 90° e volta à borda esquerda */
.card__icon img.card__icon-img--side {
  transform: translateX(-0.75rem) rotate(90deg);
}

/* ---------- Hero: mais estrelas ----------
   Camada extra de estrelas finas (textura repetida em bloco grande, para não parecer padrão). */
.hero__stars::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 420px 320px;
  background-image:
    radial-gradient(circle at 53px 161px, rgba(214,232,255,0.90) 0, rgba(214,232,255,0.72) 0.7px, transparent 1.6px),
    radial-gradient(circle at 215px 272px, rgba(255,255,255,0.74) 0, rgba(255,255,255,0.59) 1.1px, transparent 2.0px),
    radial-gradient(circle at 46px 74px, rgba(214,232,255,0.72) 0, rgba(214,232,255,0.57) 0.7px, transparent 1.6px),
    radial-gradient(circle at 252px 178px, rgba(255,240,205,0.90) 0, rgba(255,240,205,0.72) 0.9px, transparent 1.8px),
    radial-gradient(circle at 327px 175px, rgba(255,255,255,0.77) 0, rgba(255,255,255,0.62) 0.9px, transparent 1.8px),
    radial-gradient(circle at 305px 244px, rgba(255,240,205,0.78) 0, rgba(255,240,205,0.62) 1.3px, transparent 2.2px),
    radial-gradient(circle at 103px 196px, rgba(190,215,255,0.64) 0, rgba(190,215,255,0.51) 0.7px, transparent 1.6px),
    radial-gradient(circle at 50px 259px, rgba(190,215,255,0.70) 0, rgba(190,215,255,0.56) 0.9px, transparent 1.8px),
    radial-gradient(circle at 91px 82px, rgba(255,255,255,0.57) 0, rgba(255,255,255,0.45) 0.7px, transparent 1.6px),
    radial-gradient(circle at 408px 294px, rgba(255,240,205,0.87) 0, rgba(255,240,205,0.70) 0.9px, transparent 1.8px),
    radial-gradient(circle at 336px 316px, rgba(255,240,205,0.81) 0, rgba(255,240,205,0.65) 0.7px, transparent 1.6px),
    radial-gradient(circle at 216px 28px, rgba(255,255,255,0.79) 0, rgba(255,255,255,0.63) 0.9px, transparent 1.8px),
    radial-gradient(circle at 144px 178px, rgba(190,215,255,0.88) 0, rgba(190,215,255,0.70) 0.9px, transparent 1.8px),
    radial-gradient(circle at 124px 147px, rgba(255,255,255,0.79) 0, rgba(255,255,255,0.64) 0.9px, transparent 1.8px),
    radial-gradient(circle at 365px 224px, rgba(255,240,205,0.65) 0, rgba(255,240,205,0.52) 1.3px, transparent 2.2px),
    radial-gradient(circle at 297px 117px, rgba(255,255,255,0.69) 0, rgba(255,255,255,0.55) 0.9px, transparent 1.8px),
    radial-gradient(circle at 178px 128px, rgba(214,232,255,0.61) 0, rgba(214,232,255,0.49) 1.3px, transparent 2.2px),
    radial-gradient(circle at 386px 154px, rgba(255,240,205,0.92) 0, rgba(255,240,205,0.74) 1.3px, transparent 2.2px),
    radial-gradient(circle at 97px 44px, rgba(214,232,255,0.72) 0, rgba(214,232,255,0.58) 1.1px, transparent 2.0px),
    radial-gradient(circle at 24px 224px, rgba(190,215,255,0.73) 0, rgba(190,215,255,0.58) 0.7px, transparent 1.6px),
    radial-gradient(circle at 369px 36px, rgba(190,215,255,0.84) 0, rgba(190,215,255,0.68) 1.1px, transparent 2.0px),
    radial-gradient(circle at 203px 75px, rgba(255,255,255,0.86) 0, rgba(255,255,255,0.69) 0.9px, transparent 1.8px),
    radial-gradient(circle at 115px 14px, rgba(255,255,255,0.90) 0, rgba(255,255,255,0.72) 1.3px, transparent 2.2px),
    radial-gradient(circle at 193px 167px, rgba(214,232,255,0.70) 0, rgba(214,232,255,0.56) 0.9px, transparent 1.8px),
    radial-gradient(circle at 378px 263px, rgba(255,255,255,0.68) 0, rgba(255,255,255,0.54) 0.9px, transparent 1.8px),
    radial-gradient(circle at 134px 290px, rgba(214,232,255,0.76) 0, rgba(214,232,255,0.61) 0.9px, transparent 1.8px),
    radial-gradient(circle at 191px 305px, rgba(255,255,255,0.78) 0, rgba(255,255,255,0.62) 1.1px, transparent 2.0px),
    radial-gradient(circle at 10px 4px, rgba(190,215,255,0.83) 0, rgba(190,215,255,0.66) 0.9px, transparent 1.8px),
    radial-gradient(circle at 243px 295px, rgba(190,215,255,0.66) 0, rgba(190,215,255,0.53) 1.1px, transparent 2.0px),
    radial-gradient(circle at 279px 202px, rgba(190,215,255,0.60) 0, rgba(190,215,255,0.48) 1.1px, transparent 2.0px),
    radial-gradient(circle at 244px 244px, rgba(255,255,255,0.90) 0, rgba(255,255,255,0.72) 0.9px, transparent 1.8px),
    radial-gradient(circle at 301px 46px, rgba(255,255,255,0.80) 0, rgba(255,255,255,0.64) 1.1px, transparent 2.0px),
    radial-gradient(circle at 279px 296px, rgba(255,255,255,0.79) 0, rgba(255,255,255,0.63) 0.7px, transparent 1.6px),
    radial-gradient(circle at 25px 112px, rgba(190,215,255,0.67) 0, rgba(190,215,255,0.53) 0.7px, transparent 1.6px);
  animation: tf-twinkle-soft 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero__stars::before {
    animation: none;
  }
}

/* cor do halo de cada partícula = a cor dela */
.hero__particle:nth-child(1) { color: var(--festival-dot-green); }
.hero__particle:nth-child(2) { color: var(--festival-dot-red); }
.hero__particle:nth-child(3) { color: var(--festival-dot-yellow); }
.hero__particle:nth-child(4) { color: var(--festival-dot-green); }
.hero__particle:nth-child(5) { color: var(--festival-dot-pink); }
.hero__particle:nth-child(6) { color: var(--festival-dot-red); }
.hero__particle:nth-child(7) { color: var(--festival-dot-yellow); }
.hero__particle:nth-child(8) { color: var(--festival-dot-green); }
.hero__particle:nth-child(9) { color: var(--festival-dot-pink); }
.hero__particle:nth-child(10) { color: var(--festival-dot-yellow); }
.hero__particle:nth-child(11) { color: var(--festival-dot-green); }
.hero__particle:nth-child(12) { color: var(--festival-dot-red); }