/* Landing PRO minimal-profesional */
:root { --bg:#0b1020; --fg:#e6eaf2; --mut:#a7b0c4; --accent:#22c55e; }
*{box-sizing:border-box}
html,body{height:100%}
body.pro{
  margin:0;
  background:
    /* Grid pattern profesional */
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    /* Gradientes modernos estilo app profesional */
    radial-gradient(ellipse at 25% 15%, rgba(59, 130, 246, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse at 75% 85%, rgba(34, 197, 94, 0.1) 0%, transparent 65%),
    radial-gradient(ellipse at 50% 50%, rgba(168, 85, 247, 0.06) 0%, transparent 75%),
    /* Fondo base profesional */
    radial-gradient(1200px 800px at 70% 10%, #0f1428, #090d1a);
  background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  color:var(--fg);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;
  position:relative;
  overflow-x:hidden;
}
.container{max-width:1180px;margin:0 auto;padding:0 16px}

.nav{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent)}
.nav .container{display:flex;align-items:center;justify-content:space-between;padding:14px 16px}
.brand{font-weight:900;letter-spacing:.04em}
.cta-wa{display:inline-block;background:var(--accent);color:#0b1410;text-decoration:none;border-radius:12px;padding:10px 14px;font-weight:900}
.cta{display:inline-block;background:#3b82f6;color:#041223;text-decoration:none;border-radius:12px;padding:10px 14px;font-weight:900}
.ghost{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--fg)}

.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:28px 0 18px}
.copy h1{margin:0 0 10px;font-size:clamp(28px,6vmin,52px)}
.copy h1 span{background:var(--accent);color:#0b1410;border-radius:10px;padding:2px 8px}
.copy p{margin:0 0 12px;color:var(--mut);max-width:60ch}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.points{list-style:none;padding:6px 0 0;margin:0;display:flex;gap:12px;flex-wrap:wrap;color:#9fb0cf}
.points li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:6px 10px}

.phones{position:relative;height:380px}
.phone{position:absolute;width:220px;height:440px;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 8px rgba(255,255,255,.04) inset}
.phone img{width:100%;height:100%;object-fit:cover}
.p1{left:6%;top:0;transform:rotate(-8deg)}
.p2{left:36%;top:40px;transform:rotate(10deg)}
.p3{left:66%;top:-10px;transform:rotate(-4deg)}

.logos{padding:6px 0 10px}
.rail{display:flex;gap:40px;align-items:center;overflow:hidden;padding:12px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.rail img{height:46px;filter:grayscale(1) contrast(1.1);opacity:.85}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:18px 0}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.card h3{margin:0 0 8px}
.card ul{margin:0;padding-left:18px;color:var(--mut)}

.screens{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:12px 0 24px}
.screens figure{border-radius:16px;overflow:hidden;background:#0b1220;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.screens img{width:100%;height:220px;object-fit:cover;display:block}

.plan-wrap{display:grid;place-items:center;margin:10px 0 28px}
.plan{width:min(560px,92vw);background:#0c1226;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.plan header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.plan .price{background:var(--accent);color:#0b1410;border-radius:10px;padding:4px 10px;font-weight:900}

.foot{padding:16px 0;color:#94a3b8;text-align:center;border-top:1px solid rgba(255,255,255,.06)}

/* Efectos de partículas flotantes profesionales */
body.pro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(1px 1px at 25px 35px, rgba(59, 130, 246, 0.25), transparent),
    radial-gradient(1px 1px at 50px 80px, rgba(34, 197, 94, 0.2), transparent),
    radial-gradient(1px 1px at 100px 45px, rgba(168, 85, 247, 0.3), transparent),
    radial-gradient(1px 1px at 150px 90px, rgba(255, 59, 48, 0.2), transparent),
    radial-gradient(1px 1px at 200px 25px, rgba(59, 130, 246, 0.15), transparent);
  background-repeat: repeat;
  background-size: 250px 250px;
  animation: floatParticlesPro 25s linear infinite;
  pointer-events: none;
  z-index: 1;
}

/* Elementos geométricos profesionales */
body.pro::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    /* Círculos profesionales */
    radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(34, 197, 94, 0.06) 0%, transparent 60%),
    /* Formas geométricas sutiles */
    linear-gradient(45deg, transparent 40%, rgba(168, 85, 247, 0.03) 40%, rgba(168, 85, 247, 0.03) 60%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, rgba(255, 59, 48, 0.02) 40%, rgba(255, 59, 48, 0.02) 60%, transparent 60%);
  background-size: 400px 400px, 350px 350px, 200px 200px, 180px 180px;
  animation: geometricFloatPro 30s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Efectos de brillo en las tarjetas */
.card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s ease;
}

.card:hover::before {
  left: 100%;
}

/* Efectos de brillo en los teléfonos */
.phone {
  position: absolute;
  width: 220px;
  height: 440px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 8px rgba(255,255,255,.04) inset;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.phone:hover {
  transform: translateY(-5px) rotate(2deg);
  box-shadow: 0 32px 80px rgba(0,0,0,.6), 0 0 0 8px rgba(255,255,255,.06) inset;
}

/* Animaciones profesionales */
@keyframes floatParticlesPro {
  0% { transform: translateY(0px) translateX(0px); }
  25% { transform: translateY(-15px) translateX(8px); }
  50% { transform: translateY(-8px) translateX(-4px); }
  75% { transform: translateY(-20px) translateX(12px); }
  100% { transform: translateY(0px) translateX(0px); }
}

@keyframes geometricFloatPro {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg);
    opacity: 0.4;
  }
  33% { 
    transform: translateY(-10px) rotate(0.5deg);
    opacity: 0.6;
  }
  66% { 
    transform: translateY(-5px) rotate(-0.5deg);
    opacity: 0.5;
  }
}

/* Asegurar que el contenido esté por encima */
.container, .nav, .hero, .phones, .logos, .grid, .screens, .plan-wrap, .foot {
  position: relative;
  z-index: 2;
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  body.pro::before, body.pro::after { animation: none; }
  .card::before { transition: none; }
  .phone { transition: none; }
}

@media (max-width:980px){.hero{grid-template-columns:1fr}.phones{height:420px}}