/*
 * LA CARGA DE FOM: la misma animación en la web y en la app.
 *
 * 1. Las tres flechas entran una tras otra desde la izquierda (0,00–0,80 s).
 * 2. Se escribe «FOM», letra a letra (0,60–1,10 s), y aparece el lema.
 * 3. Mientras carga, una luz recorre las flechas hacia adelante y una barra
 *    fina va y viene debajo: la marca «avanza», que es lo que dice su forma.
 *
 * Está en /public y se enlaza desde index.html para que se vea desde el
 * primer cuadro, antes de que cargue React; el componente CargaFom.jsx usa
 * las mismas clases.
 */
.carga-fom {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: radial-gradient(60% 45% at 50% 46%, rgba(52, 155, 250, 0.16), rgba(52, 155, 250, 0) 70%), #0a0d12;
  color: #f7f8fa;
  font-family: 'Spline Sans', system-ui, sans-serif;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.carga-fom.oculta { opacity: 0; visibility: hidden; pointer-events: none; }
.carga-fom-marca { display: flex; align-items: center; gap: 22px; }
.carga-fom-flechas { width: 104px; height: 82px; overflow: visible; }
.carga-fom-flechas path {
  fill: #349bfa;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation:
    carga-fom-entra 0.56s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
    carga-fom-avanza 1.5s ease-in-out 1.2s infinite;
}
.carga-fom-flechas path:nth-child(1) { animation-delay: 0s, 1.2s; }
.carga-fom-flechas path:nth-child(2) { animation-delay: 0.14s, 1.38s; }
.carga-fom-flechas path:nth-child(3) { animation-delay: 0.28s, 1.56s; }
.carga-fom-nombre { display: flex; font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: 0.02em; }
.carga-fom-nombre span { display: inline-block; opacity: 0; animation: carga-fom-letra 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.carga-fom-nombre span:nth-child(1) { animation-delay: 0.6s; }
.carga-fom-nombre span:nth-child(2) { animation-delay: 0.7s; }
.carga-fom-nombre span:nth-child(3) { animation-delay: 0.8s; }
.carga-fom-lema {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #abb3bf;
  opacity: 0;
  animation: carga-fom-lema 0.7s ease 1s forwards;
}
.carga-fom-barra { position: relative; width: 168px; height: 3px; border-radius: 3px; overflow: hidden; background: rgba(171, 179, 191, 0.14); opacity: 0; animation: carga-fom-lema 0.5s ease 1.1s forwards; }
.carga-fom-barra::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(59, 213, 255, 0), #3bd5ff, #349bfa);
  animation: carga-fom-barra 1.4s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.carga-fom-estado { margin: 0; font-size: 12px; color: #8c97a7; opacity: 0; animation: carga-fom-lema 0.5s ease 1.2s forwards; }

@keyframes carga-fom-entra {
  from { opacity: 0; transform: translateX(-22px) scale(0.9); }
  to { opacity: 1; transform: none; }
}
/* La luz que corre hacia adelante: cada flecha se apaga un poco y se enciende empujada. */
@keyframes carga-fom-avanza {
  0%, 100% { opacity: 1; transform: none; }
  35% { opacity: 0.38; transform: translateX(-3px); }
  60% { opacity: 1; transform: translateX(4px); }
}
@keyframes carga-fom-letra {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes carga-fom-lema {
  from { opacity: 0; letter-spacing: 0.4em; }
  to { opacity: 1; }
}
@keyframes carga-fom-barra {
  from { left: -40%; }
  to { left: 100%; }
}

@media (max-width: 480px) {
  .carga-fom-flechas { width: 78px; height: 62px; }
  .carga-fom-nombre { font-size: 48px; }
  .carga-fom-marca { gap: 16px; }
}
/* Con «reducir movimiento», la marca se queda quieta y solo la barra dice que carga. */
@media (prefers-reduced-motion: reduce) {
  .carga-fom-flechas path, .carga-fom-nombre span, .carga-fom-lema, .carga-fom-barra, .carga-fom-estado { animation: none; opacity: 1; }
  .carga-fom-barra::after { animation-duration: 2.4s; }
}