/* ============================================================
   Seções
   ============================================================ */

/* ---- 1. Hero -------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(1.75rem, 1rem + 3vw, 3rem) clamp(2.5rem, 1.5rem + 4vw, 4rem);
  overflow: clip;
}


/* Luz quente no alto à esquerda e halo violeta à direita: o clima do key visual */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.hero::before {
  top: -28%;
  left: -18%;
  width: 72vw;
  height: 72vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(
    circle at 40% 40%,
    rgba(250, 226, 150, 0.85) 0%,
    rgba(248, 234, 192, 0.45) 34%,
    rgba(253, 246, 228, 0) 68%
  );
}

.hero::after {
  top: -34%;
  right: -22%;
  width: 78vw;
  height: 78vw;
  max-width: 1000px;
  max-height: 1000px;
  background: radial-gradient(
    circle at 55% 45%,
    rgba(160, 74, 190, 0.34) 0%,
    rgba(199, 132, 219, 0.18) 38%,
    rgba(244, 203, 225, 0) 70%
  );
}

/* Key visual do desktop: o casal já vem embutido na arte, à direita.
   A coluna de texto ocupa a faixa clara da esquerda. */
.hero__media {
  display: none;
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 0;
  background-size: cover;
  background-position: right bottom;
  background-repeat: no-repeat;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
}

.hero__copy {
  display: grid;
  justify-items: start;
  gap: var(--sp-s);
  width: 100%;
}

.hero__brand {
  width: clamp(140px, 15vw, 186px);
  margin-bottom: var(--sp-2xs);
}

.hero__when {
  margin-top: var(--sp-2xs);
}

/* O H1 tem dois tempos: o reconhecimento, dito baixo, e a virada, dita alto. */
.hero__title {
  font-size: clamp(1.75rem, 1.05rem + 3.5vw, 3.875rem);
  letter-spacing: var(--track-tighter);
  max-width: 15ch;
}

.hero__kicker {
  display: block;
  margin-bottom: 0.38em;
  /* proporcional ao título, que cresceu: mantém a mesma leitura de antes */
  font-size: 0.4em;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  max-width: 32ch;
}

.hero__kicker strong {
  color: var(--ink);
}

.hero__title em {
  display: block;
  font-style: normal;
  color: var(--c-violet-deep);
}

.hero__lead {
  font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem);
  line-height: 1.6;
  max-width: 41ch;
  color: var(--ink-soft);
}

@media (min-width: 62rem) {
  .hero {
    display: grid;
    align-items: center;
    min-height: min(88vh, 820px);
    padding-block: var(--sp-l);
  }

  /* A arte fica ancorada à direita e some suavemente antes do texto:
     assim o casal nunca invade a coluna de leitura, em nenhuma largura.
     O enquadramento é ancorado no casal (não na borda), porque em telas
     médias o recorte do cover é agressivo e engoliria a Kenya. */
  .hero__media {
    display: block;
    background-image: url("/assets/img/bgHeroDesk.webp");
    background-position: 66% bottom;
    width: min(84%, 1180px);
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.5) 9%,
      #000 24%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.5) 9%,
      #000 24%
    );
  }

  /* O halo violeta vem da própria arte */
  .hero::after {
    display: none;
  }

  .hero__copy {
    max-width: 45%;
    min-width: 430px;
  }
}

/* Mobile e tablet: a arte ocupa o topo em largura cheia e o degradê da
   própria imagem morre na cor da seção; o último trecho dissolve em
   transparente para reencontrar o gradiente do documento.
   Este bloco vem depois das regras base do hero de propósito — é ele
   quem precisa vencer a cascata. */
@media (max-width: 61.99rem) {
  .hero {
    /* a arte tem proporção 800×550 (68,75vw); o conteúdo sobe para dentro
       do degradê final dela, onde o fundo já é quase cor lisa */
    padding-top: 41vw;
    background-image: url("/assets/img/bgHeroMob.webp"),
      linear-gradient(
        180deg,
        #fae5ed 0%,
        #fae5ed 72%,
        rgba(250, 229, 237, 0) 100%
      );
    background-size: 100% auto, 100% 100%;
    background-position: top center, top center;
    background-repeat: no-repeat, no-repeat;
  }

  /* Os halos do CSS competiriam com a arte */
  .hero::before,
  .hero::after {
    display: none;
  }

  /* Sem foto ao lado, a coluna inteira se resolve no eixo central */
  .hero__copy {
    justify-items: center;
    text-align: center;
  }

  .hero__title,
  .hero__kicker,
  .hero__lead {
    margin-inline: auto;
  }

  .hero__brand {
    width: min(48vw, 205px);
    margin-bottom: var(--sp-2xs);
  }

  .hero__title {
    font-size: clamp(2rem, 1.35rem + 2.9vw, 2.625rem);
    max-width: 15ch;
  }

  .hero__kicker {
    font-size: 0.55em;
    line-height: 1.35;
    max-width: 28ch;
  }

  .hero__lead {
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
    max-width: 38ch;
  }
}

/* Telas largas: sobra imagem de sobra, então a arte volta a se ancorar
   na borda direita e o fade pode ser mais generoso. */
@media (min-width: 90rem) {
  .hero__media {
    width: min(66%, 1180px);
    background-position: right bottom;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 15%,
      #000 34%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 15%,
      #000 34%
    );
  }
}

/* ---- Detalhes de fundo, seção a seção -------------------- */
/* .count e .mirrors não entram aqui: têm fundo próprio. */
.story {
  --glow-right: -18%;
  --glow-top: 6%;
  --glow-color: rgba(250, 232, 190, 0.55);
}

.mirrors {
  --glow-left: -18%;
  --glow-top: 8%;
  --glow-color: rgba(199, 132, 219, 0.3);
}

.hosts {
  --glow-right: -14%;
  --glow-top: -8%;
  --glow-color: rgba(224, 127, 184, 0.22);
}

.close {
  --glow-left: -12%;
  --glow-top: 0%;
  --glow-color: rgba(255, 255, 255, 0.7);
}

/* ---- 2. Countdown --------------------------------------- */
/* Faixa de gradiente vivo: a única coisa que se move sozinha na
   página, porque é a única que de fato está correndo — o tempo. */
.count {
  padding-block: clamp(2.75rem, 1.75rem + 4vw, 4.25rem);
  color: var(--c-white);
  overflow: hidden;
  overflow: clip;
  background: #6a3f9c;
}

/* No desktop o hero termina alto e a faixa precisa de ar antes de
   entrar, senão as duas parecem um bloco só. */
@media (min-width: 62rem) {
  .count {
    margin-top: clamp(3rem, 1.5rem + 4vw, 6rem);
  }
}

/* Camada maior que a seção, deslocada devagar: o gradiente respira
   sem que nenhuma borda apareça. Transform, para rodar na GPU. */
.count::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: linear-gradient(
    112deg,
    #3f2478 0%,
    #56308c 22%,
    #7b4faa 46%,
    #a87bc6 72%,
    #d5a9d2 100%
  );
  animation: count-drift 24s var(--ease-soft) infinite alternate;
}

@keyframes count-drift {
  from {
    transform: translate3d(-2.5%, -1.5%, 0) scale(1.06);
  }
  to {
    transform: translate3d(2.5%, 1.5%, 0) scale(1.14);
  }
}

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

.count__inner {
  display: grid;
  justify-items: center;
  gap: var(--sp-m);
  text-align: center;
}

.count__label {
  font-size: var(--t-lead);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  color: var(--c-white);
}

/* ---- 3. Narrativa --------------------------------------- */
.story__anchor {
  font-size: var(--t-h2);
  line-height: 1.22;
  letter-spacing: var(--track-tight);
  max-width: 22ch;
  margin-bottom: var(--sp-l);
}

.story__anchor .quiet {
  font-weight: 400;
  color: var(--ink-soft);
}

.story__body {
  display: grid;
  gap: var(--sp-s);
  max-width: var(--measure);
  font-size: var(--t-lead);
  color: var(--ink-soft);
}

.story__close {
  max-width: var(--measure);
  margin-top: var(--sp-l);
  font-size: var(--t-lead);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.story__cta {
  margin-top: var(--sp-l);
}

@media (min-width: 62rem) {
  .story__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: start;
  }

  .story__anchor {
    position: sticky;
    top: clamp(2rem, 8vh, 5rem);
    margin-bottom: 0;
  }
}

/* ---- 4. Reconhecimento ---------------------------------- */
/* Faixa escura no meio do percurso claro: é aqui que a leitora se
   reconhece, e o peso da cor acompanha o peso do que está escrito. */
.mirrors {
  border-radius: clamp(1rem, 0.7rem + 1.4vw, 1.5rem);
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(248, 234, 192, 0.16) 0%, rgba(248, 234, 192, 0) 55%),
    radial-gradient(70% 110% at 92% 100%, rgba(244, 203, 225, 0.2) 0%, rgba(244, 203, 225, 0) 60%),
    linear-gradient(160deg, #521070 0%, #3d0b52 55%, #2b0740 100%);
  color: var(--c-white);
  overflow: hidden;
  overflow: clip;
}

/* A malha do documento não atravessa a faixa: esta é a versão dela
   em positivo, para o detalhe não desaparecer no trecho escuro. */
.mirrors::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 80px 80px;
}

.mirrors__title {
  font-size: var(--t-h2);
  max-width: 22ch;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  text-align: center;
  color: var(--c-white);
}

/* ---- 5. Autoridade -------------------------------------- */
.hosts__inner {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 3vw, 2.75rem);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, 0.9);
  /* Sólido: é ele que recorta a marca d'água que passa por trás */
  background: #fff;
  box-shadow: var(--sh-l);
}

.hosts__body {
  display: grid;
  gap: var(--sp-s);
  font-size: var(--t-lead);
  color: var(--ink-soft);
}

.hosts__body p:first-child {
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

/* Retrato do casal no set do podcast */
.hosts__portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 32%;
  border-radius: var(--r-l);
  background-color: var(--c-lilac-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

@media (min-width: 48rem) {
  .hosts__inner {
    grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  }

  .hosts__portrait {
    aspect-ratio: 3 / 4;
  }
}

/* ---- 6. Fecho ------------------------------------------- */
/* A biografia e o reforço são o mesmo movimento: ficam próximos. */
.hosts {
  padding-bottom: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
}

.close {
  padding-top: 0;
  padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
}

/* O ponto de chegada da jornada de cor: a página amanhece clara
   e termina na noite do encontro. */
.close__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sp-m);
  text-align: center;
  padding: clamp(2.25rem, 1.2rem + 4.5vw, 4.5rem) clamp(1.25rem, 1rem + 2vw, 3rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(248, 234, 192, 0.22) 0%, rgba(248, 234, 192, 0) 55%),
    radial-gradient(80% 110% at 92% 100%, rgba(244, 203, 225, 0.26) 0%, rgba(244, 203, 225, 0) 60%),
    linear-gradient(150deg, #521070 0%, #3d0b52 55%, #2b0740 100%);
  box-shadow: var(--sh-l);
  color: var(--c-white);
  overflow: hidden;
}

.close__text {
  font-size: clamp(1.25rem, 1rem + 1.6vw, 2rem);
  line-height: 1.34;
  letter-spacing: var(--track-tight);
  max-width: 26ch;
  font-weight: 400;
  color: color-mix(in srgb, var(--c-white) 82%, transparent);
}

.close__text strong {
  font-weight: 700;
  color: var(--c-white);
}

.close .pill {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-white);
}

.close .pill__icon {
  color: var(--c-blush);
}

.close .pill__sep {
  background: rgba(255, 255, 255, 0.35);
}

/* ---- Rodapé --------------------------------------------- */
/* Fundo próprio: é ele que encerra a malha, sem depender da altura
   da página. A cor é o ponto final do gradiente do documento. */
.footer {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--sp-s);
  padding-block: var(--sp-xl) var(--sp-l);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #dfbfef 0%, #ddbdee 55%);
}

.footer__sign {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-plum) 52%, transparent);
}

.footer__heart {
  font-size: 1.1em;
  line-height: 1;
}