@font-face{font-family:"Bricolage Grotesque";src:url(assets/fontes/bricolage-grotesque.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(assets/fontes/instrument-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --bg:#0A0B0F;
  --texto:#F3F4F6;
  --suave:#B8B8B8;
  --raio:20px;
  --ouro:#E8B64C;
}

*{box-sizing:border-box;margin:0}
html{background:var(--bg)}
body{
  min-height:100vh;
  font-family:"Instrument Sans",system-ui,sans-serif;
  color:var(--texto);
  background:
    radial-gradient(900px 500px at 15% -10%,rgba(232,182,76,.16),transparent 60%),
    radial-gradient(800px 500px at 100% 10%,rgba(80,110,255,.12),transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}

.pagina{
  display:flex;flex-direction:column;gap:30px;
  max-width:1440px;margin:0 auto;padding:40px 65px 30px;
}

/* topo */
.topo{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.avatar{
  position:relative;width:104px;height:104px;border-radius:50%;
  display:grid;place-items:center;
  animation:flutua 5s ease-in-out infinite;
  transition:scale .4s cubic-bezier(.2,.9,.3,1.4);
}
.avatar:hover{scale:1.1}
.avatar img{
  position:relative;width:96px;height:96px;border-radius:50%;object-fit:cover;
  border:3px solid var(--bg);
}
.avatar__anel{ /* anel dourado girando + brilho pulsando */
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,#F4CD7A,#6D5BFF,#25D366,#E8B64C,#F4CD7A);
  animation:gira 6s linear infinite,pulsa 3s ease-in-out infinite;
}
.avatar__anel::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;filter:blur(18px);opacity:.55;z-index:-1}
.troca{color:var(--ouro);display:inline-block;transition:opacity .3s,translate .3s}
.troca.sai{opacity:0;translate:0 -8px}
.topo h1{font:800 34px/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-1.2px;margin-top:6px}
.topo p{color:var(--suave);font-size:15px}

/* grade */
.grade{display:flex;gap:17px}
.coluna{display:flex;flex-direction:column;gap:20px;width:100%}

/* cartão */
.card{
  position:relative;display:flex;overflow:hidden;width:100%;
  border-radius:var(--raio);
  color:inherit;text-decoration:none;cursor:pointer;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--s,1));
  transition:transform .25s ease-out;
  isolation:isolate;
}
.card::after{ /* brilho que varre o cartão no hover */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);
  translate:-120% 0;transition:translate .9s ease;
}
.card:hover::after{translate:120% 0}
.card .icone{transition:transform .4s cubic-bezier(.2,.9,.3,1.4)}
.card:hover .icone{transform:translateX(6px) scale(1.12) rotate(-6deg)}
.card::before{transition:background-position .4s ease-out}
.card::before{ /* fundo desfocado + escurecido, igual ao original */
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--veu,linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.42) 70%)),var(--fundo);
  background-size:cover;background-position:var(--pos,var(--base,center));
  filter:blur(4px);transform:scale(1.06);
}
.card:hover,.card:focus-visible{--s:1.03}
.card:focus-visible{outline:2px solid var(--ouro);outline-offset:4px}

.luz{
  position:absolute;top:0;left:0;width:200px;height:200px;border-radius:50%;
  pointer-events:none;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle closest-side,rgba(255,255,255,.3),transparent);
  transition:opacity .3s ease-out;
}

.conteudo{display:flex;flex-direction:column;gap:14px;padding:34px 38px;width:100%}
.card--grande .conteudo{justify-content:flex-end;min-height:360px}
.icone{display:block;width:44px;height:44px}
.icone svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.texto{display:flex;flex-direction:column;gap:14px}
.texto h2{font:700 40px/48px "Bricolage Grotesque",sans-serif;letter-spacing:-1.7px;color:#fff}
.texto h5{font-size:16px;font-weight:400;line-height:24px;color:var(--suave)}

/* fundos por cartão: recortes do site ednarampersonal.com.br */
.c-ouro   {--fundo:url(assets/proj-ednara.jpg);--base:22% 30%}
.c-verde  {--fundo:url(assets/bg-whatsapp.svg);--veu:linear-gradient(to top,rgba(0,0,0,.4),transparent 75%)}
.c-azul   {--fundo:url(assets/bg-instagram.svg);--veu:linear-gradient(to top,rgba(0,0,0,.4),transparent 75%)}
.c-grafite{--fundo:radial-gradient(60% 140% at 100% 0%,rgba(232,182,76,.28),transparent 60%),radial-gradient(50% 120% at 0% 100%,rgba(91,107,255,.18),transparent 60%),#0E1016;--veu:linear-gradient(transparent,transparent)}

.card--larga .conteudo{padding-block:44px}
.card--larga::before{filter:none;transform:none}

.rodape{padding:40px 0 10px;text-align:center;color:var(--suave);font-size:13px;opacity:.7}

@media (max-width:768px){
  .pagina{padding:28px 20px 24px;gap:20px}
  .grade{flex-direction:column;gap:20px}
  .conteudo{padding:30px}
  .card--grande .conteudo{min-height:280px}
  .texto h2{font-size:32px;line-height:38px;letter-spacing:-1.3px}
}

/* fundo vivo */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(90px);opacity:.28;will-change:transform}
.aurora i:nth-child(1){background:#E8B64C;top:-18vmax;left:-12vmax;animation:vaga1 22s ease-in-out infinite alternate}
.aurora i:nth-child(2){background:#5b6bff;top:10vmax;right:-16vmax;animation:vaga2 26s ease-in-out infinite alternate}
.aurora i:nth-child(3){background:#25D366;bottom:-24vmax;left:20vmax;opacity:.16;animation:vaga3 30s ease-in-out infinite alternate}
.holofote{ /* luz suave que segue o mouse na página toda */
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.06),transparent 70%);
}

/* entrada em sequência */
.entra{opacity:0;translate:0 28px;animation:entra .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*110ms + 100ms)}

@keyframes entra{to{opacity:1;translate:0 0}}
@keyframes flutua{50%{translate:0 -6px}}
@keyframes gira{to{transform:rotate(1turn)}}
@keyframes pulsa{50%{opacity:.75}}
@keyframes vaga1{to{transform:translate(18vmax,12vmax) scale(1.2)}}
@keyframes vaga2{to{transform:translate(-20vmax,16vmax) scale(.9)}}
@keyframes vaga3{to{transform:translate(-16vmax,-14vmax) scale(1.15)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .entra{opacity:1;translate:none}
}
.c-verde .texto h5,.c-azul .texto h5{color:rgba(255,255,255,.9)}