/* ============================================================================
   EL PUNTO EN EL ONBOARDING — un punto por pantalla
   Sustituye las 16 poses de Beppina del onboarding de paciente. Donde
   Beppina sostenía un objeto, el punto cambia de forma, hace un gesto o
   aparece con un acompañante dibujado con su mismo lenguaje (círculos y
   líneas). Todos corren en bucle.

   Regla que se mantiene: el punto NO cambia de color. La gota es azul.
   Rojo y ámbar siguen reservados para error y alerta.

   Los estados con acompañante necesitan un nodo extra dentro del punto:
     <span class="bepp-punto__extra"> … </span>
   El markup de cada uno vive en el mapa EXTRAS del laboratorio (index.html).

   Pantalla            Beppina          data-state
   Splash / bienvenida welcome          saludo      (punto-saludo.css)
   ¿Cómo te llamas?    thinking         curioso
   Tu correo           envelope         sobre
   Revisa tu correo    loading          esperando
   Tu @usuario         name-badge       arroba
   Tu contraseña       padlock          discreto    (punto-discreto.css)
   Lo básico           zen-moment       zen
   Perfil creado       goal-met         logro
   Tipo de sangre      blood-drop       gota
   Alergias            health-choices   estornudo
   Enfermedades        stethoscope      latido
   Medicamentos        with-pill        capsula
   Tu familia          family           familia
   Estilo de vida      active           trota
   Emergencia          alert            cruz
   Expediente listo    score            progreso
   ========================================================================= */

.bepp-punto__extra {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.bepp-punto__extra svg { position: absolute; left: 50%; top: 50%; overflow: visible; }

/* ============================================================================
   CURIOSO · ¿Cómo te llamas?
   Ladea la cabeza y mira hacia el campo con los ojos bien abiertos.
   ========================================================================= */
.bepp-punto[data-state="curioso"] { --T: 4000ms; }
.bepp-punto[data-state="curioso"] .bepp-punto__core {
  transform-origin: 50% 90%;
  animation: pb-curioso-cabeza var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-curioso-cabeza {
  0%, 18%   { transform: rotate(0); }
  30%, 62%  { transform: rotate(-11deg); }
  70%       { transform: rotate(3deg); }
  78%, 100% { transform: rotate(0); }
}
.bepp-punto[data-state="curioso"] .bepp-punto__eyes {
  animation: pb-curioso-mirada var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-curioso-mirada {
  0%, 18%   { transform: translate(0, 0); }
  30%, 62%  { transform: translate(calc(var(--punto-d) * .07), calc(var(--punto-d) * .05)); }
  78%, 100% { transform: translate(0, 0); }
}
.bepp-punto[data-state="curioso"] .bepp-punto__eyes i {
  animation: pb-curioso-ojos var(--T) ease-in-out infinite;
}
@keyframes pb-curioso-ojos {
  0%, 30%   { transform: scaleY(1); }
  36%       { transform: scaleY(1.18); }
  43%       { transform: scaleY(.08); }
  48%, 62%  { transform: scaleY(1.18); }
  72%, 100% { transform: scaleY(1); }
}

/* ============================================================================
   SOBRE · Tu correo
   Llega un sobre, el punto brinca y lo sella. El sobre sale volando.
   ========================================================================= */
.bepp-punto[data-state="sobre"] { --T: 3800ms; }
.pb-sobre {
  width: calc(var(--punto-d) * .56);
  height: auto;
  margin-left: calc(var(--punto-d) * .62);
  fill: #FFFFFF;
  stroke: var(--punto-core);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
  animation: pb-sobre-vuelo var(--T) cubic-bezier(.34, 1.1, .64, 1) infinite;
}
@keyframes pb-sobre-vuelo {
  0%        { transform: translate(calc(var(--punto-d) * .5), -50%); opacity: 0; }
  18%, 70%  { transform: translate(0, -50%); opacity: 1; }
  84%       { transform: translate(calc(var(--punto-d) * .1), -190%); opacity: 0; }
  100%      { transform: translate(calc(var(--punto-d) * .1), -190%); opacity: 0; }
}
.pb-sello {
  fill: var(--punto-core);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: pb-sello var(--T) cubic-bezier(.34, 1.4, .64, 1) infinite;
}
@keyframes pb-sello {
  0%, 40%   { transform: scale(0); }
  46%       { transform: scale(1.4); }
  52%, 94%  { transform: scale(1); }
  100%      { transform: scale(0); }
}
.bepp-punto[data-state="sobre"] .bepp-punto__core {
  transform-origin: 50% 100%;
  animation: pb-sobre-brinco var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-sobre-brinco {
  0%, 28%   { transform: translateY(0) rotate(0); }
  36%       { transform: translateY(calc(var(--punto-d) * -.14)) rotate(8deg); }
  44%       { transform: translateY(0) rotate(4deg) scaleX(1.07) scaleY(.93); }
  52%, 100% { transform: translateY(0) rotate(0) scale(1); }
}
.bepp-punto[data-state="sobre"] .bepp-punto__eyes {
  animation: pb-sobre-mirada var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-sobre-mirada {
  0%, 10%   { transform: translate(0, 0); }
  20%, 68%  { transform: translate(calc(var(--punto-d) * .07), 0); }
  78%       { transform: translate(calc(var(--punto-d) * .05), calc(var(--punto-d) * -.08)); }
  90%, 100% { transform: translate(0, 0); }
}

/* ============================================================================
   ESPERANDO · Revisa tu correo
   Mira de un lado a otro. Cuando llega el código, mira arriba y suelta un
   anillo.
   ========================================================================= */
.bepp-punto[data-state="esperando"] { --T: 3800ms; }
.bepp-punto[data-state="esperando"] .bepp-punto__eyes {
  animation: pb-esperando-mirada var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-esperando-mirada {
  0%, 8%    { transform: translate(0, 0); }
  20%, 30%  { transform: translate(calc(var(--punto-d) * -.07), 0); }
  42%, 52%  { transform: translate(calc(var(--punto-d) * .07), 0); }
  60%       { transform: translate(0, 0); }
  66%, 80%  { transform: translate(0, calc(var(--punto-d) * -.07)); }
  90%, 100% { transform: translate(0, 0); }
}
.bepp-punto[data-state="esperando"] .bepp-punto__eyes i {
  animation: pb-esperando-ojos var(--T) ease-in-out infinite;
}
@keyframes pb-esperando-ojos {
  0%, 33%   { transform: scaleY(1); }
  36%       { transform: scaleY(.08); }
  39%, 62%  { transform: scaleY(1); }
  66%       { transform: scaleY(1.25); }
  80%       { transform: scaleY(1.15); }
  88%, 100% { transform: scaleY(1); }
}
.bepp-punto[data-state="esperando"] .bepp-punto__core {
  animation: pb-esperando-brinco var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-esperando-brinco {
  0%, 62%   { transform: translateY(0); }
  66%       { transform: translateY(calc(var(--punto-d) * -.07)); }
  72%, 100% { transform: translateY(0); }
}
.bepp-punto[data-state="esperando"] .bepp-punto__ring--a {
  animation: pb-esperando-anillo var(--T) cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes pb-esperando-anillo {
  0%, 63%   { transform: scale(1);   opacity: 0; }
  64%       { transform: scale(1);   opacity: .85; }
  92%, 100% { transform: scale(3);   opacity: 0; }
}

/* ============================================================================
   ARROBA · Tu @usuario
   Una @ se dibuja alrededor. El punto es su centro y sigue la pluma con la
   mirada.
   ========================================================================= */
.bepp-punto[data-state="arroba"] { --T: 4200ms; }
.pb-arroba {
  width: calc(var(--punto-d) * 2.5);
  height: calc(var(--punto-d) * 2.5);
  margin: calc(var(--punto-d) * -1.25) 0 0 calc(var(--punto-d) * -1.25);
  fill: none;
  stroke: var(--punto-core);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  animation: pb-arroba-trazo var(--T) cubic-bezier(.55, .1, .35, 1) infinite;
}
@keyframes pb-arroba-trazo {
  0%        { stroke-dashoffset: 100; }
  45%, 78%  { stroke-dashoffset: 0; }
  94%, 100% { stroke-dashoffset: -100; }
}
.bepp-punto[data-state="arroba"] .bepp-punto__eyes {
  animation: pb-arroba-mirada var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-arroba-mirada {
  0%        { transform: translate(calc(var(--punto-d) * .06), 0); }
  12%       { transform: translate(0, calc(var(--punto-d) * -.07)); }
  24%       { transform: translate(calc(var(--punto-d) * -.07), 0); }
  34%       { transform: translate(0, calc(var(--punto-d) * .06)); }
  45%       { transform: translate(calc(var(--punto-d) * .05), calc(var(--punto-d) * .04)); }
  56%, 88%  { transform: translate(0, 0); }
  100%      { transform: translate(calc(var(--punto-d) * .06), 0); }
}
.bepp-punto[data-state="arroba"] .bepp-punto__core {
  animation: pb-arroba-pop var(--T) cubic-bezier(.34, 1.4, .64, 1) infinite;
}
@keyframes pb-arroba-pop {
  0%, 44%   { transform: scale(1); }
  49%       { transform: scale(1.08); }
  55%, 100% { transform: scale(1); }
}

/* ============================================================================
   ZEN · Lo básico
   Flota y respira lento con los ojos cerrados. A diferencia de discreto,
   mira al frente y levita.
   ========================================================================= */
.bepp-punto[data-state="zen"] { --T: 6000ms; }
.bepp-punto[data-state="zen"] .bepp-punto__core {
  animation: pb-zen-flota var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-zen-flota {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(calc(var(--punto-d) * -.1)) scale(1.04); }
}
.bepp-punto[data-state="zen"] .bepp-punto__aura {
  animation: pb-zen-sombra var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-zen-sombra {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(.85); opacity: .65; }
}
.bepp-punto[data-state="zen"] .bepp-punto__eyes i {
  background: transparent;
  width: calc(var(--punto-eye-w) * 1.9);
  height: calc(var(--punto-eye-h) * .34);
  border-bottom: calc(var(--punto-d) * .05) solid var(--punto-eye);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  animation: none;
}
.bepp-punto[data-state="zen"] .bepp-punto__ring--a {
  animation: bepp-punto-ring var(--T) cubic-bezier(.2, .6, .3, 1) infinite;
}

/* ============================================================================
   LOGRO · Tu perfil BEPP ya existe
   Se agacha, salta y suelta confeti de mini puntos. Sonrisa todo el tiempo.
   ========================================================================= */
.bepp-punto[data-state="logro"] { --T: 2800ms; }
.bepp-punto[data-state="logro"] .bepp-punto__core {
  transform-origin: 50% 100%;
  animation: pb-logro-salto var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-logro-salto {
  0%, 10%   { transform: translateY(0) scale(1); }
  18%       { transform: translateY(0) scaleX(1.12) scaleY(.86); }
  32%       { transform: translateY(calc(var(--punto-d) * -.42)) scaleX(.94) scaleY(1.08); }
  42%       { transform: translateY(calc(var(--punto-d) * -.46)) scale(1); }
  56%       { transform: translateY(0) scaleX(1.1) scaleY(.9); }
  64%, 100% { transform: translateY(0) scale(1); }
}
.bepp-punto[data-state="logro"] .bepp-punto__aura {
  animation: pb-logro-sombra var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-logro-sombra {
  0%, 18%, 60%, 100% { transform: scale(1);  opacity: 1; }
  38%                { transform: scale(.7); opacity: .45; }
}
.bepp-punto[data-state="logro"] .bepp-punto__eyes i {
  background: transparent;
  width: calc(var(--punto-eye-w) * 1.45);
  height: calc(var(--punto-eye-h) * .26);
  border-top: calc(var(--punto-d) * .045) solid var(--punto-eye);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  animation: none;
}
.pb-confeti {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--punto-d) * .1);
  height: calc(var(--punto-d) * .1);
  border-radius: 50%;
  background: var(--punto-core);
  translate: -50% calc(-50% - var(--punto-d) * .45);
  rotate: var(--a);
  opacity: 0;
  animation: pb-confeti var(--T) cubic-bezier(.2, .7, .3, 1) infinite;
}
.pb-confeti:nth-child(even) { background: var(--punto-halo); width: calc(var(--punto-d) * .075); height: calc(var(--punto-d) * .075); }
@keyframes pb-confeti {
  0%, 36%  { transform: translateY(0) scale(.4); opacity: 0; }
  38%      { opacity: 1; }
  66%      { transform: translateY(calc(var(--punto-d) * var(--r) * -1)) scale(1); opacity: 1; }
  82%, 100% { transform: translateY(calc(var(--punto-d) * var(--r) * -1.12)) scale(.6); opacity: 0; }
}
.bepp-punto[data-state="logro"] .bepp-punto__ring--a {
  animation: pb-logro-anillo var(--T) cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes pb-logro-anillo {
  0%, 55%   { transform: scale(1);   opacity: 0; }
  56%       { transform: scale(1);   opacity: .8; }
  90%, 100% { transform: scale(2.6); opacity: 0; }
}

/* ============================================================================
   GOTA · ¿Tipo de sangre?
   Se vuelve gota y regresa a círculo. Azul, no rojo: el rojo es error.
   El núcleo vive girado -45° para que la esquina recta apunte arriba; como
   un círculo no cambia al girar, sólo se nota cuando aparece la punta. Ojos
   y brillo se compensan para seguir derechos.
   ========================================================================= */
.bepp-punto[data-state="gota"] { --T: 3600ms; }
.bepp-punto[data-state="gota"] .bepp-punto__core {
  background: radial-gradient(circle at 55% 21%,
    var(--punto-hl) 0%, var(--punto-core) 48%, var(--punto-sh) 100%);
  animation: pb-gota-forma var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-gota-forma {
  0%, 15%   { border-radius: 50%;             transform: rotate(-45deg) scale(1); }
  35%, 70%  { border-radius: 50% 0 50% 50%;   transform: rotate(-45deg) scale(1.06); }
  88%, 100% { border-radius: 50%;             transform: rotate(-45deg) scale(1); }
}
.bepp-punto[data-state="gota"] .bepp-punto__eyes {
  animation: pb-gota-ojos var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-gota-ojos {
  0%, 15%   { transform: rotate(45deg) translateY(0); }
  35%, 70%  { transform: rotate(45deg) translateY(calc(var(--punto-d) * .08)); }
  88%, 100% { transform: rotate(45deg) translateY(0); }
}
.bepp-punto[data-state="gota"] .bepp-punto__ring--a {
  animation: pb-gota-anillo var(--T) cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes pb-gota-anillo {
  0%, 33%   { transform: scale(1);   opacity: 0; }
  34%       { transform: scale(1);   opacity: .75; }
  66%, 100% { transform: scale(2.6); opacity: 0; }
}

/* ============================================================================
   ESTORNUDO · Tus alergias
   Toma aire ("a… a…"), se echa para atrás y estornuda hacia adelante.
   ========================================================================= */
.bepp-punto[data-state="estornudo"] { --T: 4200ms; }
.bepp-punto[data-state="estornudo"] .bepp-punto__core {
  transform-origin: 50% 90%;
  animation: pb-estornudo var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-estornudo {
  0%, 25%   { transform: rotate(0) translate(0, 0) scale(1); }
  40%       { transform: rotate(9deg)  translate(0, calc(var(--punto-d) * -.05)) scale(1.05); }
  48%       { transform: rotate(12deg) translate(0, calc(var(--punto-d) * -.07)) scale(1.08); }
  52%       { transform: rotate(-12deg) translate(calc(var(--punto-d) * -.05), 0) scaleX(1.1) scaleY(.88); }
  58%       { transform: rotate(-6deg) translate(0, 0) scale(1); }
  64%       { transform: rotate(3deg)  translate(0, 0) scale(1); }
  70%, 100% { transform: rotate(0) translate(0, 0) scale(1); }
}
.bepp-punto[data-state="estornudo"] .bepp-punto__eyes {
  animation: pb-estornudo-mirada var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-estornudo-mirada {
  0%, 30%   { transform: translate(0, 0); }
  40%, 48%  { transform: translate(0, calc(var(--punto-d) * -.05)); }
  52%       { transform: translate(calc(var(--punto-d) * -.04), calc(var(--punto-d) * .02)); }
  66%, 100% { transform: translate(0, 0); }
}
.bepp-punto[data-state="estornudo"] .bepp-punto__eyes i {
  animation: pb-estornudo-ojos var(--T) ease-in-out infinite;
}
@keyframes pb-estornudo-ojos {
  0%, 28%   { transform: scaleY(1); }
  40%       { transform: scaleY(.55); }
  48%       { transform: scaleY(.3); }
  52%, 60%  { transform: scaleY(.08); }
  66%, 84%  { transform: scaleY(1); }
  86%       { transform: scaleY(.08); }
  88%, 100% { transform: scaleY(1); }
}
.pb-particula {
  position: absolute;
  left: calc(50% - var(--punto-d) * .42);
  top: calc(50% + var(--punto-d) * .08);
  width: calc(var(--punto-d) * var(--s));
  height: calc(var(--punto-d) * var(--s));
  border-radius: 50%;
  background: var(--punto-halo);
  opacity: 0;
  animation: pb-particula var(--T) cubic-bezier(.2, .7, .3, 1) infinite;
}
.pb-particula:nth-child(odd) { background: var(--punto-core); }
@keyframes pb-particula {
  0%, 51%   { transform: translate(0, 0) scale(.5); opacity: 0; }
  53%       { opacity: 1; }
  72%       { opacity: .9; }
  80%, 100% { transform: translate(calc(var(--punto-d) * var(--dx) * -1), calc(var(--punto-d) * var(--dy))) scale(1); opacity: 0; }
}

/* ============================================================================
   LATIDO · Enfermedades crónicas
   Late en dos tiempos (pum-pum) mientras se traza un electro abajo. El pico
   del electro llega justo cuando late.
   ========================================================================= */
.bepp-punto[data-state="latido"] { --T: 2400ms; }
.bepp-punto[data-state="latido"] .bepp-punto__core {
  animation: pb-latido var(--T) cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes pb-latido {
  0%, 16%   { transform: scale(1); }
  20%       { transform: scale(1.1); }
  24%       { transform: scale(1); }
  28%       { transform: scale(1.07); }
  34%, 100% { transform: scale(1); }
}
.bepp-punto[data-state="latido"] .bepp-punto__ring--a {
  animation: pb-latido-anillo var(--T) cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes pb-latido-anillo {
  0%, 19%   { transform: scale(1);   opacity: 0; }
  20%       { transform: scale(1);   opacity: .8; }
  55%, 100% { transform: scale(2.6); opacity: 0; }
}
.pb-ecg {
  width: calc(var(--punto-d) * 2.4);
  height: calc(var(--punto-d) * .6);
  margin-left: calc(var(--punto-d) * -1.2);
  margin-top: calc(var(--punto-d) * .78);
  fill: none;
  stroke: var(--punto-core);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  animation: pb-ecg var(--T) linear infinite;
}
@keyframes pb-ecg {
  0%        { stroke-dashoffset: 100; opacity: 1; }
  60%, 75%  { stroke-dashoffset: 0;   opacity: 1; }
  95%, 100% { stroke-dashoffset: 0;   opacity: 0; }
}

/* ============================================================================
   CÁPSULA · Tus medicamentos
   Se estira en cápsula con su línea al centro. La cara se corre a una mitad
   para no quedar partida.
   ========================================================================= */
.bepp-punto[data-state="capsula"] { --T: 3600ms; }
.bepp-punto[data-state="capsula"] .bepp-punto__core {
  border-radius: calc(var(--punto-d) / 2);
  box-shadow: 0 calc(var(--punto-d) * .2) calc(var(--punto-d) * .34) calc(var(--punto-d) * -.14)
    color-mix(in srgb, var(--punto-core) 70%, transparent);
  animation: pb-capsula var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-capsula {
  0%, 15%   { width: var(--punto-d);                 transform: rotate(0); }
  35%, 68%  { width: calc(var(--punto-d) * 1.75);    transform: rotate(-14deg); }
  85%, 100% { width: var(--punto-d);                 transform: rotate(0); }
}
.bepp-punto[data-state="capsula"] .bepp-punto__aura {
  animation: pb-capsula-sombra var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
/* La sombra normal es un círculo fijo: al estirarse la cápsula dejaría ver
   su hueco. Se apaga y la cápsula lleva su propia sombra, que sigue su forma. */
@keyframes pb-capsula-sombra {
  0%, 15%, 85%, 100% { opacity: 1; }
  28%, 72%           { opacity: 0; }
}
/* la mitad derecha, más clara, con la línea de la cápsula */
.bepp-punto[data-state="capsula"] .bepp-punto__core::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  border-radius: 0 calc(var(--punto-d) / 2) calc(var(--punto-d) / 2) 0;
  border-left: max(1.5px, calc(var(--punto-d) * .03)) solid rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .2);
  opacity: 0;
  animation: pb-capsula-mitad var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-capsula-mitad {
  0%, 22%   { opacity: 0; }
  35%, 68%  { opacity: 1; }
  80%, 100% { opacity: 0; }
}
.bepp-punto[data-state="capsula"] .bepp-punto__eyes {
  animation: pb-capsula-cara var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-capsula-cara {
  0%, 15%   { transform: translateX(0); }
  35%, 68%  { transform: translateX(calc(var(--punto-d) * -.38)); }
  85%, 100% { transform: translateX(0); }
}

/* ============================================================================
   FAMILIA · Tu familia
   Aparecen dos mini puntos y los tres rebotan en ola.
   ========================================================================= */
.bepp-punto[data-state="familia"] { --T: 3600ms; }
.pb-mini {
  --m: calc(var(--punto-d) * .44);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--m);
  height: var(--m);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--m) * 4 / 32);
  background: radial-gradient(circle at 33% 26%,
    var(--punto-hl) 0%, var(--punto-core) 48%, var(--punto-sh) 100%);
  transform-origin: 50% 100%;
}
.pb-mini i {
  display: block;
  width: calc(var(--m) * 4 / 32);
  height: calc(var(--m) * 8 / 32);
  border-radius: calc(var(--m) * 2 / 32);
  background: var(--punto-eye);
}
.pb-mini--a {
  translate: calc(-50% - var(--punto-d) * .84) calc(-50% + var(--punto-d) * .28);
  animation: pb-mini-a var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
.pb-mini--b {
  translate: calc(-50% + var(--punto-d) * .84) calc(-50% + var(--punto-d) * .28);
  animation: pb-mini-b var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-mini-a {
  0%        { transform: translateY(0) scale(0); }
  10%       { transform: translateY(0) scale(1.15); }
  16%, 26%  { transform: translateY(0) scale(1); }
  32%       { transform: translateY(calc(var(--punto-d) * -.28)) scale(1); }
  38%, 80%  { transform: translateY(0) scale(1); }
  90%, 100% { transform: translateY(0) scale(0); }
}
@keyframes pb-mini-b {
  0%, 4%    { transform: translateY(0) scale(0); }
  14%       { transform: translateY(0) scale(1.15); }
  20%, 38%  { transform: translateY(0) scale(1); }
  44%       { transform: translateY(calc(var(--punto-d) * -.28)) scale(1); }
  50%, 80%  { transform: translateY(0) scale(1); }
  90%, 100% { transform: translateY(0) scale(0); }
}
.bepp-punto[data-state="familia"] .bepp-punto__core {
  animation: pb-familia-brinco var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-familia-brinco {
  0%, 32%   { transform: translateY(0); }
  38%       { transform: translateY(calc(var(--punto-d) * -.2)); }
  44%, 100% { transform: translateY(0); }
}
.bepp-punto[data-state="familia"] .bepp-punto__eyes {
  animation: pb-familia-mirada var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-familia-mirada {
  0%, 6%    { transform: translateX(0); }
  12%, 22%  { transform: translateX(calc(var(--punto-d) * -.07)); }
  28%       { transform: translateX(0); }
  46%, 58%  { transform: translateX(calc(var(--punto-d) * .07)); }
  66%, 100% { transform: translateX(0); }
}

/* ============================================================================
   TROTA · Tu estilo de vida
   Trota en su lugar, inclinado hacia adelante, con líneas de velocidad.
   ========================================================================= */
.bepp-punto[data-state="trota"] { --T: 700ms; }
.bepp-punto[data-state="trota"] .bepp-punto__core {
  transform-origin: 50% 100%;
  animation: pb-trota var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-trota {
  0%, 100% { transform: rotate(6deg) translateY(0) scaleX(1.08) scaleY(.92); }
  20%      { transform: rotate(6deg) translateY(0) scale(1); }
  50%      { transform: rotate(6deg) translateY(calc(var(--punto-d) * -.2)) scaleX(.96) scaleY(1.05); }
  80%      { transform: rotate(6deg) translateY(0) scale(1); }
}
.bepp-punto[data-state="trota"] .bepp-punto__aura {
  animation: pb-trota-sombra var(--T) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes pb-trota-sombra {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(.78); opacity: .6; }
}
.bepp-punto[data-state="trota"] .bepp-punto__eyes {
  transform: translateX(calc(var(--punto-d) * .06));
}
.pb-linea {
  position: absolute;
  left: calc(50% - var(--punto-d) * .95);
  top: calc(50% + var(--punto-d) * var(--y));
  width: calc(var(--punto-d) * .3);
  height: calc(var(--punto-d) * .045);
  border-radius: 99px;
  background: var(--punto-halo);
  opacity: 0;
  animation: pb-linea 900ms linear infinite;
  animation-delay: var(--d);
}
@keyframes pb-linea {
  0%   { transform: translateX(0);                              opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateX(calc(var(--punto-d) * -.35));   opacity: 0; }
}

/* ============================================================================
   CRUZ · Emergencia
   Una cruz médica de línea se dibuja detrás. El punto se queda atento, con
   los ojos bien abiertos. Sigue azul: emergencia no es alerta.
   ========================================================================= */
.bepp-punto[data-state="cruz"] { --T: 3600ms; }
.bepp-punto[data-state="cruz"] .bepp-punto__extra { z-index: 0; }
.pb-cruz {
  width: calc(var(--punto-d) * 2.3);
  height: calc(var(--punto-d) * 2.3);
  margin: calc(var(--punto-d) * -1.15) 0 0 calc(var(--punto-d) * -1.15);
  fill: color-mix(in srgb, var(--punto-halo) 22%, transparent);
  fill-opacity: 0;
  stroke: var(--punto-core);
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  animation: pb-cruz var(--T) cubic-bezier(.55, .1, .35, 1) infinite;
}
@keyframes pb-cruz {
  0%        { stroke-dashoffset: 100; fill-opacity: 0; opacity: 1; }
  40%       { stroke-dashoffset: 0;   fill-opacity: 0; }
  52%, 76%  { stroke-dashoffset: 0;   fill-opacity: 1; opacity: 1; }
  92%, 100% { stroke-dashoffset: 0;   fill-opacity: 1; opacity: 0; }
}
.bepp-punto[data-state="cruz"] .bepp-punto__core {
  animation: bepp-punto-respira 2400ms cubic-bezier(.45, 0, .55, 1) infinite;
}
.bepp-punto[data-state="cruz"] .bepp-punto__eyes i {
  animation: pb-cruz-ojos var(--T) ease-in-out infinite;
}
@keyframes pb-cruz-ojos {
  0%, 36%   { transform: scaleY(1); }
  42%, 76%  { transform: scaleY(1.15); }
  80%       { transform: scaleY(.08); }
  84%, 100% { transform: scaleY(1); }
}

/* ============================================================================
   PROGRESO · Tu expediente está listo
   Un anillo se llena al 100%. Al cerrarse, el punto rebota y sonríe.
   ========================================================================= */
.bepp-punto[data-state="progreso"] { --T: 4200ms; }
.pb-progreso {
  width: calc(var(--punto-d) * 1.7);
  height: calc(var(--punto-d) * 1.7);
  margin: calc(var(--punto-d) * -.85) 0 0 calc(var(--punto-d) * -.85);
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  animation: pb-progreso-anillo var(--T) linear infinite;
}
.pb-progreso .pb-pista { stroke: color-mix(in srgb, var(--punto-core) 16%, transparent); }
.pb-progreso .pb-carga {
  stroke: var(--punto-core);
  stroke-dasharray: 100;
  transform: rotate(-90deg);
  animation: pb-progreso-carga var(--T) cubic-bezier(.3, 0, .2, 1) infinite;
}
@keyframes pb-progreso-carga {
  0%        { stroke-dashoffset: 100; }
  46%, 100% { stroke-dashoffset: 0; }
}
@keyframes pb-progreso-anillo {
  0%, 86%   { opacity: 1; }
  96%, 100% { opacity: 0; }
}
.bepp-punto[data-state="progreso"] .bepp-punto__core {
  animation: pb-progreso-pop var(--T) cubic-bezier(.34, 1.4, .64, 1) infinite;
}
@keyframes pb-progreso-pop {
  0%, 46%   { transform: scale(1); }
  51%       { transform: scale(1.1); }
  57%, 100% { transform: scale(1); }
}
/* los ojos pasan de rendija a arco (la sonrisa de éxito) cuando cierra */
.bepp-punto[data-state="progreso"] .bepp-punto__eyes i {
  border-top: 0 solid var(--punto-eye);
  animation: pb-progreso-ojos var(--T) ease-in-out infinite;
}
@keyframes pb-progreso-ojos {
  0%, 47% {
    width: var(--punto-eye-w); height: var(--punto-eye-h);
    background-color: var(--punto-eye); border-top-width: 0;
    border-radius: calc(var(--punto-eye-w) / 2);
  }
  51%, 86% {
    width: calc(var(--punto-eye-w) * 1.45); height: calc(var(--punto-eye-h) * .26);
    background-color: transparent; border-top-width: calc(var(--punto-d) * .045);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  }
  92%, 100% {
    width: var(--punto-eye-w); height: var(--punto-eye-h);
    background-color: var(--punto-eye); border-top-width: 0;
    border-radius: calc(var(--punto-eye-w) / 2);
  }
}
.bepp-punto[data-state="progreso"] .bepp-punto__ring--a {
  animation: pb-progreso-destello var(--T) cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes pb-progreso-destello {
  0%, 46%   { transform: scale(1);   opacity: 0; }
  47%       { transform: scale(1.6); opacity: .8; }
  80%, 100% { transform: scale(3);   opacity: 0; }
}

/* ============================================================================
   ENCUADRE — el centro visual de cada animación
   Cada estado ocupa un espacio distinto: el estornudo lanza partículas a la
   izquierda, el sobre vive a la derecha, el confeti sube, el electro baja.
   Si el punto se queda en el centro, la composición queda cargada a un lado.
   Aquí se corre el punto para que el CONJUNTO (punto + acompañantes, a lo
   largo de todo el ciclo) quede centrado en su espacio.

   Los valores se midieron en el laboratorio: la caja que ocupa cada
   animación en 24 cuadros de su ciclo, y el desplazamiento que centra esa
   caja. Se usa `translate` (no `transform`) para no pelear con las
   animaciones, que viven en transform.
   ========================================================================= */
.bepp-punto[data-state="curioso"]   { translate: calc(var(--punto-d) *  .06) 0; }
.bepp-punto[data-state="sobre"]     { translate: calc(var(--punto-d) * -.43) calc(var(--punto-d) *  .08); }
.bepp-punto[data-state="zen"]       { translate: 0 calc(var(--punto-d) *  .06); }
.bepp-punto[data-state="logro"]     { translate: calc(var(--punto-d) *  .08) calc(var(--punto-d) *  .56); }
.bepp-punto[data-state="estornudo"] { translate: calc(var(--punto-d) *  .47) calc(var(--punto-d) *  .06); }
.bepp-punto[data-state="latido"]    { translate: 0 calc(var(--punto-d) * -.42); }
.bepp-punto[data-state="capsula"]   { translate: calc(var(--punto-d) * -.38) 0; }
.bepp-punto[data-state="familia"]   { translate: 0 calc(var(--punto-d) *  .1); }
.bepp-punto[data-state="trota"]     { translate: calc(var(--punto-d) *  .29) calc(var(--punto-d) *  .12); }