/* ===================================================================
   ROYAL NAM — efectos
   Se carga después de casa.css
   =================================================================== */

/* ===================================================================
   AURORA DE FONDO
   =================================================================== */
.aurora-zona{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* respaldo por si no hay WebGL: un degradado quieto pero digno */
.aurora-zona::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(1100px 520px at 68% 18%, rgba(140,172,245,.16), transparent 62%),
    radial-gradient(900px 480px at 18% 72%, rgba(36,84,214,.24), transparent 66%);
}
#aurora{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.6s ease}
#aurora.encendida{opacity:1}
#aurora.encendida ~ *{position:relative}
.portada > .env{position:relative;z-index:1}

/* ===================================================================
   TIPOGRAFÍA CINÉTICA
   =================================================================== */
.letra{
  display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);
  transition:opacity .6s var(--curva),transform .7s var(--curva);
}
.letras-on .letra{opacity:1;transform:none}

/* ===================================================================
   BOTONES MAGNÉTICOS
   =================================================================== */
[data-iman]{transition:transform .45s var(--curva)}
[data-iman]:active{transform:scale(.97)}

/* ===================================================================
   GALERÍA DE EFECTOS
   =================================================================== */
.efectos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.efecto{
  border:1px solid var(--linea);border-radius:14px;background:var(--tarjeta);overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .4s ease,box-shadow .4s ease,transform .4s var(--curva);
}
.efecto:hover{border-color:var(--azul-claro);transform:translateY(-4px);box-shadow:0 20px 40px rgba(22,33,62,.1)}
.efecto-lienzo{
  aspect-ratio:16/10;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.efecto-pie{padding:17px 19px 21px;border-top:1px solid var(--linea)}
.efecto-pie b{display:block;font-family:'Fraunces',serif;font-weight:560;font-size:1.02rem;margin-bottom:4px;color:var(--ink)}
.efecto-pie span{font-size:.83rem;color:var(--ink-tenue);line-height:1.5}

/* --- vidrio --- */
.ef-vidrio{background:linear-gradient(130deg,#3B63D9,#8CACF5 52%,#1F6F8B)}
.ef-vidrio .lamina{
  width:62%;height:56%;border-radius:16px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
  border:1px solid rgba(255,255,255,.36);
  box-shadow:0 8px 32px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;
  font-family:'Work Sans',sans-serif;font-size:.82rem;font-weight:600;color:#fff;
  transition:transform .7s var(--curva);
}
.efecto:hover .ef-vidrio .lamina{transform:translateY(-7px) scale(1.05)}

/* --- neumorfismo --- */
.ef-neu{background:#E4E7EE}
.ef-neu .boton{
  width:74px;height:74px;border-radius:50%;background:#E4E7EE;
  box-shadow:7px 7px 16px #C2C6CE, -7px -7px 16px #FFFFFF;
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .5s ease;
}
.ef-neu .boton::after{content:"";width:20px;height:20px;border-radius:50%;background:#2454D6}
.efecto:hover .ef-neu .boton{box-shadow:inset 6px 6px 13px #C2C6CE, inset -6px -6px 13px #FFFFFF}

/* --- inclinación 3D --- */
.ef-3d{background:radial-gradient(circle at 50% 40%,#1F3768,#101C3D)}
.ef-3d .tarjeta{
  width:63%;height:62%;border-radius:14px;
  background:linear-gradient(140deg,#4B7BEA,#16213E);
  box-shadow:0 20px 44px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-weight:600;font-size:1.5rem;color:#fff;
  transition:transform .3s ease;position:relative;overflow:hidden;
}
.ef-3d .tarjeta::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(240px circle at var(--bx,50%) var(--by,50%),rgba(255,255,255,.36),transparent 55%);
}

/* --- aurora en pequeño --- */
.ef-aurora{background:#0C1730;position:relative}
.ef-aurora span{
  position:absolute;border-radius:50%;filter:blur(30px);opacity:.8;
  animation:vagar 9s ease-in-out infinite;
}
.ef-aurora .a{width:120px;height:120px;background:#3B63D9;top:8%;left:12%}
.ef-aurora .b{width:110px;height:110px;background:#8CACF5;bottom:6%;right:14%;animation-delay:-3s}
.ef-aurora .c{width:80px;height:80px;background:#1F6F8B;top:44%;left:48%;animation-delay:-6s}
@keyframes vagar{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(22px,-16px) scale(1.16)}66%{transform:translate(-18px,14px) scale(.9)}}

/* --- imán --- */
.ef-iman{background:#101C3D}
.ef-iman .pildora{
  border:1.5px solid var(--azul-claro,#8CACF5);color:#8CACF5;padding:13px 26px;border-radius:99px;
  font-family:'Work Sans',sans-serif;font-size:.86rem;font-weight:600;
  cursor:pointer;background:transparent;
}

/* --- letras --- */
.ef-letras{background:linear-gradient(140deg,#172A52,#101C3D)}
.ef-letras b{
  font-family:'Fraunces',serif;font-weight:600;font-size:2.1rem;letter-spacing:-.02em;
  color:#EAF0FF;
}
.ef-letras b i{font-style:italic;color:#8CACF5;font-weight:400}
.efecto:hover .ef-letras b{animation:salta .7s var(--curva)}
@keyframes salta{0%{transform:translateY(0)}40%{transform:translateY(-9px)}100%{transform:translateY(0)}}

/* ===================================================================
   GLOBO DE WHATSAPP — tarjeta clara, flota sobre cualquier fondo
   =================================================================== */
.globo{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:flex-end;gap:12px}
.globo.guardado .globo-nota{display:none}
.globo-nota{
  max-width:250px;background:var(--tarjeta);border:1px solid var(--linea);border-radius:12px;
  padding:16px 18px;position:relative;box-shadow:0 20px 44px rgba(22,33,62,.16);
  opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;
  transition:opacity .6s var(--curva),transform .6s var(--curva);
}
.globo.fuera .globo-nota{opacity:1;transform:none;pointer-events:auto}
.globo-nota b{display:block;font-family:'Fraunces',serif;font-weight:560;font-size:1rem;margin-bottom:5px;color:var(--ink)}
.globo-nota span{font-size:.85rem;color:var(--ink-tenue);line-height:1.5;display:block}
.globo-nota a{
  display:inline-block;margin-top:10px;color:var(--azul);text-decoration:none;
  font-family:'Work Sans',sans-serif;font-size:.83rem;font-weight:600;
}
.globo-nota a:hover{text-decoration:underline}
.globo-x{
  position:absolute;top:6px;right:8px;background:none;border:0;cursor:pointer;
  color:var(--ink-tenue);font-size:1.1rem;line-height:1;padding:4px;
}
.globo-x:hover{color:var(--azul)}
.globo-btn{
  width:58px;height:58px;border-radius:50%;background:#25D366;color:#06331A;flex:none;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:transform .4s var(--curva),box-shadow .4s ease;position:relative;
}
.globo-btn:hover{transform:scale(1.08);box-shadow:0 14px 38px rgba(37,211,102,.55)}
.globo-btn svg{width:26px;height:26px}
.globo-btn::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:1px solid #25D366;
  animation:onda 2.6s ease-out infinite;
}
@keyframes onda{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}

/* ===================================================================
   RESPONSIVO
   =================================================================== */
@media (max-width:1000px){ .efectos{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){
  .efectos{grid-template-columns:1fr}
  .globo{right:14px;bottom:14px}
  .globo-nota{max-width:200px}
}
@media (prefers-reduced-motion:reduce){
  .letra{opacity:1;transform:none}
  .ef-aurora span,.globo-btn::after{animation:none}
  .efecto:hover .ef-letras b{animation:none}
  [data-iman]{transition:none}
  #aurora{display:none}
}