/* Portada pública ORBILUMA Resto — misma estética que las demás portadas ORBILUMA (base: Turnos).
   Todo bajo .lp. Para cambiar de marca alcanza con --lp-pri, --lp-acento y --lp-osc. */
body:has(.lp) { background: #fff; color-scheme: light; }
.lp {
  --lp-pri: #c010e8;          /* magenta neón (oscurecido para que el texto blanco pase 4.5:1) */
  --lp-acento: #00d1ff;       /* cian */
  --lp-osc: #0a0614;          /* negro violáceo */
  --lp-pri-hover: color-mix(in srgb, var(--lp-pri) 85%, #000);
  --lp-pri2: color-mix(in srgb, var(--lp-pri) 75%, #fff);
  --lp-pri-suave: color-mix(in srgb, var(--lp-pri) 10%, #fff);
  --lp-suave: color-mix(in srgb, var(--lp-pri) 4%, #fff);
  --lp-borde: color-mix(in srgb, var(--lp-pri) 10%, #e9e7ef);
  --lp-tinta: color-mix(in srgb, var(--lp-osc) 92%, var(--lp-pri));
  --lp-texto: color-mix(in srgb, var(--lp-tinta) 70%, #fff);
  --lp-tenue: color-mix(in srgb, var(--lp-tinta) 45%, #fff);
  --lp-verde: #14b88a;
  --lp-sombra-pri: color-mix(in srgb, var(--lp-pri) 55%, transparent);
  --lp-sombra: color-mix(in srgb, var(--lp-osc) 30%, transparent);
  --lp-osc-texto: color-mix(in srgb, var(--lp-pri) 12%, #d6d3e4);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--lp-texto); background: #fff; overflow-x: clip; line-height: 1.55; letter-spacing: normal;
  /* La portada es siempre clara: pisa las variables del tema oscuro de la app (formulario de ingreso) */
  --bg: #fff; --bg-2: #fff; --bg-3: var(--lp-suave); --line: var(--lp-borde); --line-2: var(--lp-borde);
  --ink: var(--lp-tinta); --ink-2: var(--lp-texto); --ink-3: var(--lp-tenue);
  --amber: var(--lp-pri); --amber-2: var(--lp-pri-hover); --amber-ink: #fff;
  --ok-bg: #dcf7ee; --ok: #0b8a66; --bad-bg: #ffe5e2; --bad: #b3261e; --font: inherit;
  color-scheme: light;
}
.lp h1, .lp h2, .lp h3 { color: var(--lp-tinta); letter-spacing: -0.02em; line-height: 1.12; margin: 0; }
.lp h1 { font-size: clamp(34px, 5.2vw, 60px); font-weight: 800; }
.lp h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; }
.lp h3 { font-size: 22px; font-weight: 700; }
.lp a { text-decoration: none; }
.lp-contenedor { max-width: 1200px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.lp-angosto { max-width: 820px; }
.lp-seccion { padding: 96px 0; }
.lp-suave { background: var(--lp-suave); }

/* Botones */
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 11px 22px; font: inherit; font-weight: 700; font-size: 15px; transition: transform .2s, box-shadow .2s, background .2s; border: 2px solid transparent; cursor: pointer; }
.lp-btn.grande { padding: 15px 30px; font-size: 16px; }
.lp-btn.lp-bloque { width: 100%; }
.lp-btn.primario { background: var(--lp-pri); color: #fff; box-shadow: 0 8px 24px -8px var(--lp-sombra-pri); }
.lp-btn.primario:hover { background: var(--lp-pri-hover); transform: translateY(-2px); box-shadow: 0 14px 30px -10px var(--lp-sombra-pri); }
.lp-btn.contorno { border-color: var(--lp-tinta); color: var(--lp-tinta); background: transparent; }
.lp-btn.contorno:hover { background: var(--lp-tinta); color: #fff; }
.lp-btn.blanco { background: #fff; color: var(--lp-osc); }
.lp-btn.blanco:hover { transform: translateY(-2px); }
.lp-pildora { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--lp-pri-suave); color: var(--lp-pri); font-weight: 700; font-size: 13px; margin-bottom: 18px; }
.lp-pildora.clara { background: rgba(255, 255, 255, .12); color: var(--lp-pri2); }
.lp-nota { display: block; font-size: 13px; color: var(--lp-tenue); margin-top: 14px; }
.lp-link-flecha { color: var(--lp-pri); font-weight: 700; }
.lp-link-flecha:hover { text-decoration: underline; }

/* Navegación */
.lp-nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: box-shadow .25s; }
.lp-nav.con-sombra { box-shadow: 0 1px 0 var(--lp-borde), 0 8px 24px -16px var(--lp-sombra); }
.lp-nav-in { display: flex; align-items: center; gap: 28px; height: 72px; }
.lp-marca { display: flex; align-items: center; gap: 10px; color: var(--lp-tinta); font-weight: 800; font-size: 20px; }
.lp-marca img { width: 34px; height: 34px; }
.lp-marca small { display: block; font-size: 10px; letter-spacing: .18em; color: var(--lp-tenue); font-weight: 700; margin-top: -3px; }
.lp-menu { display: flex; gap: 26px; flex: 1; }
.lp-menu a { color: var(--lp-tinta); font-weight: 600; font-size: 15px; position: relative; }
.lp-menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--lp-pri); transform: scaleX(0); transition: transform .25s; }
.lp-menu a:hover::after { transform: scaleX(1); }
.lp-nav-acc { display: flex; align-items: center; gap: 18px; }
.lp-hamb { display: none; background: none; border: 0; padding: 8px; flex-direction: column; gap: 4px; cursor: pointer; }
.lp-hamb i { display: block; width: 22px; height: 2px; background: var(--lp-tinta); border-radius: 2px; }
.lp-solo-movil { display: none; }

/* Héroe */
.lp-heroe { position: relative; padding: 72px 0 96px; text-align: center; isolation: isolate; }
.lp-heroe-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: radial-gradient(600px 300px at 15% 10%, color-mix(in srgb, var(--lp-pri) 18%, transparent), transparent 70%),
              radial-gradient(500px 280px at 85% 0%, color-mix(in srgb, var(--lp-acento) 16%, transparent), transparent 70%),
              linear-gradient(#fff, var(--lp-suave)); }
.lp-heroe-txt { max-width: 860px; margin: 0 auto; }
.lp-heroe-txt p { font-size: 19px; max-width: 640px; margin: 22px auto 0; }
.lp-subrayado { background: linear-gradient(90deg, var(--lp-pri), var(--lp-acento)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-heroe-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

#capturas { scroll-margin-top: 80px; }
.lp-pestanas { display: inline-flex; gap: 6px; margin: 56px auto 0; padding: 6px; background: #fff; border: 1px solid var(--lp-borde); border-radius: 999px; box-shadow: 0 10px 30px -18px var(--lp-sombra); max-width: 100%; overflow-x: auto; scrollbar-width: none; box-sizing: border-box; }
.lp-pestanas::-webkit-scrollbar { display: none; }
.lp-pestanas button { flex-shrink: 0; position: relative; overflow: hidden; border: 0; background: transparent; color: var(--lp-texto); font: inherit; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .25s, color .25s; }
.lp-pestanas button:hover { color: var(--lp-tinta); }
.lp-pestanas button.activa { background: var(--lp-tinta); color: #fff; }
.lp-progreso { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--lp-pri2); animation: lp-progreso 6s linear forwards; }
@keyframes lp-progreso { from { width: 0; } to { width: 100%; } }

.lp-escenario { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: center; margin-top: 40px; text-align: left; }
.lp-escenario-txt { animation: lp-entra .5s ease both; }
.lp-escenario-txt p { font-size: 17px; margin: 12px 0 18px; }
.lp-escenario-muestra { display: flex; justify-content: center; animation: lp-sube .6s cubic-bezier(.2, .8, .2, 1) both; min-height: 440px; align-items: center; min-width: 0; }
@keyframes lp-entra { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes lp-sube { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }

/* Ventana de escritorio con una pantalla real */
.lp-ventana { width: 100%; max-width: 680px; background: #fff; border-radius: 18px; border: 1px solid var(--lp-borde); box-shadow: 0 40px 80px -30px var(--lp-sombra); overflow: hidden; animation: lp-flota 6s ease-in-out infinite; }
.lp-ventana-barra { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--lp-borde); background: var(--lp-suave); }
.lp-ventana-barra i { width: 10px; height: 10px; border-radius: 50%; background: #ff6159; }
.lp-ventana-barra i:nth-child(2) { background: #ffbd2e; } .lp-ventana-barra i:nth-child(3) { background: #28c941; }
.lp-ventana-barra span { margin-left: 10px; font-size: 13px; font-weight: 700; color: var(--lp-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-ventana-cuerpo { aspect-ratio: 16 / 10; background: var(--lp-osc); }
.lp-ventana-cuerpo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
@keyframes lp-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Celular con una pantalla real */
.lp-celular { position: relative; width: 290px; height: 580px; border-radius: 44px; background: var(--lp-osc); padding: 12px; box-shadow: 0 40px 80px -30px var(--lp-sombra); animation: lp-flota 6s ease-in-out infinite; flex-shrink: 0; box-sizing: border-box; }
.lp-celular-notch { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 90px; height: 24px; border-radius: 20px; background: #000; z-index: 2; }
.lp-celular-pantalla { height: 100%; border-radius: 34px; background: #000; overflow: hidden; }
.lp-celular-pantalla img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; padding-top: 34px; box-sizing: border-box; background: #0e0f12; }

/* Rubros en marquesina */
.lp-rubros { padding: 28px 0; border-block: 1px solid var(--lp-borde); }
.lp-marquesina { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lp-marquesina > div { display: flex; gap: 56px; width: max-content; animation: lp-marq 28s linear infinite; }
.lp-marquesina span { font-size: 22px; font-weight: 800; color: color-mix(in srgb, var(--lp-pri) 25%, #c9c6d6); white-space: nowrap; }
.lp-marquesina span::before { content: '✦'; margin-right: 56px; color: var(--lp-pri2); }
@keyframes lp-marq { to { transform: translateX(-50%); } }

/* Cifras */
.lp-cifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.lp-cifras b { display: block; font-size: clamp(38px, 5vw, 56px); font-weight: 800; background: linear-gradient(90deg, var(--lp-pri), var(--lp-acento)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-cifras > div > span { font-weight: 600; }

/* Títulos de sección */
.lp-titulo { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.lp-titulo p { font-size: 18px; margin-top: 14px; }

/* Funciones */
.lp-func { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center; }
.lp-func-item { border-bottom: 1px solid var(--lp-borde); }
.lp-func-item button { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0; padding: 22px 4px; font: inherit; font-size: 20px; font-weight: 800; color: var(--lp-tinta); cursor: pointer; text-align: left; }
.lp-func-item button i { font-style: normal; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--lp-borde); transition: background .2s, color .2s; flex: none; }
.lp-func-item.abierto button i { background: var(--lp-pri); color: #fff; border-color: var(--lp-pri); }
.lp-func-item ul { list-style: none; margin: 0; padding: 0 4px; max-height: 0; overflow: hidden; transition: max-height .4s ease, padding .4s ease; }
.lp-func-item.abierto ul { max-height: 240px; padding-bottom: 20px; }
.lp-func-item li, .lp-checks li { position: relative; padding: 5px 0 5px 28px; }
.lp-func-item li::before, .lp-checks li::before { content: '✓'; position: absolute; left: 0; width: 18px; height: 18px; border-radius: 50%; background: #dcf7ee; color: #0b8a66; font-size: 11px; font-weight: 800; display: grid; place-items: center; top: 8px; }
.lp-func-muestra { display: flex; justify-content: center; animation: lp-sube .55s cubic-bezier(.2, .8, .2, 1) both; min-width: 0; }

/* Bloque oscuro (con el video de la noche de fondo) */
.lp-oscuro { background: var(--lp-osc); color: var(--lp-osc-texto); position: relative; overflow: hidden; isolation: isolate; }
.lp-oscuro-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .35; }
.lp-oscuro::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--lp-osc) 30%, color-mix(in srgb, var(--lp-osc) 60%, transparent)); }
.lp-oscuro::before { content: ''; position: absolute; width: 600px; height: 600px; right: -200px; top: -200px; z-index: -1; background: radial-gradient(circle, color-mix(in srgb, var(--lp-pri) 40%, transparent), transparent 65%); }
.lp-oscuro h2 { color: #fff; }
.lp-result { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; position: relative; }
.lp-result p { font-size: 18px; margin: 16px 0 28px; }
.lp-result-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lp-result-card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; padding: 22px; transition: transform .3s, background .3s; backdrop-filter: blur(6px); }
.lp-result-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .1); }
.lp-result-card span { font-size: 28px; } .lp-result-card b { display: block; color: #fff; font-size: 18px; margin-top: 10px; }
.lp-result-card p { font-size: 14px; margin: 6px 0 0; }

/* En el celular */
.lp-app { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lp-app p { font-size: 18px; margin: 14px 0 20px; }
.lp-app-muestra { position: relative; display: flex; justify-content: center; padding-right: 120px; }
.lp-app-flotante { position: absolute; right: 0; top: 70px; transform: scale(.82); transform-origin: top right; }
.lp-app-flotante .lp-celular { animation-delay: -3s; }
.lp-checks { list-style: none; padding: 0; margin: 0; }
.lp-checks li { padding: 6px 0 6px 28px; font-weight: 600; color: var(--lp-tinta); }

/* CTA con degradado */
.lp-cta { text-align: center; border-radius: 32px; padding: 72px 24px; color: color-mix(in srgb, var(--lp-pri) 8%, #fff);
  background: radial-gradient(500px 240px at 20% 0%, color-mix(in srgb, var(--lp-acento) 45%, transparent), transparent 70%), linear-gradient(135deg, var(--lp-pri), color-mix(in srgb, var(--lp-pri) 60%, var(--lp-osc))); }
.lp-cta h2 { color: #fff; } .lp-cta p { font-size: 18px; margin: 12px auto 28px; max-width: 620px; }

/* Preguntas frecuentes */
.lp-faq details { border: 0; border-bottom: 1px solid var(--lp-borde); border-radius: 0; padding: 0; margin: 0; background: none; box-shadow: none; }
.lp-faq details:first-child { border-top: 1px solid var(--lp-borde); }
.lp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; font-size: 18px; font-weight: 800; color: var(--lp-tinta); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--lp-borde); background: #fff; font-weight: 600; flex: none; transform: none; margin: 0; border-right: 1px solid var(--lp-borde); border-bottom: 1px solid var(--lp-borde); transition: background .2s, color .2s; }
.lp-faq details[open] summary::after { content: '−'; transform: none; background: var(--lp-pri); color: #fff; border-color: var(--lp-pri); }
.lp-faq summary:focus-visible { outline: 2px solid var(--lp-pri); outline-offset: 4px; border-radius: 8px; }
.lp-faq p { margin: 0; padding: 0 4px 20px; font-size: 16px; max-width: 70ch; }

/* Ingreso */
#ingresar { scroll-margin-top: 72px; }
#ingresar .lp-titulo { margin-bottom: 28px; }
.lp-ingreso { max-width: 440px; margin: 0 auto; background: #fff; border: 1px solid var(--lp-borde); border-radius: 24px; padding: 28px; box-shadow: 0 30px 60px -30px var(--lp-sombra); }
.lp-ingreso .tabs { margin-bottom: 18px; }
.lp-ingreso .tabs button { flex: 1; font-weight: 700; }
.lp-ingreso input { background: #fff; color: var(--lp-tinta); border-color: var(--lp-borde); }
.lp-ingreso input:focus { box-shadow: 0 0 0 4px var(--lp-pri-suave); }
.lp-ayuda { font-size: 13.5px; color: var(--lp-tenue); margin: 14px 0 0; text-align: center; }

/* Pie oscuro */
.lp-pie { background: var(--lp-osc); color: var(--lp-osc-texto); padding: 64px 0 28px; font-size: 14px; }
.lp-pie .lp-marca { color: #fff; }
.lp-pie-grilla { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.lp-pie-grilla > div { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.lp-pie-grilla b { color: #fff; } .lp-pie-grilla a { color: var(--lp-osc-texto); } .lp-pie-grilla a:hover { color: #fff; }
.lp-pie-fin { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 40px; padding-top: 22px; }
.lp-pie-fin { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lp-pie-admin { color: inherit; opacity: .35; font-size: 12px; text-decoration: none; } .lp-pie-admin:hover { opacity: .8; }

/* Aparición al hacer scroll */
.lp .aparece { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.lp .aparece.visible { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 960px) {
  .lp-seccion { padding: 72px 0; }
  .lp-escenario, .lp-func, .lp-result, .lp-app { grid-template-columns: 1fr; gap: 32px; }
  .lp-escenario-txt { text-align: center; }
  .lp-cifras { grid-template-columns: 1fr 1fr; }
  .lp-pie-grilla { grid-template-columns: 1fr 1fr; }
  .lp-app-muestra { padding-right: 0; } .lp-app-flotante { display: none; }
}
@media (max-width: 720px) {
  .lp-menu { position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; gap: 0; background: #fff; border-bottom: 1px solid var(--lp-borde); max-height: 0; overflow: hidden; transition: max-height .3s; }
  .lp-menu.abierto { max-height: 300px; }
  .lp-menu a { padding: 14px 20px; } .lp-menu a::after { display: none; }
  .lp-hamb { display: flex; } .lp-solo-movil { display: block; }
  .lp-nav-acc .lp-btn { padding: 9px 16px; font-size: 14px; }
  .lp-nav-in { justify-content: space-between; }
  .lp-pestanas { justify-content: flex-start; }
  .lp-result-grilla { grid-template-columns: 1fr; }
  .lp-escenario-muestra { min-height: 0; }
  .lp-celular { width: 250px; height: 500px; border-radius: 38px; }
  .lp-ingreso { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp *::before { animation: none !important; transition: none !important; }
  .lp .aparece { opacity: 1; transform: none; }
}

/* Lo nuevo: grilla de tarjetas con lo último que se sumó */
.lp-nuevo { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-nuevo-card { background: #fff; border: 1px solid var(--lp-borde); border-radius: 20px; padding: 22px; box-shadow: 0 10px 30px -22px var(--lp-sombra); transition: transform .3s, box-shadow .3s, border-color .3s; }
.lp-nuevo-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--lp-pri) 30%, var(--lp-borde)); box-shadow: 0 18px 40px -22px var(--lp-sombra-pri); }
.lp-nuevo-card span { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--lp-pri-suave); font-size: 22px; }
.lp-nuevo-card b { display: block; color: var(--lp-tinta); font-size: 17px; margin-top: 12px; line-height: 1.25; }
.lp-nuevo-card p { font-size: 14px; margin: 6px 0 0; color: var(--lp-texto); }
@media (max-width: 960px) { .lp-nuevo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lp-nuevo { grid-template-columns: 1fr; gap: 12px; } .lp-nuevo-card { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 16px; } .lp-nuevo-card span { grid-row: span 2; } .lp-nuevo-card b { margin-top: 0; } }