/* ===== Design tokens =====
   Paleta: preto + branco + azul translúcido ("vidro"). O azul-céu é a cor
   de marca; o azul-profundo fecha o gradiente; os vidros são tingidos de azul
   e mais transparentes. */
:root{
  --bg: hsl(0 0% 5%);
  --card: hsl(0 0% 8%);
  --fg: hsl(0 0% 98%);
  --muted-fg: hsl(0 0% 60%);
  --border: hsl(210 30% 30% / .5);
  --blue: hsl(203 92% 62%);
  --blue-deep: hsl(218 80% 42%);
  --accent: hsl(196 95% 75%);
  --glass: hsl(203 90% 70% / .07);
  --glass-border: hsl(203 90% 80% / .2);
  /* gradiente translúcido: deixa o fundo atravessar de leve */
  --gradient-brand: linear-gradient(135deg, hsl(200 95% 62% / .85), hsl(220 85% 46% / .85));
  --gradient-hero: linear-gradient(180deg, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.9) 100%);
  --shadow-glow: 0 0 30px hsla(203,92%,62%,.32);
  --radius: .9rem;
  --max-w: 480px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3{
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  letter-spacing: .025em;
  margin: 0;
  line-height: 1.15;
}
p{ margin:0; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
button{ font-family: inherit; cursor: pointer; }

.page{
  max-width: var(--max-w);
  margin: 0 auto;
  background: var(--bg);
  position: relative;
}

/* ===== TRAJETÓRIA (seção fixa, fundo quente próprio) ===== */
.journey{
  position: relative;
  width: 100%;
  padding: 2.5rem 0 1rem;
  background-color: var(--bg);
  background-image: radial-gradient(70% 40% at 50% 10%, hsl(203 92% 62% / .09) 0%, transparent 70%);
}
.journey::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform: translateX(-50%);
  width: min(62%, 340px);
  height:1px;
  background: linear-gradient(90deg,
    transparent 0%,
    hsl(203 92% 62% / .15) 20%,
    hsl(203 92% 62% / .55) 50%,
    hsl(203 92% 62% / .15) 80%,
    transparent 100%);
}
.journey__inner{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.1rem;
}
.journey__header{ text-align:center; }
.journey__header small{
  display:block;
  color: var(--blue);
  font-size: .7rem;
  font-weight:700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .25rem;
}
.journey__header h2{
  font-size: 1.7rem;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

/* ===== HERO (foto de capa, largura cheia) =====
   Performance: a foto (hero-baked.jpg) já vem tratada — P&B, contraste, tinta
   dourada, textura de papel e granulado foram "assados" na imagem. Em tempo real
   só existem transforms/opacity (compostos na GPU): zoom lento, luz e poeira.
   Camadas: 0 foto  3 luz + poeira  4 vinheta  5 logo */
.hero{
  position: relative;
  width: 100%;
  height: clamp(220px, 35vw, 480px);
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
  /* a foto se dissolve no fundo da página em vez de cortar reto */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}
.hero > *{ position:absolute; inset:0; }
.hero__image{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 30%;
  z-index:0;
  /* zoom lento (Ken Burns) — só transform, composto na GPU */
  transform-origin: 50% 30%;
  animation: heroKenBurns 26s ease-in-out infinite alternate;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes heroKenBurns{
  from{ transform: scale(1.02) translate3d(0,0,0); }
  to{   transform: scale(1.14) translate3d(-2.5%, 1.5%, 0); }
}
/* luz dourada "vazando" que passeia devagar pela foto (gradientes já suaves, sem blur) */
.hero__light{
  inset:-25%;
  z-index:3;
  pointer-events:none;
  mix-blend-mode: screen;
  opacity:.7;
  background:
    radial-gradient(34% 46% at 18% 32%, hsl(43 95% 62% / .5) 0%, hsl(43 95% 62% / .18) 40%, transparent 72%),
    radial-gradient(26% 34% at 82% 68%, hsl(36 90% 52% / .35) 0%, hsl(36 90% 52% / .12) 40%, transparent 72%),
    radial-gradient(18% 24% at 55% 15%, hsl(48 100% 75% / .28) 0%, transparent 70%);
  animation: heroLight 16s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroLight{
  from{ transform: translate3d(-7%, -4%, 0) rotate(-4deg) scale(1); }
  to{   transform: translate3d(7%, 5%, 0) rotate(4deg) scale(1.08); }
}
/* poeira subindo devagar: camada com o dobro da altura deslizando por transform
   (background-position animado repintava a cada frame; transform é composto na GPU) */
.hero__dust{
  inset: -100% 0 0 0;         /* 2x a altura do hero */
  z-index:3;
  pointer-events:none;
  opacity:.55;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, hsl(45 95% 82%) 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 38% 64%, hsl(45 95% 85%) 50%, transparent 100%),
    radial-gradient(1.8px 1.8px at 66% 28%, hsl(45 95% 80%) 50%, transparent 100%),
    radial-gradient(1.1px 1.1px at 84% 76%, hsl(45 95% 88%) 50%, transparent 100%),
    radial-gradient(1.4px 1.4px at 52% 88%, hsl(45 95% 82%) 50%, transparent 100%),
    radial-gradient(1.0px 1.0px at 24% 44%, hsl(45 95% 90%) 50%, transparent 100%),
    radial-gradient(2.0px 2.0px at 92% 40%, hsl(45 95% 78%) 50%, transparent 100%),
    radial-gradient(1.3px 1.3px at 70% 92%, hsl(45 95% 85%) 50%, transparent 100%);
  background-size: 340px 340px;
  animation: heroDust 30s linear infinite;
  will-change: transform;
}
@keyframes heroDust{
  from{ transform: translate3d(0, 0, 0); }
  to{   transform: translate3d(0, 50%, 0); }
}
/* vinheta */
.hero__overlay{
  z-index:4;
  pointer-events:none;
  background: linear-gradient(180deg,
    hsl(0 0% 5% / .5) 0%,
    hsl(0 0% 5% / .12) 30%,
    transparent 55%,
    hsl(0 0% 5% / .5) 100%);
}
.hero picture{ z-index:5; pointer-events:none; }
.hero__logo{
  position:absolute;
  inset:auto;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  z-index:5;
  width: min(62%, 460px);
  filter: drop-shadow(0 6px 26px hsl(0 0% 0% / .65));
}

/* ===== PLAYER DE VÍDEO: celular 3D (estilo keynote) =====
   .phone-stage  perspectiva + luz de fundo + sombra no "chão"
   .phone        o aparelho, inclinado em 3D (--rx/--ry/--rz)
   .phone__frame corpo de titânio     .phone__screen a tela (com o vídeo)
   As camadas usam translateZ para o conteúdo da tela ficar "à frente" do corpo. */
.phone-stage{
  position: relative;
  width: min(92vw, 440px);
  margin: 1.25rem auto 2.25rem;
  padding: 2rem 0 3rem;
  perspective: 1400px;
  perspective-origin: 50% 35%;
}
/* luz azul por trás do aparelho */
.phone-stage::before{
  content:"";
  position:absolute; inset: 10% 0 10%;
  z-index:0;
  background: radial-gradient(55% 55% at 50% 45%, hsl(203 92% 62% / .22) 0%, hsl(203 92% 62% / .08) 45%, transparent 72%);
  pointer-events:none;
}
/* sombra projetada no chão */
.phone-stage::after{
  content:"";
  position:absolute; left:50%; bottom:.6rem;
  width:70%; height:44px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, hsl(218 80% 30% / .8) 0%, hsl(218 80% 30% / .3) 45%, transparent 72%);
  pointer-events:none;
}
.phone-stage__float{
  position:relative; z-index:1;
  animation: phoneFloat 7s ease-in-out infinite;
}
@keyframes phoneFloat{
  0%, 100%{ transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
.phone{
  --rx: 4deg;   /* leve inclinação para trás */
  --ry: -30deg; /* vira para mostrar a lateral direita */
  --rz: -2deg;  /* quase reto no plano */
  position: relative;
  width: min(74vw, 300px);
  aspect-ratio: 9 / 19;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(var(--rz));
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
/* corpo do aparelho: alumínio branco/prata fosco (iPhone branco) */
.phone__frame{
  position:absolute; inset:0;
  border-radius: 2.7rem;
  background:
    linear-gradient(160deg, #fdfdfe 0%, #e6e8eb 28%, #d3d6da 52%, #eef0f2 76%, #dcdfe3 100%);
  box-shadow:
    inset 0 0 0 1px hsl(0 0% 100%),          /* fio de luz */
    inset 0 0 0 3px #d0d4d9,                 /* alumínio  */
    inset 0 0 0 4px #8e949b,                 /* chanfro   */
    inset 0 0 0 9px #040507,                 /* moldura preta da tela */
    0 30px 60px -10px hsl(220 40% 3% / .9),
    0 0 50px hsl(203 92% 62% / .28),
    -14px 0 40px -20px hsl(203 92% 62% / .55);
  transform: translateZ(0);
}
/* espessura do aparelho: camadas empilhadas atrás da face (geradas em JS),
   para a lateral aparecer de verdade quando ele gira */
.phone__layer{
  position:absolute; inset:0;
  border-radius: 2.7rem;
  background: #d4d8dc;                /* cor definida por camada no JS (sem filter) */
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .35);
  pointer-events:none;
  backface-visibility: hidden;
}
.phone__layer--back{
  background: linear-gradient(160deg, #f7f8f9 0%, #e1e4e7 60%, #eef0f2 100%);
}
/* botões, na lateral (metade da espessura para dentro) */
.phone__btn{
  position:absolute;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #f4f5f7, #c7cbd0 50%, #a9aeb5);
  box-shadow: 0 0 0 .5px #8e949b;
  transform: translateZ(-16px);
}
.phone__btn--mute    { left:-3px;  top:15%; height:4%; }
.phone__btn--vol-up  { left:-3px;  top:22%; height:8%; }
.phone__btn--vol-down{ left:-3px;  top:32%; height:8%; }
.phone__btn--power   { right:-3px; top:22%; height:12%; }
.phone__btn--camera  { right:-3px; top:54%; height:7%;  }
/* tela, "à frente" do corpo */
.phone__screen{
  position:absolute; inset: 12px;
  border-radius: 2.05rem;
  overflow:hidden;
  /* Safari/iOS não recorta filhos com transform 3D só pelo overflow+radius:
     o clip-path (e a máscara, como reforço) garantem o vídeo dentro dos cantos */
  clip-path: inset(0 round 2.05rem);
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  isolation: isolate;
  background:#000;
  transform: translateZ(3px);
  box-shadow: 0 0 0 1px hsl(0 0% 0% / .8);
}
/* dynamic island */
.phone__island{
  position:absolute; top:12px; left:50%;
  transform: translateX(-50%);
  width:34%; height:24px;
  border-radius:999px;
  background:#000;
  z-index:6;
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .06);
}
/* reflexo de vidro por cima da tela */
.phone__gloss{
  position:absolute; inset:0;
  z-index:5;
  pointer-events:none;
  background:
    linear-gradient(118deg,
      hsl(0 0% 100% / .22) 0%,
      hsl(0 0% 100% / .08) 22%,
      transparent 38%,
      transparent 68%,
      hsl(203 90% 75% / .10) 100%);
}
.reels{ cursor: pointer; }
.reels__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  cursor: pointer;
  border-radius: inherit;
}
.reels__state{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: hsl(218 80% 20% / .4);
  color: var(--accent);
  opacity:0;
  transition: opacity .2s ease;
  pointer-events:none;
  z-index:4;
}
.reels__state svg{ filter: drop-shadow(0 4px 16px hsl(0 0% 0% / .6)); }
.reels.is-paused .reels__state{ opacity:1; }
.hero__sound{
  position:absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display:flex;
  align-items:center;
  gap:.5rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  border: 1px solid hsl(203 90% 80% / .35);
  background: var(--gradient-brand);
  box-shadow: 0 4px 18px hsl(218 80% 42% / .45), inset 0 1px 0 hsl(0 0% 100% / .25);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  transition: filter .15s ease, transform .15s ease, background .2s ease;
}
.hero__sound:hover{ filter: brightness(1.08); }
.hero__sound:active{ transform: translateX(-50%) scale(.97); }
/* com o som ligado, o botão vira vidro escuro azulado */
.hero__sound[aria-pressed="true"]{
  background: hsl(218 60% 12% / .6);
  border-color: hsl(203 92% 62% / .6);
  color: var(--accent);
  box-shadow: 0 0 18px hsl(203 92% 62% / .3);
}

/* ===== CONTENT ===== */
.content{ padding: 1.25rem 1.1rem 2rem; }

.cta-row{
  display:flex;
  gap:.7rem;
  margin-bottom: 1.75rem;
}
.btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  border: 1px solid transparent;
  transition: transform .15s ease, filter .15s ease;
}
.btn:active{ transform: scale(.97); }
.btn--brand{
  background: var(--gradient-brand);
  color: #fff;
  border-color: hsl(203 90% 80% / .35);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-glow), inset 0 1px 0 hsl(0 0% 100% / .25);
}
.btn--brand:hover{ filter: brightness(1.08); }
.btn--outline{
  background: var(--glass);
  backdrop-filter: blur(8px);
  border-color: var(--glass-border);
  color: var(--fg);
}
.btn--outline:hover{ background: hsl(0 0% 100% / .08); }

/* ===== ACCORDION ===== */
.accordion{
  position: relative;
  padding: 1.4rem 0;
}
.accordion::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform: translateX(-50%);
  width: min(62%, 340px);
  height:1px;
  background: linear-gradient(90deg,
    transparent 0%,
    hsl(203 92% 62% / .15) 20%,
    hsl(203 92% 62% / .55) 50%,
    hsl(203 92% 62% / .15) 80%,
    transparent 100%);
}
.accordion:first-of-type::before{ display:none; }

.accent-text{ color: var(--blue); }
.accordion__trigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:none;
  border:none;
  color: var(--fg);
  padding:0;
  text-align:left;
}
.accordion__trigger > span{ min-width:0; }
.accordion__trigger h2{ overflow-wrap: break-word; }
.accordion__trigger small{
  display:block;
  color: var(--blue);
  font-size: .7rem;
  font-weight:700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .25rem;
}
.accordion__trigger h2{
  font-size: 1.7rem;
  text-transform: uppercase;
}
.chevron{
  flex-shrink:0;
  color: var(--blue);
  transition: transform .25s ease, opacity .15s ease;
  margin-left: 1rem;
  opacity: .85;
}
.accordion__trigger:hover .chevron{ opacity: 1; }
.accordion[data-open="true"] .chevron{ transform: rotate(180deg); }

.accordion__panel{
  max-height:0;
  overflow:hidden;
  transition: max-height .35s ease;
}
.accordion[data-open="true"] .accordion__panel{ max-height: 6000px; }
.accordion__inner{ padding-top: 1.25rem; }

.section-lead{
  color: var(--muted-fg);
  font-size: .88rem;
  text-align:center;
  margin-bottom: 1.25rem;
}

/* ===== QUEM SOMOS ===== */
.teaser-card{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio: 4/5;
}
.teaser-card img{ width:100%; height:100%; object-fit:cover; }
.teaser-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, hsl(0 0% 0% / .92) 10%, hsl(0 0% 0% / .1) 55%, transparent 75%);
}
.teaser-card__badge{
  position:absolute; top:.9rem; left:.9rem;
  background: var(--gradient-brand);
  backdrop-filter: blur(6px);
  border:1px solid hsl(203 90% 85% / .3);
  color:#fff;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.3rem .7rem;
  border-radius:999px;
  z-index:2;
}
.teaser-card__text{
  position:absolute; left:1rem; right:1rem; bottom:1rem;
  z-index:2;
  display:flex; flex-direction:column; gap:.4rem;
}
.teaser-card__text strong{ font-size:.95rem; }
.link-btn{
  align-self:flex-start;
  background:none; border:none; color: var(--blue);
  font-size:.8rem; font-weight:700; padding:0;
  border-bottom: 1px solid transparent;
}
.link-btn:hover{ border-color: var(--blue); }

.release-text{ margin-top:1.25rem; display:flex; flex-direction:column; gap:.9rem; }
.release-text p{ color: hsl(0 0% 85%); font-size:.88rem; line-height:1.65; }

.quem-somos-grid{ display:block; }

/* ===== HORIZONTAL SCROLL (tipos de evento / timeline) ===== */
.hscroll{
  display:flex;
  gap: .85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 -1.1rem;
  padding: 0 1.1rem .5rem;
  /* o snap alinha os cards na borda interna do padding (scrollLeft 0 = 1º card) */
  scroll-padding-inline: 1.1rem;
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar{ display:none; }

.event-card{
  position:relative;
  flex: 0 0 62%;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease;
  background-size: cover;
  background-position: center;
  overflow:hidden;
  scroll-snap-align:start;
  display:flex;
  align-items:center;
  justify-content:center;
}
.event-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, hsl(0 0% 0% / .85) 0%, hsl(0 0% 0% / .15) 55%, transparent 75%);
}
/* brilho azul ao passar o mouse */
.event-card:hover{
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px hsl(203 92% 62% / .65),
    0 0 34px hsl(203 92% 62% / .45);
}
.event-card__play{
  position:relative; z-index:2;
  width:44px; height:44px;
  border-radius:50%;
  background: var(--gradient-brand);
  backdrop-filter: blur(6px);
  border:1px solid hsl(203 90% 85% / .35);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size: .85rem;
  box-shadow: var(--shadow-glow);
  transition: transform .2s ease;
}
.event-card:hover .event-card__play{ transform: scale(1.12); }
.event-card__text{
  position:absolute; left:.9rem; right:.9rem; bottom:.9rem; z-index:2;
  display:flex; flex-direction:column; gap:.15rem;
}
.event-card__text strong{ font-size:.95rem; }
.event-card__text small{ color: hsl(0 0% 82%); font-size:.72rem; }

/* ===== STATS ===== */
.stats-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:.6rem;
  margin-bottom: 1.75rem;
}
.stat-card{
  position: relative;
  overflow: hidden;
  background: var(--glass);
  border:1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 1.1rem .6rem;
  min-height: 11rem;                 /* altura pelo conteúdo (o aspect-ratio fixo cortava em telas estreitas) */
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem;
  text-align:center;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
/* celulares estreitos: um card por linha, em formato de "linha" (ícone | nome + perfil | botão) */
@media (max-width: 480px){
  .stats-grid{ grid-template-columns: 1fr; gap:.55rem; }
  .stat-card{
    min-height: 0;
    display:grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "icon name  open"
      "icon label open";
    align-items:center;
    column-gap: .8rem;
    row-gap: .1rem;
    text-align: left;
    padding: .8rem .9rem;
  }
  .stat-card__icon { grid-area: icon;  margin:0; }
  .stat-card__name { grid-area: name;  font-size:1.25rem; line-height:1; align-self:end; }
  .stat-card__label{ grid-area: label; font-size:.66rem; align-self:start; }
  .stat-card__open { grid-area: open;  margin:0; }
}
/* iluminação que acende no centro do card */
.stat-card::after{
  content:"";
  position:absolute; inset:0;
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
}
.stat-card:hover{ transform: translateY(-3px); }
.stat-card:hover::after{ opacity:1; }

.stat-card--spotify:hover{
  border-color: hsl(141 73% 45% / .6);
  box-shadow: 0 0 28px hsl(141 73% 42% / .3);
}
.stat-card--spotify::after{
  background:
    radial-gradient(60% 35% at 50% 0%, hsl(141 73% 45% / .5) 0%, transparent 72%),
    radial-gradient(65% 50% at 50% 50%, hsl(141 73% 45% / .22) 0%, transparent 72%);
}
.stat-card--youtube:hover{
  border-color: hsl(0 84% 55% / .6);
  box-shadow: 0 0 28px hsl(0 84% 55% / .3);
}
.stat-card--youtube::after{
  background:
    radial-gradient(60% 35% at 50% 0%, hsl(0 84% 55% / .5) 0%, transparent 72%),
    radial-gradient(65% 50% at 50% 50%, hsl(0 84% 55% / .22) 0%, transparent 72%);
}
.stat-card--instagram:hover{
  border-color: hsl(330 75% 58% / .6);
  box-shadow: 0 0 28px hsl(330 75% 55% / .3);
}
.stat-card--instagram::after{
  background:
    radial-gradient(60% 35% at 50% 0%, hsl(330 75% 58% / .5) 0%, transparent 72%),
    radial-gradient(65% 50% at 50% 50%, hsl(330 75% 58% / .22) 0%, transparent 72%);
}
.stat-card > *{ position:relative; z-index:1; }

.stat-card__icon{
  display:flex; align-items:center; justify-content:center;
  margin-bottom:.15rem;
}
.stat-card__icon--spotify{ color: hsl(141 73% 52%); }
.stat-card__icon--youtube{ color: hsl(0 84% 62%); }
.stat-card__icon--instagram{ color: hsl(330 75% 65%); }
.stat-card__name{ font-family:"Bebas Neue",sans-serif; font-size:1.5rem; letter-spacing:.04em; color: var(--fg); }
.stat-card__label{ font-size:.68rem; color: var(--muted-fg); line-height:1.3; overflow-wrap:anywhere; }
/* chamada ("Ouvir / Assistir / Seguir") sempre visível, na cor da plataforma */
.stat-card__open{
  font-size:.68rem; font-weight:700; letter-spacing:.04em;
  margin-top:.35rem;
  padding:.3rem .7rem;
  border-radius:999px;
  border:1px solid currentColor;
  transition: background .2s ease, color .2s ease;
}
.stat-card--spotify .stat-card__open{ color: hsl(141 73% 55%); }
.stat-card--youtube .stat-card__open{ color: hsl(0 84% 62%); }
.stat-card--instagram .stat-card__open{ color: hsl(330 75% 65%); }
.stat-card--spotify:hover .stat-card__open{ background: hsl(141 73% 45% / .18); }
.stat-card--youtube:hover .stat-card__open{ background: hsl(0 84% 55% / .18); }
.stat-card--instagram:hover .stat-card__open{ background: hsl(330 75% 58% / .18); }

.ranking-row{ display:block; }
.ranking-block{ margin-bottom:1.5rem; }
.ranking-block__header{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.8rem;
  text-transform:uppercase; letter-spacing:.1em;
  padding-bottom:.6rem;
  margin-bottom:.7rem;
  border-bottom: 1px solid var(--glass-border);
}
.ranking-block__header--spotify{ color: hsl(141 73% 55%); }
.ranking-block__header--youtube{ color: hsl(0 84% 62%); }
.ranking-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.ranking-list li{
  display:flex; align-items:center; gap:.7rem;
  background: var(--glass);
  border:1px solid var(--glass-border);
  border-radius: .6rem;
  padding:.55rem .8rem;
  min-height: 3.3rem;   /* mesma altura com ou sem subtítulo: as duas colunas ficam alinhadas */
  box-sizing: border-box;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ranking-list--spotify li:first-child{
  background: linear-gradient(135deg, hsl(141 73% 42% / .22), hsl(141 73% 42% / .04));
  border-color: hsl(141 73% 45% / .55);
  box-shadow: 0 0 24px hsl(141 73% 42% / .25);
}
.ranking-list--youtube li:first-child{
  background: linear-gradient(135deg, hsl(0 84% 55% / .22), hsl(0 84% 55% / .04));
  border-color: hsl(0 84% 55% / .55);
  box-shadow: 0 0 24px hsl(0 84% 55% / .25);
}
.rank{
  width:16px; flex-shrink:0;
  font-size:.78rem; font-weight:700;
  color: var(--muted-fg);
}
.ranking-list li:first-child .rank{ color: var(--fg); }
.rank__title{ flex:1; font-size:.8rem; color: hsl(0 0% 90%); display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.rank__title small{ font-size:.66rem; color: var(--muted-fg); }
/* etiquetas de destaque no ranking (no lugar dos números) */
.rank__tag{
  flex-shrink:0;
  font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.22rem .55rem; border-radius:999px;
  border:1px solid transparent;
}
.rank__tag--hot{
  color:#fff;
  background: linear-gradient(135deg, hsl(18 95% 55%), hsl(0 85% 48%));
  border-color: hsl(20 100% 75% / .35);
  box-shadow: 0 0 14px hsl(14 95% 55% / .45);
  animation: hotPulse 2.2s ease-in-out infinite;
}
@keyframes hotPulse{
  0%,100%{ box-shadow: 0 0 10px hsl(14 95% 55% / .35); }
  50%    { box-shadow: 0 0 20px hsl(14 95% 55% / .7); }
}
.rank__tag--rising{
  color: var(--accent);
  background: hsl(203 92% 62% / .12);
  border-color: hsl(203 92% 62% / .4);
}
.rank__tag--new{
  color: hsl(45 92% 70%);
  background: hsl(41 90% 50% / .14);
  border-color: hsl(41 90% 60% / .45);
}

/* cabeçalho do bloco: respiro + linha divisória acima, espaço antes dos vídeos */
.reels-block{
  text-align:center;
  margin-top: 2.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--glass-border);
}
.reels-block h3{
  font-family:"Inter",sans-serif; font-weight:700; font-size:.9rem;
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:.3rem;
}
.reels-block .eyebrow{ color: var(--muted-fg); font-size:.74rem; margin-bottom:1.5rem; }
/* vídeos do TikTok lado a lado, em 9:16 */
.tiktok-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:.7rem;
  max-width: 460px;
  margin: 0 auto .9rem;
}
.tiktok-card{
  position:relative;
  aspect-ratio: 9/16;
  border-radius: var(--radius);
  overflow:hidden;
  background:#000;
  box-shadow:
    0 0 0 1px hsl(203 92% 62% / .35),
    0 12px 32px hsl(218 80% 42% / .35);
}
.tiktok-card__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  background:#000;
}
/* card só com poster (sem arquivo local): abre o vídeo no TikTok */
.tiktok-card--link{
  display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center;
}
.tiktok-card--link::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, hsl(0 0% 0% / .7) 0%, transparent 50%);
}
.tiktok-card__play{
  position:relative; z-index:2;
  width:48px; height:48px; border-radius:50%;
  background: var(--gradient-brand);
  border:1px solid hsl(203 90% 85% / .35);
  color:#fff; font-size:.9rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-glow);
  transition: transform .2s ease;
}
.tiktok-card--link:hover .tiktok-card__play{ transform: scale(1.1); }
/* selo "Ver no TikTok" no canto do card */
.tiktok-card__badge{
  position:absolute; top:.6rem; left:.6rem; z-index:3;
  padding:.25rem .55rem;
  border-radius:999px;
  background: hsl(218 60% 12% / .65);
  border:1px solid hsl(203 90% 80% / .3);
  backdrop-filter: blur(6px);
  color: var(--accent);
  font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  transition: background .15s ease;
}
a.tiktok-card__badge:hover{ background: hsl(218 60% 20% / .8); }
.tiktok-profile{
  display:flex; align-items:center; gap:.4rem;
  width: fit-content;
  margin: 0 auto 1.25rem;   /* linha própria, centralizada, com respiro antes do selo */
  font-size:.78rem; font-weight:600;
  color: var(--accent);
  border-bottom:1px solid transparent;
  transition: border-color .15s ease;
}
.tiktok-profile:hover{ border-color: var(--accent); }
.platform-badge{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.5rem .9rem;
  border-radius:.6rem;
  border:1px solid hsl(330 75% 58% / .45);
  background: linear-gradient(135deg, hsl(330 75% 55% / .1), hsl(280 70% 50% / .06));
  color: var(--muted-fg);
  font-size:.75rem;
  line-height:1.3;
  text-align:left;
}
.platform-badge svg{ flex-shrink:0; color: hsl(330 75% 65%); }
.platform-badge strong{ color: var(--fg); font-weight:700; }

/* ===== DIFERENCIAIS ===== */
.diff-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:.7rem; }
.diff-card{
  position:relative;
  border-radius: var(--radius);
  min-height: 210px;
  padding: .8rem;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
  box-shadow: 0 10px 30px hsl(0 0% 0% / .5);
}
/* foto de fundo, com leve zoom no hover */
.diff-card__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .5s ease;
}
.diff-card:hover .diff-card__img{ transform: scale(1.08); }

/* escurecimento da foto (sem filtro de cor) */
.diff-card::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background: linear-gradient(to top,
    hsl(0 0% 0% / .92) 25%,
    hsl(0 0% 0% / .6) 55%,
    hsl(0 0% 5% / .3) 85%,
    hsl(0 0% 5% / .45) 100%);
}

/* borda em gradiente: some no topo/esquerda e fica azul no canto inferior direito */
.diff-card::after{
  content:"";
  position:absolute; inset:0;
  z-index:3;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg,
    hsl(0 0% 100% / .16) 0%,
    hsl(0 0% 100% / .04) 40%,
    hsl(203 92% 62% / .6) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}

.diff-card > span, .diff-card > h3, .diff-card > p{ position:relative; z-index:2; }
.diff-card__num{
  position:absolute; top:.7rem; left:.8rem; z-index:2;
  font-family:"Bebas Neue",sans-serif; font-size:.75rem;
  letter-spacing:.2em;
  color: hsl(0 0% 100% / .5);
}
.diff-card__icon{
  font-size:1.3rem; margin:.3rem 0;
  filter: drop-shadow(0 2px 6px hsl(0 0% 0% / .8));
}
.diff-card h3{ font-size:1rem; text-transform:uppercase; }
.diff-card__line{
  display:block;
  width:24px; height:1px;
  background: var(--blue);
  margin:.4rem 0 .45rem;
  transition: width .4s ease;
}
.diff-card:hover .diff-card__line{ width:48px; }
.diff-card p{ font-size:.72rem; color: hsl(0 0% 90%); line-height:1.4; }

/* ===== TIMELINE ===== */
.milestone-card{
  position:relative;
  flex: 0 0 72%;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
  background-size:cover;
  background-position:center;
  overflow:hidden;
  scroll-snap-align:start;
  padding: .9rem;
  display:flex; flex-direction:column;
}
.milestone-card::after{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background: linear-gradient(to top, hsl(0 0% 0% / .92) 15%, hsl(0 0% 0% / .3) 55%, hsl(0 0% 0% / .15) 100%);
}
.milestone-card > *{ position:relative; z-index:2; }
/* card com vídeo em loop no lugar da foto de fundo */
.milestone-card--video{ background: #000; }
.milestone-card__video{
  position:absolute !important; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  z-index:0 !important;
  pointer-events:none;
}
.milestone-card__tag{
  align-self:flex-start;
  background: var(--gradient-brand);
  backdrop-filter: blur(6px);
  border:1px solid hsl(203 90% 85% / .3);
  color:#fff; font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.25rem .6rem; border-radius:999px;
  margin-bottom:auto;
}
.milestone-card__year{ font-size:.78rem; font-weight:700; color: var(--accent); margin-top:1rem; }
.milestone-card h3{ font-size:1.05rem; text-transform:uppercase; margin:.3rem 0 .35rem; line-height:1.15; }
.milestone-card p{ font-size:.75rem; color: hsl(0 0% 88%); line-height:1.4; }

/* ===== DICA DE ROLAGEM (carrossel da trajetória) ===== */
.scroll-hint{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin: .9rem auto 0;
  padding: .4rem .85rem .4rem .7rem;
  border-radius: 999px;
  border: 1px solid hsl(203 90% 80% / .2);
  background: hsl(218 60% 12% / .55);
  backdrop-filter: blur(8px);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  /* centraliza sem esticar */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity .4s ease, transform .4s ease;
}
.scroll-hint.is-hidden{ opacity:0; transform: translateX(-50%) translateY(6px); pointer-events:none; }
/* mãozinha fazendo o gesto de arrastar */
.scroll-hint__hand{ display:flex; animation: hintSwipe 2.2s ease-in-out infinite; }
@keyframes hintSwipe{
  0%, 100%{ transform: translateX(-3px) rotate(-6deg); }
  50%     { transform: translateX(3px)  rotate(6deg); }
}
/* três setinhas que acendem em sequência, da esquerda para a direita */
.scroll-hint__arrows{ display:flex; gap:2px; }
.scroll-hint__arrows i{
  width:6px; height:6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity:.25;
  animation: hintArrow 1.6s ease-in-out infinite;
}
.scroll-hint__arrows i:nth-child(2){ animation-delay:.2s; }
.scroll-hint__arrows i:nth-child(3){ animation-delay:.4s; }
@keyframes hintArrow{
  0%, 60%, 100%{ opacity:.25; }
  30%{ opacity:1; }
}
/* arrastando com o mouse, o snap não pode brigar com o arrasto */
.hscroll.dragging{ scroll-snap-type: none; }

/* ===== EMBED DO SPOTIFY (fim da trajetória) ===== */
.spotify-embed{
  max-width: 720px;
  margin: 1.75rem auto 0;
  padding: 1.5px;                 /* borda em gradiente, como no original */
  border-radius: 14px;
  background: var(--gradient-brand);
}
.spotify-embed iframe{
  display: block;
  width: 100%;
  height: 352px;
  border: 0;
  border-radius: 12.5px;
}

/* ===== MODAL DE MÍDIA (embed do Instagram) ===== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.modal[hidden]{ display: none; }
.modal__backdrop{
  position:absolute; inset:0;
  background: hsl(0 0% 0% / .85);
  backdrop-filter: blur(4px);
}
.modal__box{
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  scrollbar-width: none;
}
.modal__box::-webkit-scrollbar{ display:none; }
.modal__close{
  align-self: flex-end;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: hsl(0 0% 12% / .95);
  color: var(--fg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s ease, border-color .15s ease;
}
.modal__close:hover{ background: hsl(0 0% 20%); border-color: var(--blue); }
.modal__frame{
  background: #fff;
  border-radius: .75rem;
  overflow: hidden;
  flex-shrink: 0;
}
.modal__frame iframe{
  display: block;
  width: 100%;
  height: 720px; /* ajustado em runtime pela altura real do embed */
  border: 0;
}
.modal__caption{
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding-bottom: .5rem;
}
.modal__caption strong{ font-size: 1.15rem; font-weight: 600; }
.modal__caption small{ color: var(--muted-fg); font-size: .8rem; }

/* ===== LIGHTBOX (mídia dos fatos marcantes) ===== */
.milestone-card{ cursor: pointer; }
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.lightbox[hidden]{ display:none; }
.lightbox__backdrop{
  position:absolute; inset:0;
  background: hsl(220 40% 3% / .88);
  backdrop-filter: blur(6px);
  animation: lbFade .25s ease;
}
.lightbox__box{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  max-width: min(100%, 900px);
  max-height: 100%;
  animation: lbPop .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes lbFade{ from{ opacity:0; } }
@keyframes lbPop{ from{ opacity:0; transform: scale(.94) translateY(10px); } }
.lightbox__frame{ position: relative; }   /* o botão de fechar ancora na mídia */
.lightbox__close{
  position: absolute;
  top: -.5rem; right: -.5rem;
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid hsl(203 90% 80% / .35);
  background: var(--gradient-brand);
  backdrop-filter: blur(8px);
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 18px hsl(218 80% 42% / .5);
  transition: filter .15s ease, transform .15s ease;
}
.lightbox__close:hover{ filter: brightness(1.1); transform: scale(1.06); }
.lightbox__media{
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 1px hsl(203 92% 62% / .5),
    0 0 0 4px hsl(203 92% 62% / .08),
    0 24px 70px hsl(218 80% 30% / .55),
    0 0 80px hsl(203 92% 62% / .2);
}
.lightbox__media img,
.lightbox__media video{
  display:block;
  max-width: min(92vw, 900px);
  max-height: 72vh;
  width: auto; height: auto;
  object-fit: contain;
}
.lightbox__caption{
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  max-width: 560px;
  padding: 0 .5rem .25rem;
}
.lightbox__tag{
  background: var(--gradient-brand);
  border:1px solid hsl(203 90% 85% / .3);
  color:#fff; font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.25rem .6rem; border-radius:999px;
}
.lightbox__tag:empty{ display:none; }
.lightbox__caption strong{ font-family:"Bebas Neue",sans-serif; font-weight:400; font-size:1.5rem; text-transform:uppercase; letter-spacing:.03em; }
.lightbox__caption small{ color: var(--muted-fg); font-size:.82rem; line-height:1.45; }

/* ===== FOOTER ===== */
.footer{
  border-top: 1px solid var(--border);
  padding: 2rem 1.1rem 2.5rem;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  text-align:center;
}
.footer__logo{ width:100px; opacity:.9; }
.footer__social{ display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; }
.footer__btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.625rem 1rem;
  border-radius:12px;
  font-size:.875rem;
  font-weight:500;
  background: linear-gradient(135deg, hsl(0 0% 100% / .08), hsl(0 0% 100% / .04));
  border:1px solid var(--glass-border);
  color: hsl(0 0% 90%);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.footer__btn:hover{ background: hsl(0 0% 100% / .12); border-color: hsl(0 0% 100% / .25); }
.footer__btn--brand{
  background: var(--gradient-brand);
  border-color: hsl(203 90% 80% / .35);
  backdrop-filter: blur(8px);
  color: var(--fg);
  box-shadow: 0 2px 12px hsl(203 92% 62% / .35);
}
.footer__btn--brand:hover{ background: var(--gradient-brand); filter: brightness(1.08); }
.footer__btn:active{ transform: scale(.97); }
.footer__tag{ font-size:.78rem; color: var(--blue); font-weight:600; }
.footer__copy{ font-size:.7rem; color: var(--muted-fg); }

/* ===== Responsive: telas médias (tablets) ===== */
@media (min-width: 700px){
  :root{ --max-w: 760px; }

  .content{ padding: 2rem 2.2rem 2.5rem; }
  .journey{ padding: 3rem 0 1.5rem; }
  .journey__inner{ padding: 0 2.2rem; }
  .journey__header h2{ font-size: 2rem; }
  .footer{ max-width: var(--max-w); margin: 0 auto; }

  .cta-row{ justify-content:center; }
  .btn{ flex:0 0 auto; min-width: 220px; }

  .accordion__trigger{ justify-content:center; gap:1rem; }
  .accordion__trigger > span{ flex:0 1 auto; text-align:center; }
  .accordion__trigger h2{ font-size: 2rem; }

  .section-lead{ font-size: .95rem; max-width: 560px; margin-left:auto; margin-right:auto; }

  /* Quem somos lado a lado */
  .quem-somos-grid{
    display:grid;
    grid-template-columns: minmax(220px, 340px) 1fr;
    gap: 1.75rem;
    align-items:start;
  }
  .teaser-card{ aspect-ratio: 3/4; }
  .release-text[hidden]{ display:flex !important; }
  .link-btn{ display:none; }
  .release-text{ margin-top:0; }
  .release-text p{ font-size:.92rem; }

  /* Carrossel de tipos de evento vira grid */
  .hscroll--events{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    overflow:visible;
    margin:0;
    padding:0;
  }
  .event-card{ flex-basis:auto; }

  /* Diferenciais em 4 colunas */
  .diff-grid{ grid-template-columns: repeat(4, 1fr); gap:1rem; }

  /* Rankings lado a lado */
  .ranking-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items:start;
  }
  .ranking-block{ margin-bottom:0; }

  .milestone-card{ flex-basis: 46%; }
}

/* ===== Responsive: desktop ===== */
@media (min-width: 1080px){
  :root{ --max-w: 1180px; }

  .content{ padding: 2.5rem 3rem 3rem; }
  .journey{ padding: 3.5rem 0 2rem; }
  .journey__inner{ padding: 0 3rem; }
  .journey__header h2{ font-size: 2.4rem; }

  .accordion__trigger h2{ font-size: 2.4rem; }

  .phone-stage{ width: 520px; padding: 2.5rem 0 3.5rem; }
  .phone{ width: 340px; }

  .stats-grid{ gap:1rem; max-width: 620px; margin-left:auto; margin-right:auto; }
  .tiktok-grid{ max-width: 620px; gap:1rem; }
  .reels-block{ margin-top: 3rem; padding-top: 2.5rem; }
  .reels-block .eyebrow{ margin-bottom: 1.75rem; }
  .stat-card{ padding: 1.3rem 1rem; }
  .stat-card__name{ font-size: 1.9rem; }

  .scroll-hint{ display:none; }

  /* Fatos marcantes: carrossel vira grade masonry de 3 colunas */
  .hscroll--timeline{
    display:block;
    columns: 3;
    column-gap: 1rem;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .milestone-card{
    flex-basis:auto;
    width:100%;
    break-inside: avoid;
    margin-bottom: 1rem;
    padding: 1rem;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .milestone-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 0 0 1px hsl(203 92% 62% / .6), 0 0 34px hsl(203 92% 62% / .35);
  }
  /* proporção acompanha a orientação da mídia, como num mural */
  .milestone-card--wide{ aspect-ratio: 4/3; }
  .milestone-card--tall{ aspect-ratio: 9/14; }
  /* tag no topo-esquerda, ano no topo-direita, título embaixo */
  .milestone-card__year{
    position:absolute;
    top: 1rem; right: 1rem;
    margin:0;
    font-size:.75rem;
    padding:.25rem .55rem;
    border-radius:999px;
    background: hsl(0 0% 0% / .55);
    backdrop-filter: blur(6px);
  }
  .milestone-card h3{ font-size:1.2rem; margin:0; }
  /* descrição aparece só no hover, deslizando de baixo */
  .milestone-card p{
    max-height:0;
    opacity:0;
    overflow:hidden;
    margin-top:0;
    transition: max-height .35s ease, opacity .3s ease, margin-top .3s ease;
  }
  .milestone-card:hover p{ max-height: 6rem; opacity:1; margin-top:.4rem; }

  .diff-card p{ font-size:.78rem; }

  .footer{ padding: 2.5rem 3rem 3rem; }
}