/* Todo se posiciona en el sistema de coordenadas de la imagen original (1024 x 1536). */
:root {
  --ring: 2.4s;            /* ritmo del timbre */
  --bg: #0b4f9c;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}

#stage {
  position: absolute; left: 0; top: 0;
  width: 1024px; height: 1536px;
  transform-origin: 0 0;
}
#stage > * { position: absolute; }
.capa { pointer-events: none; }

/* ---------- Pantalla ---------- */
#screen {
  left: 91px; top: 41px; width: 843px; height: 1468px;
  overflow: hidden;
  background: var(--bg);
}
#screen .bg { position: absolute; inset: -40px; animation: deriva 26s ease-in-out infinite alternate; }
#screen .bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes deriva {
  0%   { transform: scale(1.02) translate(0, 0); }
  50%  { transform: scale(1.06) translate(-14px, -10px); }
  100% { transform: scale(1.04) translate(12px, 8px); }
}

.nube, .bruma { position: absolute; pointer-events: none; will-change: transform; }
.nube {
  width: 330px; height: 170px; border-radius: 50%;
  background:
    radial-gradient(closest-side at 30% 65%, rgba(255,250,235,.85), transparent),
    radial-gradient(closest-side at 55% 40%, rgba(255,248,230,.9), transparent),
    radial-gradient(closest-side at 78% 62%, rgba(255,240,215,.75), transparent),
    radial-gradient(closest-side at 50% 80%, rgba(250,225,200,.55), transparent);
  filter: blur(10px);
  mix-blend-mode: soft-light;
}
.n-a { left: 640px; top: 590px; opacity: .9; animation: nubeA 38s ease-in-out infinite alternate; }
.n-b { left: -120px; top: 860px; width: 420px; height: 200px; opacity: .8; animation: nubeB 46s ease-in-out infinite alternate; }
@keyframes nubeA { to { transform: translate(-90px, 12px) scale(1.08); } }
@keyframes nubeB { to { transform: translate(120px, -14px) scale(1.12); } }

.bruma { border-radius: 50%; filter: blur(40px); mix-blend-mode: screen; }
.b-a { left: 40px;  top: 1040px; width: 360px; height: 260px; background: rgba(200,90,220,.35); animation: brumaA 18s ease-in-out infinite alternate; }
.b-b { left: 360px; top: 1100px; width: 380px; height: 260px; background: rgba(255,214,90,.40); animation: brumaB 14s ease-in-out infinite alternate; }
.b-c { left: 560px; top: 950px;  width: 300px; height: 220px; background: rgba(255,110,140,.30); animation: brumaA 22s ease-in-out infinite alternate-reverse; }
@keyframes brumaA { to { transform: translate(90px, -30px) scale(1.15); } }
@keyframes brumaB { 0% { transform: translate(0,0); opacity: .7; } to { transform: translate(-80px, 20px) scale(1.2); opacity: 1; } }

#chispas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Barra de estado ---------- */
.hora {
  left: 146px; top: 66px; width: 110px;
  color: #fff; font: 600 35px/44px -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  letter-spacing: .3px;
}

/* ---------- Foto de contacto ---------- */
.sol-rayos {
  left: 66px; top: -43px; width: 900px; height: 900px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,240,190,.22) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%);
          mask: radial-gradient(closest-side, #000 30%, transparent 100%);
  mix-blend-mode: screen; pointer-events: none;
  animation: girar 60s linear infinite, latir 6s ease-in-out infinite alternate;
}
@keyframes girar { to { rotate: 360deg; } }
@keyframes latir { from { opacity: .45; } to { opacity: 1; } }

.onda {
  left: 273px; top: 164px; width: 486px; height: 486px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.75);
  box-shadow: 0 0 22px rgba(255,255,255,.35);
  opacity: 0; pointer-events: none;
  animation: onda calc(var(--ring) * 1.5) cubic-bezier(.2,.6,.3,1) infinite;
}
.o2 { animation-delay: calc(var(--ring) * .5); }
.o3 { animation-delay: var(--ring); }
@keyframes onda {
  0%   { transform: scale(1);    opacity: .8; }
  100% { transform: scale(1.42); opacity: 0; }
}

.av-flota { left: 273px; top: 164px; width: 486px; height: 486px; animation: flota 6s ease-in-out infinite; }
@keyframes flota { 50% { transform: translateY(-9px); } }
.av-pulso { width: 100%; height: 100%; animation: pulso var(--ring) ease-in-out infinite; }
@keyframes pulso {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.035); }
  24%      { transform: scale(.995); }
  36%      { transform: scale(1.02); }
  50%      { transform: scale(1); }
}
.aro {
  width: 100%; height: 100%; border-radius: 50%;
  background: #fbfdfe; padding: 11px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 40px rgba(255,255,255,.35), 0 18px 40px rgba(0,40,90,.25);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .4s ease-out;
}
.foto { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; isolation: isolate; }
.foto img {
  position: absolute; inset: -3px; width: calc(100% + 6px); height: calc(100% + 6px);
  transform-origin: 42% 45%;  /* el rostro */
  animation: respira 9s ease-in-out infinite alternate;
}
@keyframes respira {
  0%   { transform: scale(1.01) translate(0, 0) rotate(0deg); }
  50%  { transform: scale(1.06) translate(-4px, -3px) rotate(-.6deg); }
  100% { transform: scale(1.04) translate(3px, -5px) rotate(.4deg); }
}
.destello { /* el sol de la foto */
  position: absolute; left: 356px; top: 222px; width: 220px; height: 220px; margin: -110px 0 0 -110px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,235,.95), rgba(255,226,120,.45) 40%, transparent);
  mix-blend-mode: screen;
  animation: sol 4.5s ease-in-out infinite alternate;
}
@keyframes sol { from { transform: scale(.75); opacity: .55; } to { transform: scale(1.15); opacity: 1; } }
.brillo {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.32) 48%, transparent 58%);
  background-size: 300% 100%;
  mix-blend-mode: soft-light;
  animation: barrido 7s ease-in-out infinite;
}
@keyframes barrido { 0%, 60% { background-position: 120% 0; } 100% { background-position: -40% 0; } }

/* rayitas a los lados (vibración) */
.rayo-i { animation: vibraI var(--ring) ease-out infinite; transform-origin: 100% 50%; }
.rayo-d { animation: vibraD var(--ring) ease-out infinite; transform-origin: 0 50%; }
@keyframes vibraI {
  0%, 100% { transform: translateX(0) scale(1); opacity: .9; }
  10%      { transform: translateX(-12px) scale(1.06); opacity: 1; }
  22%      { transform: translateX(-2px); opacity: .7; }
  34%      { transform: translateX(-9px) scale(1.04); opacity: 1; }
  55%      { transform: translateX(0); opacity: .85; }
}
@keyframes vibraD {
  0%, 100% { transform: translateX(0) scale(1); opacity: .9; }
  10%      { transform: translateX(12px) scale(1.06); opacity: 1; }
  22%      { transform: translateX(2px); opacity: .7; }
  34%      { transform: translateX(9px) scale(1.04); opacity: 1; }
  55%      { transform: translateX(0); opacity: .85; }
}

/* ---------- Textos ---------- */
.letra { position: absolute; pointer-events: none; }
#llamando, #nombre { left: 0; top: 0; width: 1024px; height: 1536px; pointer-events: none; }
#llamando .punto { animation: punto 1.4s ease-in-out infinite; }
@keyframes punto {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  25%           { transform: translateY(-9px); opacity: 1; }
}
#nombre .letra {
  filter: drop-shadow(0 3px 6px rgba(0,40,100,.18));
  animation: ola 4s ease-in-out infinite;
}
@keyframes ola {
  0%, 30%, 100% { transform: translateY(0) rotate(0); }
  12%           { transform: translateY(-10px) rotate(-2deg); }
  20%           { transform: translateY(2px) rotate(1deg); }
}

.cronometro {
  left: 0; width: 1024px; top: 672px; text-align: center;
  color: #fff; font: 700 46px/56px "Nunito", "Segoe UI", system-ui, sans-serif;
  letter-spacing: 1px; text-shadow: 0 2px 8px rgba(0,40,100,.2);
}

/* ---------- Botones ---------- */
.btn {
  border: 0; background: none; cursor: pointer; border-radius: 50%;
  width: 268px; height: 268px; padding: 0;
  transition: left .6s cubic-bezier(.3,1.3,.5,1), opacity .4s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn img { width: 100%; height: 100%; display: block; pointer-events: none; }
.btn.verde { left: 176px; top: 1064px; animation: timbre var(--ring) ease-in-out infinite; }
.btn.rojo  { left: 584px; top: 1064px; animation: respiraBtn 3.2s ease-in-out infinite; }
.btn:active { transform: scale(.92); }
.btn:focus-visible { outline: 4px solid #fff; outline-offset: 6px; }
@keyframes timbre {
  0%, 100% { transform: scale(1) rotate(0); }
  6%   { transform: scale(1.07) rotate(-9deg); }
  12%  { transform: scale(1.07) rotate(9deg); }
  18%  { transform: scale(1.07) rotate(-7deg); }
  24%  { transform: scale(1.06) rotate(7deg); }
  30%  { transform: scale(1.04) rotate(-3deg); }
  38%  { transform: scale(1) rotate(0); }
}
@keyframes respiraBtn { 50% { transform: scale(1.03); } }
.btn-onda {
  left: 179px; top: 1067px; width: 262px; height: 262px; border-radius: 50%;
  background: rgba(60,220,80,.55); pointer-events: none;
  animation: btnOnda var(--ring) ease-out infinite;
}
@keyframes btnOnda { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
.etiqueta { transition: left .6s cubic-bezier(.3,1.3,.5,1), opacity .4s; }

/* ---------- Estados de la llamada ---------- */
body.en-llamada .btn.verde,
body.en-llamada .btn-onda,
body.en-llamada #lbl-contestar,
body.en-llamada #llamando { opacity: 0; pointer-events: none; }
body.en-llamada .onda,
body.en-llamada .rayo-i,
body.en-llamada .rayo-d { animation: none; opacity: 0; transition: opacity .5s; }
body.en-llamada .av-pulso { animation: none; }
body.en-llamada .btn.rojo { left: 378px; }
body.en-llamada #lbl-colgar { left: 438px !important; }
body.finalizada #llamando,
body.finalizada .btn, body.finalizada .btn-onda, body.finalizada .etiqueta,
body.finalizada .onda, body.finalizada .rayo-i, body.finalizada .rayo-d { animation: none; opacity: 0; pointer-events: none; }
body.finalizada .foto img { filter: grayscale(.5) brightness(.9); transition: filter .6s; }


/* paralaje (lo controla app.js) */
#screen .bg  { translate: calc(var(--px, 0) * -18px) calc(var(--py, 0) * -14px); }
.nube        { translate: calc(var(--px, 0) * -34px) calc(var(--py, 0) * -20px); }

/* aviso discreto: los navegadores no dejan sonar audio hasta el primer toque */
#aviso-sonido {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 14px);
  transform: translateX(-50%);
  padding: 10px 18px; border-radius: 999px;
  background: rgba(0, 30, 70, .45); color: #fff;
  font: 600 15px/1.2 "Nunito", "Segoe UI", system-ui, sans-serif;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: none; white-space: nowrap;
  animation: avisoLatir 2s ease-in-out infinite;
  transition: opacity .5s;
}
#aviso-sonido.oculto { opacity: 0; animation: none; }
@keyframes avisoLatir { 50% { opacity: .65; } }
@media (max-width: 520px) {
  #aviso-sonido { top: calc(env(safe-area-inset-top, 0px) + 46px); font-size: 13px; padding: 8px 14px; }
}