/* ───────── EloEssencial-∞ • Cinematic theme ───────── */

:root{
  --bg1:#0b1020;      /* azul profundo */
  --bg2:#1a1030;      /* violeta escuro */
  --ink:#eaf1ff;
  --muted:#a9b7d6;

  --brand:#5cc8ff;    /* cyan neon */
  --brand-2:#8e7cff;  /* lilás neon */
  --accent:#ffbf69;   /* âmbar suave */

  --card:#11182a;
  --line:#1f2940;
  --shadow:rgba(2,10,28,.5);

  --max:1100px;
}

/* RESET BÁSICO */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}

/* FUNDO CINEMATOGRÁFICO */
html,body{
  height:100%;
  background: radial-gradient(1200px 600px at 50% -10%, #1c2950 0%, transparent 60%),
              linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--ink);
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
}

/* LINKS */
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

/* CONTAINER */
.container{max-width:var(--max);margin:0 auto;padding:28px}

/* HERO */
header.hero{
  padding:82px 0 40px;
  text-align:center;
  position:relative;
  isolation:isolate;
}
header.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(900px 300px at 50% 0,#22325e40,transparent 70%);
  z-index:-1;
}

/* TÍTULOS */
h1{font:700 50px/1.1 Spectral,serif;margin:0 0 10px;text-shadow:0 2px 14px var(--shadow)}
h2{font:700 26px/1.2 Spectral,serif;margin:0 0 12px}

/* SUBTÍTULO */
header.hero p{
  color:var(--muted);
  max-width:780px;
  margin:0 auto 20px;
  font-size:18px;
}

/* BADGES */
.nav{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:18px 0}
.badge{
  display:inline-block;
  border:1px solid #2a3657;
  border-radius:999px;
  padding:6px 12px;
  color:var(--muted);
  background: linear-gradient(180deg,#10182a,#0e1526);
  box-shadow:0 2px 10px rgba(0,0,0,.25) inset;
  font-size:14px;
}

/* LINGUAGEM — BOTÕES NEON */
.lang{position:absolute;right:24px;top:24px;display:flex;gap:8px}
.lang button{
  padding:7px 12px;border-radius:10px;border:1px solid #2a385f;
  background:linear-gradient(180deg,#0f1730,#10182e);
  color:#bcd1ff; cursor:pointer; font-weight:600;
  box-shadow:0 0 12px #2f57ff40, inset 0 0 10px #1a2b50;
  transition:.2s transform,.2s box-shadow
}
.lang button:hover{
  transform:translateY(-1px);
  box-shadow:0 0 18px #6ccaff70, inset 0 0 12px #223a70;
}

/* GRID */
.section{padding:40px 0;border-top:1px solid var(--line)}
.grid{display:grid;gap:20px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* CARDS */
.card{
  background:linear-gradient(180deg,#0f172a,#11182a);
  border:1px solid #1e2945;
  border-radius:16px;
  padding:18px;
  box-shadow:0 14px 40px var(--shadow);
}
.card-link{transition:.25s transform,.25s box-shadow}
.card-link:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 50px rgba(0,0,0,.55);
}

/* FIGURES + HOVER ILUMINADO */
figure{margin:0;overflow:hidden;border-radius:14px;position:relative}
figure img{
  width:100%;height:auto;border-radius:14px;
  filter:saturate(.95) brightness(.95);
  transition:transform .5s ease, filter .5s ease;
}
.card-link:hover figure img,
.card:hover figure img{
  transform:scale(1.03);
  filter:saturate(1.1) brightness(1.1);
}

/* BLOCOQUOTE */
blockquote{
  border-left:4px solid var(--accent);
  padding:10px 14px;background:#121a2c;color:#f4f7ff;border-radius:10px;
  font-style:italic;box-shadow:0 6px 18px rgba(0,0,0,.25) inset;
}

/* META/LISTAS */
.meta{color:var(--muted);font-size:14px;list-style:none;padding:0;margin:0}
.meta li{margin:4px 0}

/* BOTÕES */
.btn{
  display:inline-block;background:linear-gradient(180deg,#68d1ff,#3ba9ff);
  color:#051423;padding:10px 14px;border-radius:12px;font-weight:800;
  box-shadow:0 10px 24px #3ba9ff40, inset 0 -6px 12px #247bcf;
  border:1px solid #1f6db7; transition:.2s transform,.2s box-shadow
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px #3ba9ff70, inset 0 -6px 12px #1f63a6}

/* VÍDEO EMBED */
.embed{position:relative;padding-top:56.25%}
.embed iframe,.embed video{
  position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:14px;
  box-shadow:0 10px 30px var(--shadow)
}

/* FOOTER */
footer{
  padding:42px 0;margin-top:14px;text-align:center;
  color:var(--muted);font-size:14px;border-top:1px solid var(--line)
}

/* RESPONSIVIDADE */
@media (max-width:520px){
  h1{font-size:34px}
  .lang{right:16px;top:16px}
  header.hero{padding-top:70px}
  .badge{font-size:13px}
}