/* Efectos compartidos de las landings de apps (mismo estilo que la home de Lauar Tech).
   Se suma después de estilos.css; efectos.js agrega las clases. Copia idéntica en cada landing-<app>/.
   Respeta "reducir movimiento" del sistema. */

/* Fondo: aurora violeta que se mueve lento */
.ef-aurora { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.ef-aurora span {
  position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: 0.32;
  background: radial-gradient(circle, var(--violeta) 0%, transparent 65%);
  animation: ef-aurora 26s ease-in-out infinite alternate;
}
.ef-aurora span:nth-child(1) { top: -30vmax; left: -15vmax; }
.ef-aurora span:nth-child(2) { top: 10vh; right: -30vmax; background: radial-gradient(circle, var(--violeta-intenso) 0%, transparent 65%); animation-duration: 32s; animation-delay: -8s; }
.ef-aurora span:nth-child(3) { bottom: -40vmax; left: 20vw; opacity: 0.16; animation-duration: 38s; animation-delay: -16s; }
@keyframes ef-aurora {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(8vw, 6vh) scale(1.15); }
  100% { transform: translate(-6vw, 10vh) scale(0.95); }
}

/* Barra de progreso de lectura */
.ef-progreso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--violeta-intenso), var(--violeta), var(--lavanda));
  box-shadow: 0 0 12px rgba(152, 85, 255, 0.8);
}

/* Entrada escalonada de la portada */
.js .ef-entrada { opacity: 0; transform: translateY(18px); animation: ef-entrar 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation-delay: calc(var(--d, 0) * 0.12s + 0.1s); }
@keyframes ef-entrar { to { opacity: 1; transform: none; } }

/* Título con brillo que recorre el degradado */
.portada h1 .degradado { background-size: 200% 100%; animation: ef-tornasol 6s ease-in-out infinite; }
@keyframes ef-tornasol { 50% { background-position: 100% 0; } }

/* Botón principal con brillo */
.ef-brillo { position: relative; overflow: hidden; }
.ef-brillo::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: ef-brillo 3.6s ease-in-out infinite 1.5s;
}
@keyframes ef-brillo { 0%, 60% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(220%) skewX(-20deg); } }

/* Brillo que sigue al mouse en tarjetas */
.ef-foco { position: relative; isolation: isolate; }
.ef-foco::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity 0.3s; pointer-events: none;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(152, 85, 255, 0.18), transparent 60%);
}
.ef-foco:hover::before { opacity: 1; }
.caja { transition: transform 0.3s ease, border-color 0.3s; }
.caja.ef-foco:hover { transform: translateY(-4px); border-color: rgba(152, 85, 255, 0.5); }

/* Revelado con retraso propio (escalonado en grillas) */
.js .revelar { transition-delay: var(--retraso, 0s); }

/* Profundidad en la escena de la portada: el celu y las tarjetas siguen al mouse */
.escena { perspective: 1200px; }
.escena .telefono, .escena .flotante, .escena .ef-cel { translate: var(--px, 0) var(--py, 0); transition: translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Barritas que se llenan y gráfico que se dibuja al aparecer */
.js .revelar .barrita i { transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s; }
.js .revelar:not(.visto) .barrita i { width: 0 !important; }
.js .mini-grafico path:last-child { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.8s ease 0.3s; }
.js .visto .mini-grafico path:last-child { stroke-dashoffset: 0; }

/* Tarjeta de precio con borde luminoso que gira */
.precio-tarjeta { position: relative; isolation: isolate; overflow: hidden; }
.precio-tarjeta::after {
  content: ''; position: absolute; inset: -60%; z-index: -2; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(152, 85, 255, 0.35) 50deg, transparent 110deg, transparent 360deg);
  animation: ef-girar 9s linear infinite;
}
.precio-tarjeta::before {
  content: ''; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(170deg, rgba(30, 20, 56, 0.97), rgba(10, 7, 22, 0.98));
}
@keyframes ef-girar { to { transform: rotate(360deg); } }

/* Sellos de confianza debajo del botón de compra */
.ef-confianza { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.1rem; font-size: 0.85rem; color: var(--gris); }
.ef-confianza li { display: inline-flex; align-items: center; gap: 0.35rem; }
.ef-confianza .ic { color: var(--verde); stroke-width: 2.4; }

/* Cierre con halo que gira */
.cierre-caja { position: relative; overflow: hidden; isolation: isolate; }
.cierre-caja::after {
  content: ''; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(152, 85, 255, 0.22) 60deg, transparent 120deg, transparent 360deg);
  animation: ef-girar 12s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ef-aurora span, .ef-brillo::after, .precio-tarjeta::after, .cierre-caja::after, .portada h1 .degradado { animation: none !important; }
  .js .ef-entrada { opacity: 1; transform: none; animation: none; }
  .escena .telefono, .escena .flotante { translate: none; }
  .caja.ef-foco:hover { transform: none; }
}

/* ====================== Rediseño v2 de las landings de apps ====================== */

/* Título con frases que rotan */
.ef-rotador { display: grid; }
.ef-rotador > span {
  grid-area: 1 / 1; padding-bottom: 0.06em; opacity: 0; transform: translateY(0.45em); filter: blur(8px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s ease;
}
.ef-rotador > span.activa { opacity: 1; transform: none; filter: none; }
.ef-rotador > span.saliendo { opacity: 0; transform: translateY(-0.45em); filter: blur(8px); }
.portada h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); letter-spacing: -0.035em; }

/* Portada: dos celulares con capturas reales */
.ef-escena { height: 620px; }
.ef-cel {
  position: absolute; top: 50%; left: 50%; width: 262px; aspect-ratio: 780 / 1688; padding: 9px; border-radius: 44px;
  background: linear-gradient(160deg, #2a2047, #0f0b1f);
  border: 1px solid rgba(215, 196, 255, 0.28);
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.65), 0 0 0 8px rgba(152, 85, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: var(--pos); animation: ef-flotar 7s ease-in-out infinite;
}
.ef-cel img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 35px; display: block; }
.ef-cel::after { /* reflejo de vidrio */
  content: ''; position: absolute; inset: 9px; border-radius: 35px; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.14) 0%, transparent 32%);
}
.ef-cel-frente { --pos: translate(-72%, -50%) rotate(-5deg); z-index: 2; }
.ef-cel-atras { --pos: translate(-12%, -46%) rotate(7deg) scale(0.86); z-index: 1; animation-delay: -3.5s; filter: brightness(0.75) saturate(0.9); }
@keyframes ef-flotar { 50% { transform: var(--pos) translateY(-12px); } }
.ef-escena .flotante { z-index: 3; }

/* Mirá la app por dentro: pestañas + celular con la pantalla real */
.ef-vitrina { display: grid; grid-template-columns: 1fr 320px; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.ef-vitrina-tabs { display: grid; gap: 0.6rem; }
.ef-tab {
  position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 0.9rem; width: 100%; text-align: left; cursor: pointer;
  padding: 1rem 1.1rem; border-radius: 20px; border: 1px solid var(--borde); background: rgba(255, 255, 255, 0.02); color: var(--blanco); font: inherit;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.ef-tab:hover { border-color: var(--borde-fuerte); }
.ef-tab .icono { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; color: var(--lavanda); background: rgba(152, 85, 255, 0.12); border: 1px solid var(--borde); transition: background 0.3s; }
.ef-tab .icono .ic { width: 22px; height: 22px; stroke-width: 1.7; }
.ef-tab strong { display: block; font-size: 1.05rem; }
.ef-tab span.txt { display: block; color: var(--gris); font-size: 0.93rem; margin-top: 0.2rem; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.4s ease; }
.ef-tab.activa { background: linear-gradient(135deg, rgba(152, 85, 255, 0.2), rgba(100, 36, 217, 0.08)); border-color: rgba(152, 85, 255, 0.55); transform: translateX(6px); }
.ef-tab.activa .icono { background: linear-gradient(135deg, #a96bff, var(--violeta-intenso)); color: #fff; }
.ef-tab.activa span.txt { max-height: 6em; opacity: 1; }
.ef-tab i.carga { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--violeta), var(--lavanda)); }
.ef-tab.activa i.carga { animation: ef-carga var(--dur, 5s) linear forwards; }
.ef-vitrina.pausa .ef-tab.activa i.carga { animation-play-state: paused; }
@keyframes ef-carga { to { transform: scaleX(1); } }
.ef-vitrina-cel { position: relative; width: 100%; aspect-ratio: 780 / 1688; padding: 10px; border-radius: 48px; justify-self: center;
  background: linear-gradient(160deg, #2a2047, #0f0b1f); border: 1px solid rgba(215, 196, 255, 0.3);
  box-shadow: 0 50px 110px rgba(0, 0, 0, 0.6), 0 0 80px rgba(152, 85, 255, 0.3);
}
.ef-vitrina-cel::before { content: ''; position: absolute; inset: -18%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(152, 85, 255, 0.4), transparent 65%); filter: blur(30px); }
.ef-vitrina-cel img {
  position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: cover; object-position: top; border-radius: 38px;
  opacity: 0; transform: scale(1.04); transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ef-vitrina-cel img.activa { opacity: 1; transform: none; }

/* El problema, más grande */
.problema h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.12; }
.problema .resalte { background: linear-gradient(100deg, var(--lavanda), var(--violeta)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Comparativa con "vs" en el medio */
.comparativa { position: relative; }
.comparativa::after {
  content: 'vs'; position: absolute; top: 50%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  font-weight: 800; color: var(--lavanda); background: var(--negro-2); border: 1px solid var(--borde-fuerte); box-shadow: 0 0 30px rgba(152, 85, 255, 0.35);
}
.col-con { box-shadow: 0 30px 70px rgba(100, 36, 217, 0.25); }

/* Pasos con línea que se llena */
.pasos { position: relative; }
.pasos::after {
  content: ''; position: absolute; top: 49px; left: 17%; right: 17%; height: 2px; z-index: -1; border-radius: 2px;
  background: linear-gradient(90deg, var(--violeta), var(--lavanda)); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s;
}
.pasos.visto::after { transform: scaleX(1); }
.pasos li { text-align: center; justify-items: center; background: transparent; border-color: transparent; }
.pasos li::before { width: 52px; height: 52px; border-radius: 16px; font-size: 1.15rem; box-shadow: 0 0 0 8px var(--negro), 0 12px 30px rgba(152, 85, 255, 0.45); }

/* Cierre con avatar */
.ef-cierre-avatar { margin: 0 auto 1.2rem; width: 72px; height: 72px; border-radius: 22px; box-shadow: 0 0 50px rgba(152, 85, 255, 0.6); animation: ef-flotar-simple 6s ease-in-out infinite; }
@keyframes ef-flotar-simple { 50% { transform: translateY(-8px); } }

@media (max-width: 980px) {
  .ef-vitrina { grid-template-columns: 1fr; }
  .ef-vitrina-cel { width: min(260px, 64%); order: -1; }
  .ef-tab.activa { transform: none; }
}
@media (max-width: 640px) {
  .ef-escena { height: 520px; }
  .ef-cel { width: 210px; }
  .ef-cel-frente { --pos: translate(-66%, -50%) rotate(-5deg); }
  .ef-cel-atras { --pos: translate(-20%, -46%) rotate(7deg) scale(0.84); }
  .comparativa::after { display: none; }
  .pasos::after { display: none; }
  .ef-vitrina-tabs { grid-auto-flow: row; }
}
@media (prefers-reduced-motion: reduce) {
  .ef-cel, .ef-cierre-avatar { animation: none !important; }
  .ef-rotador > span { transition: none; }
  .ef-tab.activa i.carga { animation: none; transform: scaleX(1); }
  .pasos::after { transform: scaleX(1); transition: none; }
}