/* fe · #contato — o anel volta inteiro em volta dela; o contato encosta no anel */
.fe { padding-bottom: clamp(3rem, 5vw, 4.5rem); }
.fe-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}
.fe-palco {
  position: relative;
  aspect-ratio: 1 / 1.32;
  container-type: inline-size;
}
.fe-anel {
  --tam: 92cqw; --esp: 11%; --de: 120deg;
  left: 4cqw; top: 24cqw; opacity: 1;
}
.fe-anel--fino { --tam: 106cqw; --esp: 1.4%; --de: 300deg; --volta: 90s; left: -3cqw; top: 17cqw; opacity: .55; animation-direction: reverse; }
.fe-halo {
  position: absolute; z-index: 1; left: 10cqw; top: 34cqw; width: 80cqw; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--primavera) 85%, transparent), color-mix(in oklab, var(--verao) 30%, transparent) 55%, transparent);
}
.fe-foto {
  position: absolute;
  z-index: 2;
  width: 64cqw;
  height: auto;
  left: 18cqw;
  bottom: 0;
  /* a cabeça sai pelo alto do anel, como no hero */
  -webkit-mask: linear-gradient(to bottom, #000 88%, transparent 100%);
          mask: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.fe-palco::after {
  /* arco de baixo passando à frente, translúcido (eco do anel da frente do hero) */
  content: ''; position: absolute; z-index: 3; pointer-events: none;
  width: 92cqw; aspect-ratio: 1; left: 4cqw; top: 24cqw; border-radius: 50%;
  background: conic-gradient(from 120deg in oklch, var(--inverno), var(--primavera), var(--verao), color-mix(in oklab, var(--outono) 75%, var(--verao)), var(--inverno));
  -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 90%, #000 97%, transparent 100%), linear-gradient(to bottom, transparent 60%, #000 76%);
  -webkit-mask-composite: source-in;
          mask: radial-gradient(closest-side, transparent 86%, #000 90%, #000 97%, transparent 100%), linear-gradient(to bottom, transparent 60%, #000 76%);
          mask-composite: intersect;
  opacity: .9;
  filter: saturate(1.25);
}
.fe-pilula {
  position: absolute; z-index: 4;
  display: inline-flex; align-items: center; gap: .55em;
  padding: .5em 1em .55em .8em; min-height: 44px;
  font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta); text-decoration: none; white-space: nowrap;
  border-radius: 99px;
  background: color-mix(in oklab, var(--papel) 74%, transparent);
  border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: 0 6px 22px -10px color-mix(in oklab, var(--outono) 40%, transparent);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
}
.fe-pilula i { width: .6em; height: .6em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 30%, transparent); }
.fe-pilula--a { left: -4cqw; top: 92cqw; text-transform: none; letter-spacing: .02em; font-size: .9rem; }
.fe-pilula--b { right: -4cqw; top: 40cqw; }
a.fe-pilula:hover { color: var(--magenta); }

.fe-titulo { font-size: clamp(3rem, 1.4rem + 5vw, 6.2rem); line-height: .95; }
.fe-lugar { margin: 1.4rem 0 0; font-size: var(--t-sub); line-height: 1.2; color: var(--tinta-suave); max-width: 22em; }
.fe-acoes { margin-top: 2.2rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.8rem; }
.fe-dados {
  margin: 2.6rem 0 0; padding: 1.4rem 0 0;
  border-top: 1px solid color-mix(in oklab, var(--tinta) 14%, transparent);
  display: grid; gap: 1rem;
  max-width: 32rem;
}
.fe-dados div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: baseline; }
.fe-dados dt { font-size: .78rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-suave); display: flex; align-items: center; gap: .6em; }
.fe-dados dd { margin: 0; font-size: var(--t-corpo); line-height: 1.5; }
.fe-dados a { color: var(--tinta); text-underline-offset: .2em; text-decoration-color: color-mix(in oklab, var(--magenta) 60%, transparent); display: inline-block; padding: .4rem 0; }

@media (max-width: 899px) {
  .fe-grade { grid-template-columns: 1fr; gap: 1rem; }
  .fe-palco { width: min(100%, 26rem); margin: 0 auto; }
  .fe-texto { text-align: left; }
  .fe-dados div { grid-template-columns: 1fr; gap: .2rem; }
  .fe-dados dt { font-size: .875rem; letter-spacing: .14em; }
  .fe-pilula { font-size: .875rem; letter-spacing: .1em; }
  .fe-pilula--a { font-size: .9rem; left: -2cqw; top: auto; bottom: 4cqw; }
  .fe-pilula--b { right: -2cqw; top: 14cqw; }
}