@charset "UTF-8";

/* ——— VALINOR / ETHEREAL PROFILE ——— */
/* Pega esto en tu CSS del perfil (MFC) */
:root {
  --bg-image:url(https://YOUR-VALINOR-BG.jpg);
/* <— reemplaza por tu imagen */
  --bg-color-1:#0b1020;
/* midnight */
  --bg-color-2:#121a35;
/* deep indigo */
  --accent:#d8c28f;
/* elven gold */
  --accent-2:#9ad7e8;
/* starlight teal */
  --text:#e9edf6;
  --muted:#a9b0c6;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

* {
  box-sizing:border-box;
}

html,body {
  height:100%;
}

body {
  margin:0;
  color:var(--text);
  font-family:"Cormorant Garamond","Playfair Display","Garamond","Times New Roman",serif;
  background:radial-gradient(60vw 60vw at 10% -10%,#2a3d7a44,transparent 60%),radial-gradient(40vw 40vw at 110% 10%,#18305a55,transparent 60%),linear-gradient(180deg,var(--bg-color-1),var(--bg-color-2)),var(--bg-image) center/cover no-repeat fixed;
  background-blend-mode:screen,screen,multiply,normal;
  letter-spacing:.2px;
}

/* stardust */
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(2px 2px at 20% 30%,#ffffff99 40%,transparent 45%),radial-gradient(1.5px 1.5px at 70% 60%,#d8f5ff88 40%,transparent 45%),radial-gradient(1.2px 1.2px at 40% 80%,#d0e2ff77 40%,transparent 45%),radial-gradient(1.2px 1.2px at 85% 20%,#fff6d977 40%,transparent 45%);
  mix-blend-mode:screen;
  opacity:.65;
  animation:twinkle 7s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from {
    opacity:.45;
    transform:translateY(0);
  }

  to {
    opacity:.8;
    transform:translateY(-3px);
  }
}

/* contenedor (fallback a wrappers comunes de MFC) */
#profile,.profileContainer,.content,.profile_main,.container {
  max-width:980px;
  margin:clamp(18px,4vw,40px) auto;
  padding:0 18px;
}

/* glass cards */
.card,.module,.box,.panel,.profileSection,.about,.bio,.info,.gallery {
  background:linear-gradient(to bottom right,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(216,194,143,.25);
  border-radius:18px;
  backdrop-filter:blur(6px) saturate(115%);
  -webkit-backdrop-filter:blur(6px) saturate(115%);
  box-shadow:var(--shadow);
  padding:clamp(16px,3.2vw,28px);
  margin-bottom:18px;
}

/* headings */
h1,h2,h3 {
  font-family:"Cinzel","Trajan Pro","Garamond",serif;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin:0 0 10px;
  color:var(--text);
  text-shadow:0 1px 0 #000,0 0 12px #c6d3ff22;
}

h1 {
  font-size:clamp(28px,4.4vw,42px);
}

h2 {
  font-size:clamp(22px,3.2vw,30px);
}

h3 {
  font-size:clamp(18px,2.6vw,24px);
}

/* divisor élfico */
.hr-elven {
  position:relative;
  height:18px;
  margin:18px 0 8px;
}

.hr-elven::before {
  content:"";
  position:absolute;
  top:50%;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(216,194,143,.6),transparent);
}

.hr-elven::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:22px;
  height:22px;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid rgba(216,194,143,.65);
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.25),transparent 55%);
  box-shadow:0 0 18px rgba(216,194,143,.35);
}

/* texto & links */
p {
  line-height:1.6;
  color:var(--muted);
  margin:.4em 0 1em;
}

strong,b {
  color:var(--text);
}

small {
  color:#c3c9de;
}

a {
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px dotted rgba(216,194,143,.4);
  transition:.2s ease;
}

a:hover {
  color:#fff;
  text-shadow:0 0 10px rgba(216,194,143,.55);
  border-bottom-color:transparent;
}

/* botones / CTAs / tip */
.btn,button,.tip_button,.cta {
  display:inline-block;
  padding:10px 16px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(216,194,143,.25),rgba(154,215,232,.18));
  border:1px solid rgba(216,194,143,.45);
  color:var(--text);
  letter-spacing:.6px;
  cursor:pointer;
  transition:.25s ease;
  backdrop-filter:blur(3px);
}

.btn:hover,button:hover,.tip_button:hover,.cta:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 18px rgba(216,194,143,.35);
}

/* avatar / header */
.profileAvatar,.avatar,.header img {
  border-radius:14px;
  border:1px solid rgba(216,194,143,.35);
  box-shadow:var(--shadow);
  animation:floaty 8s ease-in-out infinite;
}

@keyframes floaty {
  0%,100% {
    transform:translateY(0);
  }

  50% {
    transform:translateY(-4px);
  }
}

/* listas, pills, galería */
ul {
  padding-left:18px;
}

li {
  margin:.4em 0;
}

.pill {
  display:inline-block;
  padding:6px 10px;
  margin:3px 6px 0 0;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(216,194,143,.35);
  color:#e7ecff;
  font-variant:all-small-caps;
  letter-spacing:.08em;
}

.gallery img {
  border-radius:12px;
  border:1px solid rgba(216,194,143,.3);
  transition:.2s;
}

.gallery img:hover {
  transform:scale(1.02);
}

::selection {
  background:rgba(216,194,143,.28);
}

@media (max-width:640px) {
  #profile,.profileContainer,.content,.profile_main,.container {
    padding:0 12px;
  }

  .card,.module,.box,.panel,.profileSection,.about,.bio,.info,.gallery {
    padding:14px;
  }
}

/* (Opcional) Fuentes — descomenta si tu perfil permite  */
/*
 url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Cormorant+Garamond:wght@400;600&display=swap');
*/