/* Landing general de Lauar Tech: se apoya en estilos.css (los mismos de la landing de Lauar Fitness). */

/* Vitrina de apps en la portada */
.vitrina { position: relative; display: grid; gap: 1rem; justify-items: center; padding: 2rem 0; }
.vitrina .halo { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ficha {
  display: flex; align-items: center; gap: 1rem; width: min(100%, 400px);
  padding: 1rem 1.15rem; border-radius: 22px; text-decoration: none; text-align: left;
  background: rgba(20, 14, 39, 0.75); border: 1px solid var(--borde); backdrop-filter: blur(14px);
}
.ficha strong { display: block; font-size: 1.05rem; }
.ficha small { color: var(--gris); font-size: 0.85rem; }
.ficha-activa {
  border-color: var(--borde-fuerte);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(152, 85, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.2s, border-color 0.2s;
  animation: flotar-ficha 7s ease-in-out infinite;
}
.ficha-activa:hover { transform: translateY(-3px); border-color: var(--violeta); }
@keyframes flotar-ficha { 50% { translate: 0 -8px; } }
.ficha-proxima { opacity: 0.6; border-style: dashed; }
.ficha-estado { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--verde); white-space: nowrap; }

/* Caja de vidrio violeta para los íconos de cada app */
.ficha-icono {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px;
  color: var(--lavanda);
  background: linear-gradient(160deg, rgba(152, 85, 255, 0.28), rgba(100, 36, 217, 0.12));
  border: 1px solid rgba(215, 196, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 18px rgba(100, 36, 217, 0.25);
}
.ficha-icono .ic { width: 24px; height: 24px; stroke-width: 1.6; }

/* Tarjetas de apps */
.apps { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; }
.app-tarjeta {
  display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: 28px;
  background: var(--superficie); border: 1px solid var(--borde-fuerte);
}
.app-proxima { border-style: dashed; border-color: var(--borde); }
.app-cabeza { display: flex; align-items: center; gap: 1rem; }
.app-cabeza h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 0.35rem; }
.app-tarjeta .lista { margin-top: 0; }
.app-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 0.5rem; }
.app-pie strong { display: block; font-size: 1.6rem; font-weight: 800; }
.app-pie .boton { gap: 0.5rem; }
.pildora-verde { color: var(--verde); background: rgba(79, 209, 161, 0.1); border-color: rgba(79, 209, 161, 0.3); }

.acciones-centro { justify-content: center; margin-bottom: 0; }
.acciones-centro .boton { gap: 0.5rem; }

@media (max-width: 980px) {
  .apps { grid-template-columns: 1fr; }
  .vitrina { padding-top: 0.5rem; }
}
@media (max-width: 640px) {
  .ficha-estado { display: none; }
  .app-pie .boton, .acciones-centro .boton { width: 100%; justify-content: center; }
  .acciones-centro .boton { font-size: 0.95rem; }
}