/* ============================================================
   GENESYS — EXPERIENCIA INMERSIVA · estilos compartidos
   Paleta y tipografía heredadas del sitio principal
   ============================================================ */
:root{
  --black:#000000;
  --gray-950:#060608;
  --gray-900:#0d0d10;
  --gray-850:#141417;
  --gray-800:#1c1c21;
  --white:#ffffff;
  --accent:#c4d0e8;
  --accent-dim:rgba(170,192,228,.12);
  --accent-glow:rgba(170,192,228,.30);
  --fg:#ededed;
  --fg-strong:#ffffff;
  --muted:#8f8f8f;
  --muted-dim:#555;
  --line:rgba(200,214,240,.07);
  --line-strong:rgba(200,214,240,.16);
  --prism:linear-gradient(120deg,#eef0ff 0%,#dce0ff 14%,#eedaff 28%,#ffd4f0 42%,#fff2d0 56%,#d2fce8 70%,#d4eeff 85%,#eef0ff 100%);
  --prism-cta:linear-gradient(135deg,#e8eeff 0%,#dddaff 20%,#f0d6ff 40%,#ffd6ee 60%,#fff0cc 80%,#ccf8e8 100%);
  --wa-green:#25d366;
  --wa-green-dark:#128c5e;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.5,.5,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--black);
  color:var(--fg);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font-family:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}

/* ---- fondo ambiente (aurora + grilla, eco del sitio) ---- */
.stage{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%,rgba(170,192,228,.06) 0%,transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 70%,rgba(180,160,255,.05) 0%,transparent 60%),
    var(--black);
}
.stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,black 10%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,black 10%,transparent 75%);
}

/* ---- marco teléfono ---- */
.phone{
  position:relative;
  width:min(430px,100vw);
  height:min(100dvh,100%);
  max-height:100dvh;
  overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--gray-950);
}
@media(min-width:520px){
  .phone{
    height:min(860px,94dvh);
    border:1px solid var(--line-strong);
    border-radius:28px;
    box-shadow:0 0 0 1px rgba(0,0,0,.8),0 30px 80px -20px rgba(150,120,255,.18),0 10px 40px rgba(0,0,0,.7);
  }
}

/* transición entre pasos: fundido a negro al salir, aparición al entrar */
.phone{animation:phoneIn .55s var(--ease-out) both}
@keyframes phoneIn{from{opacity:0}to{opacity:1}}
.phone::after{
  content:"";position:absolute;inset:0;z-index:60;pointer-events:none;
  background:var(--black);opacity:0;transition:opacity .42s ease;
}
.phone.leaving::after{opacity:1}

/* esquinas cinematográficas */
.corners span{position:absolute;width:18px;height:18px;border-color:var(--line-strong);border-style:solid;z-index:5;pointer-events:none}
.corners .tl{top:12px;left:12px;border-width:1px 0 0 1px}
.corners .tr{top:12px;right:12px;border-width:1px 1px 0 0}
.corners .bl{bottom:12px;left:12px;border-width:0 0 1px 1px}
.corners .br{bottom:12px;right:12px;border-width:0 1px 1px 0}

/* marca arriba */
.brandbar{
  position:absolute;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;gap:.55rem;
  padding:1.15rem 1.4rem;
  pointer-events:none;
}
.brandbar .tick{width:2.5px;height:14px;border-radius:2px;background:var(--prism);background-size:300% 100%;animation:prism-shift 5s ease-in-out infinite}
.brandbar .name{font-size:.72rem;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--fg-strong);opacity:.85}

@keyframes prism-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* botón prisma (CTA principal) */
.btn-prism{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:1rem;font-weight:700;letter-spacing:-.01em;
  padding:.95rem 1.8rem;border-radius:999px;
  background:var(--prism-cta);background-size:250% 100%;background-position:0% 50%;
  color:#160e28;
  box-shadow:0 4px 24px -6px rgba(170,150,240,.45);
  animation:prism-shift 5s ease-in-out infinite;
  transition:transform .18s var(--ease),box-shadow .2s;
}
.btn-prism:hover{transform:translateY(-1px);box-shadow:0 8px 32px -4px rgba(200,170,255,.55)}
.btn-prism:active{transform:scale(.97)}

/* enlace saltar */
.skip{
  position:absolute;bottom:14px;left:0;right:0;z-index:6;
  text-align:center;font-size:.72rem;letter-spacing:.08em;color:var(--muted-dim);
  transition:color .2s;
}
.skip:hover{color:var(--muted)}

/* ---- modo desktop: experiencia a pantalla completa ---- */
@media(min-width:1024px){
  .phone{
    width:100vw;
    height:100dvh;
    max-height:none;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent;
  }
  .corners span{width:26px;height:26px}
  .corners .tl{top:22px;left:26px}
  .corners .tr{top:22px;right:26px}
  .corners .bl{bottom:22px;left:26px}
  .corners .br{bottom:22px;right:26px}
  .brandbar{padding:1.6rem 2.4rem}
  .brandbar .name{font-size:.8rem}
  .skip{bottom:22px}
}

/* utilidades */
.fade-in{animation:fadeIn .7s var(--ease-out) both}
.fade-in-slow{animation:fadeIn 1.4s var(--ease-out) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hidden{display:none!important}