/* Obby Lab · pantalla de carga con el logo que burbujea (login y portal). Colores en /brand/tokens.css */
.carga { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; cursor: pointer; transition: opacity .38s ease;
  background-color: var(--fondo, #EBF7F6);
  background-image: linear-gradient(color-mix(in srgb, var(--marca, #008A8B) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--marca, #008A8B) 8%, transparent) 1px, transparent 1px);
  background-size: 32px 32px; }
.carga.sale { opacity: 0; pointer-events: none; }
.carga-logo { width: min(420px, 78vw); }
.carga-saltar { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); font: 700 .9rem/1 'Figtree', system-ui, sans-serif; color: var(--tinta-2, #476060); animation: carga-aparece .3s 1s both; }

.logo-anim { --c1: var(--marca, #008A8B); --c2: var(--profundo, #005758); --c3: var(--secundario, #A479DE); --c4: var(--bandera, #F2B632); color: var(--tinta, #0E2626); display: block; width: 100%; height: auto; overflow: visible; }
.logo-anim * { transform-box: fill-box; transform-origin: 50% 50%; }
.carga .p-cuerpo { transform-origin: 50% 100%; animation: carga-cuerpo .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.carga .p-cuello { animation: carga-baja .38s .25s cubic-bezier(.3, 1.6, .5, 1) both; }
.carga .p-tapa { animation: carga-baja .38s .38s cubic-bezier(.3, 1.6, .5, 1) both; }
.carga .p-bandera { transform-origin: 0 50%; animation: carga-iza .35s .6s cubic-bezier(.3, 1.6, .5, 1) both, carga-flamea .45s 1s ease-in-out 2; }
.carga .b1 { animation: carga-burbuja .45s .72s cubic-bezier(.3, 1.8, .5, 1) both; }
.carga .b2 { animation: carga-burbuja .45s .84s cubic-bezier(.3, 1.8, .5, 1) both; }
.carga .b3 { animation: carga-burbuja .45s .96s cubic-bezier(.3, 1.8, .5, 1) both; }
.carga .letra { transform-origin: 50% 100%; animation: carga-letra .45s calc(.7s + var(--n) * 50ms) cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes carga-cuerpo { from { transform: scale(.15); opacity: 0; } 40% { opacity: 1; } to { transform: none; } }
@keyframes carga-baja { from { transform: translateY(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes carga-iza { from { transform: scaleX(0); } to { transform: none; } }
@keyframes carga-flamea { 50% { transform: skewY(-9deg) scaleX(.9); } }
@keyframes carga-burbuja { from { transform: translateY(12px) scale(0); } to { transform: none; } }
@keyframes carga-letra { from { transform: translateY(16px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes carga-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .carga { display: none; } }