/* ONE · movimiento y acceso (24/10/2026). Sin build: se enlaza desde layouts/app, layouts/acceso y auth/entrar.
   Reglas: solo transform/opacity, respeta prefers-reduced-motion, nada de cristal ni bordes degradados. */
:root { --om-ease: cubic-bezier(.22, 1, .36, 1); }

/* ── Acceso (entrar, trabaja con nosotros, desbloquear IP) ── */
.oa-aside { isolation: isolate; }
.oa-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0; filter: saturate(.75) brightness(.6); transform: scale(1.04); transition: opacity 1.8s ease; }
.oa-video.on { opacity: 1; }
.oa-shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 30% 60%, rgba(11,11,13,.35), rgba(11,11,13,.92) 100%), linear-gradient(0deg, #0B0B0D 0%, rgba(11,11,13,.2) 45%); }
.oa-w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(8px); animation: oa-w .9s var(--om-ease) both; animation-delay: calc(.15s + var(--i, 0) * 70ms); }
@keyframes oa-w { to { opacity: 1; transform: none; filter: blur(0); } }
.oa-apps { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; }
.oa-app { display: grid; place-items: center; opacity: 0; transform: translateY(28px) scale(.6) rotate(-14deg); animation: oa-app .8s var(--om-ease) both; animation-delay: calc(.7s + var(--i, 0) * 80ms); }
@keyframes oa-app { to { opacity: 1; transform: none; } }
.oa-app .xo-icon { filter: drop-shadow(0 14px 24px rgba(0,0,0,.55)); }
.oa-apps-txt { margin-top: .875rem; font-size: 13px; color: rgba(255,255,255,.55); opacity: 0; animation: oa-w .8s var(--om-ease) 1.3s both; }
.oa-main > div > * { animation: oa-in .7s var(--om-ease) both; }
.oa-main > div > *:nth-child(1) { animation-delay: .1s } .oa-main > div > *:nth-child(2) { animation-delay: .18s } .oa-main > div > *:nth-child(3) { animation-delay: .26s } .oa-main > div > *:nth-child(4) { animation-delay: .34s } .oa-main > div > *:nth-child(n+5) { animation-delay: .42s }
@keyframes oa-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.oa-main section > * { animation: oa-in .6s var(--om-ease) both; }
.oa-main section > *:nth-child(2) { animation-delay: .06s } .oa-main section > *:nth-child(3) { animation-delay: .12s } .oa-main section > *:nth-child(4) { animation-delay: .18s } .oa-main section > *:nth-child(n+5) { animation-delay: .24s }
/* Móvil y tablet: banda oscura arriba con el logo y la frase; el formulario entra debajo en una tarjeta */
.oa-mtop { position: relative; margin: -2.5rem -1.25rem 1.75rem; padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem 1.5rem; background: #0B0B0D; color: #fff; border-radius: 0 0 28px 28px; overflow: hidden; }
@media (min-width: 640px) { .oa-mtop { margin: -2.5rem -2.5rem 1.75rem; padding-left: 2.5rem; padding-right: 2.5rem; } }
.oa-mtop::after { content: ''; position: absolute; left: 50%; bottom: -60%; width: 120%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(138,94,244,.35), rgba(211,69,251,.12) 45%, transparent 70%); filter: blur(30px); pointer-events: none; }
.oa-mtop > * { position: relative; }
.oa-mclaim { margin-top: 1.5rem; font-size: 26px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.oa-mclaim small { display: block; margin-top: .5rem; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.6); letter-spacing: 0; line-height: 1.4; }
.oa-mapps { display: flex; gap: .5rem; margin-top: 1.125rem; }
.oa-mapps .oa-app { animation-delay: calc(.4s + var(--i, 0) * 60ms); }
.oa-mapps .xo-icon { width: 2rem; height: 2rem; }
@media (min-width: 1024px) { .oa-mtop { display: none; } }

/* ── App: entrada escalonada del contenido ── */
@media (prefers-reduced-motion: no-preference) {
  html:not(.o-con-splash) main#contenido > * { animation: oa-in .55s var(--om-ease) both; }
  main#contenido > *:nth-child(2) { animation-delay: .05s } main#contenido > *:nth-child(3) { animation-delay: .1s } main#contenido > *:nth-child(4) { animation-delay: .15s } main#contenido > *:nth-child(5) { animation-delay: .2s } main#contenido > *:nth-child(n+6) { animation-delay: .25s }
  /* Tarjetas y filas: aparecen al entrar en pantalla (one-motion.js pone .om-visto) */
  main#contenido .o-tarjeta:not(.om-visto), main#contenido .xi-hoy-tarjeta:not(.om-visto) { opacity: 0; transform: translateY(16px); }
  main#contenido .o-tarjeta, main#contenido .xi-hoy-tarjeta { transition: opacity .6s var(--om-ease), transform .6s var(--om-ease), background-color .18s, box-shadow .2s; }
  main#contenido .om-visto { opacity: 1; transform: none; }
  main#contenido .o-tarjeta .o-fila { animation: oa-in .5s var(--om-ease) both; }
  main#contenido .o-tarjeta .o-fila:nth-child(2) { animation-delay: .04s } main#contenido .o-tarjeta .o-fila:nth-child(3) { animation-delay: .08s } main#contenido .o-tarjeta .o-fila:nth-child(4) { animation-delay: .12s } main#contenido .o-tarjeta .o-fila:nth-child(n+5) { animation-delay: .16s }
}
/* Cabecera móvil que se recoge al hacer scroll */
header.o-vt-menu { transition: padding .35s var(--om-ease), box-shadow .35s; }
body.om-desplazado header.o-vt-menu { padding-top: .375rem !important; padding-bottom: .375rem !important; box-shadow: 0 1px 0 var(--o-linea-suave), 0 10px 30px -18px rgba(0,0,0,.25); }
/* Respuesta al pulsar (táctil): botones, tarjetas enlazadas y filas */
@media (hover: none) {
  .o-btn:active, a.o-tarjeta:active, .o-fila:active, .xi-hoy-tarjeta .o-btn:active, .o-nav-enlace:active { transform: scale(.97); transition-duration: .08s; }
}
.o-btn { will-change: transform; }
/* Estados vacíos: anillo degradado suave tras el icono y entrada */
.o-vacio { animation: oa-in .6s var(--om-ease) both; }
.o-vacio-icono { position: relative; }
.o-vacio-icono::before { content: ''; position: absolute; inset: -14px; border-radius: 50%; background: conic-gradient(from 180deg, #F57EA6, #D345FB, #8A5EF4, #3AA6C6, #F57EA6); opacity: .14; filter: blur(10px); z-index: -1; }
/* Cifras grandes: sin saltos de ancho mientras cuentan */
.xi-hoy-valor, .o-cifra { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .oa-w, .oa-app, .oa-main > div > *, .oa-main section > *, .o-vacio, main#contenido > * { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } .oa-video { display: none; } }

/* Portada en móvil: las tarjetas de la cuadrícula no pueden crecer con el texto sin salto (truncate necesita min-width 0 en el hijo de la rejilla) */
main#contenido .xi-cuadricula > *, main#contenido .o-tarjeta { min-width: 0; max-width: 100%; }

/* Cabecera móvil: en pantallas estrechas la etiqueta Beta y los botones de 40 px no cabían (la campana quedaba fuera, scrollWidth 443) */
@media (max-width: 430px) {
  header.o-vt-menu { gap: 6px; }
  header.o-vt-menu .o-beta { display: none; }
  header.o-vt-menu .o-btn-icono, header.o-vt-menu .o-feedback-boton { width: 36px; height: 36px; min-width: 36px; padding: 0; }
}
