/* ── VARIABLES Y ESTILOS COMPARTIDOS – Cielo Skarlett QR Site ── */
:root {
  --c1: #74a4d6;
  --c2: #5b8dbf;
  --c3: #f0f7ff;
  --c4: #a3c4e8;
  --c5: #74a4d6;
  --g1: #c9a96e;
  --g2: #e8d5a3;
  --td: #1a3a4a;
  --tm: #0f222e;
  --fs: 'Great Vibes', cursive;
  --fe: 'Cormorant Garamond', serif;
  --fn: 'Montserrat', sans-serif;
  --tt: #3b98af;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--fn); background:#fff; color:var(--td); overflow-x:hidden; }

/* PARTÍCULAS */
#pcont { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:100; overflow:hidden; }
.pt { position:absolute; border-radius:50%; opacity:0; animation:floatUp linear infinite; }
@keyframes floatUp {
  0%   { transform:translateY(100vh) scale(0) rotate(0deg); opacity:0 }
  10%  { opacity:.6 }
  90%  { opacity:.15 }
  100% { transform:translateY(-10vh) scale(1) rotate(360deg); opacity:0 }
}
.destello { position:fixed; top:-50px; pointer-events:none; z-index:100; background:none; border-radius:0; animation:destelloFall linear infinite; }
@keyframes destelloFall {
  0%   { transform:translateY(-60px) translateX(0); opacity:0 }
  5%   { opacity:.8 }
  95%  { opacity:.5 }
  100% { transform:translateY(110vh) translateX(30px); opacity:0 }
}
.sparkle { position:fixed; pointer-events:none; z-index:100; width:4px; height:4px; border-radius:50%;
  background:var(--c1); animation:sparkleAnim ease-in-out infinite; }
@keyframes sparkleAnim { 0%,100%{transform:scale(0);opacity:0} 50%{transform:scale(1);opacity:.8} }

/* NAVBAR */
#nav { position:fixed; top:0; left:0; right:0; z-index:999; padding:16px 30px;
  display:flex; justify-content:space-between; align-items:center; transition:all .4s; }
#nav.s { background:rgba(255,255,255,.95); backdrop-filter:blur(18px); padding:10px 30px;
  box-shadow:0 2px 30px rgba(91,164,204,.18); }
.nlogo { font-family:var(--fs); font-size:2rem; color:var(--c1); text-decoration:none; transition:color .3s; }
.nlogo:hover { color:var(--c2); }
.nlinks { display:flex; gap:22px; list-style:none; }
.nlinks a { font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--td);
  text-decoration:none; transition:color .3s; position:relative; }
.nlinks a::after { content:''; position:absolute; bottom:-3px; left:0; width:0; height:1px;
  background:var(--g1); transition:width .3s; }
.nlinks a:hover { color:var(--c4); }
.nlinks a:hover::after, .nlinks a.active::after { width:100%; }
.nlinks a.active { color:var(--c1); }
.nmenu { display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; }
.nmenu span { display:block; width:24px; height:2px; background:var(--c5); transition:all .3s; }
.nmenu.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nmenu.open span:nth-child(2) { opacity:0; }
.nmenu.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
@media(max-width:640px) {
  .nlinks::before { content:''; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.4); z-index:-1; }
  .nlinks { display:none; position:fixed; left:0; right:0; bottom:0; top:auto; background:#fff;
    flex-direction:column; align-items:center; gap:0; z-index:1000; padding:0;
    border-radius:24px 24px 0 0; box-shadow:0 -8px 40px rgba(0,0,0,.15); list-style:none; }
  .nlinks.open { display:flex; animation:sheetUp .35s cubic-bezier(.22,1,.36,1) forwards; }
  @keyframes sheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
  .nlinks::after { content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%);
    width:40px; height:4px; background:#ccc; border-radius:4px; }
  .nlinks li { list-style:none; width:100%; border-bottom:1px solid rgba(0,0,0,.06); }
  .nlinks li:first-child { margin-top:28px; }
  .nlinks li:last-child { border-bottom:none; padding-bottom:env(safe-area-inset-bottom,10px); }
  .nlinks a { font-size:.95rem; font-weight:500; display:block; padding:16px 24px; text-align:center; transition:background .2s; }
  .nlinks a:active { background:var(--c3); }
  .nmenu { display:flex; z-index:1001; }
}
body.no-scroll { overflow:hidden; }

/* BOTÓN MÚSICA */
#musicBtn { position:fixed; bottom:25px; right:25px; z-index:2000; width:55px; height:55px;
  border-radius:50%; background:rgba(255,255,255,.2); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.4); color:var(--c1);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 32px rgba(0,0,0,.1); transition:all .4s cubic-bezier(.175,.885,.32,1.275); }
#musicBtn:hover { transform:scale(1.1) translateY(-5px); box-shadow:0 12px 40px rgba(116,164,214,.3); }
.music-icon { display:flex; align-items:center; justify-content:center; transition:transform .5s ease; }
#musicBtn.playing .music-icon { animation:musicRotate 4s linear infinite; }
@keyframes musicRotate { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
#musicBtn.playing { background:var(--c1); color:#fff; border-color:var(--c1); }
#musicBtn.playing::after { content:''; position:absolute; width:100%; height:100%; border-radius:50%;
  border:2px solid var(--c1); animation:sonar 2s linear infinite; opacity:0; }
@keyframes sonar { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(2);opacity:0} }

/* ANIMACIONES */
@keyframes fadeDown { from{opacity:0;transform:translateY(-30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(30px)}  to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes pulse    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }
@keyframes crownFloat { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-12px) rotate(2deg)} }
@keyframes destelloTwinkle { 0%{transform:scale(.8);opacity:.5} 100%{transform:scale(1.5);opacity:1} }
@keyframes glowBlue { 0%,100%{text-shadow:0 0 20px rgba(135,206,235,0)} 50%{text-shadow:0 0 40px rgba(135,206,235,.7),0 0 80px rgba(135,206,235,.4)} }
@keyframes arrowBounce { 0%,100%{transform:rotate(45deg) translateY(0)} 50%{transform:rotate(45deg) translateY(10px)} }
@keyframes shimmer { 0%,100%{box-shadow:0 8px 30px rgba(91,164,204,.35)} 50%{box-shadow:0 14px 45px rgba(91,164,204,.65)} }

/* REVEAL */
.rv  { opacity:0; transform:translateY(40px);  transition:opacity .8s,transform .8s; }
.rv.on  { opacity:1; transform:translateY(0); }
.rl  { opacity:0; transform:translateX(-40px); transition:opacity .8s,transform .8s; }
.rl.on  { opacity:1; transform:translateX(0); }
.rr  { opacity:0; transform:translateX(40px);  transition:opacity .8s,transform .8s; }
.rr.on  { opacity:1; transform:translateX(0); }

/* SECCIONES */
section { position:relative; z-index:1; padding:90px 20px; }
.si { max-width:900px; margin:0 auto; text-align:center; }
.stag { font-size:.72rem; letter-spacing:.4em; text-transform:uppercase; color:var(--g1); font-weight:500; margin-bottom:6px; }
.stitle { font-family:var(--fs); font-size:clamp(2.5rem,6vw,4.5rem); color:var(--c1); line-height:1.1; margin-bottom:15px; }
.sdiv { display:flex; align-items:center; justify-content:center; gap:14px; margin:12px auto 28px; }
.sdiv::before { content:''; width:55px; height:1px; background:linear-gradient(90deg,transparent,var(--g1)); }
.sdiv::after  { content:''; width:55px; height:1px; background:linear-gradient(90deg,var(--g1),transparent); }
.sdia { width:8px; height:8px; background:var(--g1); transform:rotate(45deg); }
.stxt { font-family:var(--fe); font-size:1.12rem; color:var(--tm); line-height:1.9; font-weight:300; }

/* BOTÓN PLATEADO */
.btn-silver {
  display:inline-block; padding:12px 48px;
  background:linear-gradient(to bottom,#555 0%,#888 5%,#ddd 40%,#eee 50%,#ddd 60%,#777 95%,#444 100%);
  color:#111 !important; font-family:"Times New Roman",Times,serif; font-size:1.1rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; border-radius:60px; border:1px solid #333;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.8),inset 0 -1px 2px rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.25);
  position:relative; transition:all .3s ease; cursor:pointer; text-align:center; margin-top:20px; text-decoration:none !important;
}
.btn-silver::after { content:''; position:absolute; bottom:12px; left:20%; right:20%; height:1.5px; background:#111; }
.btn-silver:hover { transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 12px 28px rgba(0,0,0,.3); }
.btn-silver:active { transform:translateY(1px); box-shadow:0 4px 10px rgba(0,0,0,.2); }

/* HERO MINI (para páginas secundarias) */
.hero-mini {
  min-height:38vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; background:linear-gradient(135deg,#ffffff 0%,#eef9ff 100%);
  position:relative; overflow:hidden; padding:110px 20px 60px;
}
.hero-mini::before { content:''; position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.4) 0%,transparent 70%);
  top:-150px; right:-100px; animation:pulse 7s ease-in-out infinite; }
.hero-mini .hcrown { width:100px; height:auto; display:block; margin:0 auto 10px;
  animation:fadeDown 1s ease forwards .1s, crownFloat 4s ease-in-out infinite 1.5s; }
.hero-mini .htag { font-size:.78rem; letter-spacing:.5em; color:var(--td); text-transform:uppercase;
  font-weight:500; animation:fadeDown 1s ease forwards .3s; }
.hero-mini .hname { font-family:var(--fs); font-size:clamp(3rem,8vw,6rem); color:var(--c1);
  text-shadow:2px 6px 25px rgba(116,164,214,.3);
  animation:fadeUp 1.2s ease forwards .9s, glowBlue 4s ease-in-out infinite 2.5s; }