/* Landing page pública */
.landing-body { background: #070a10; color: #e7ecf4; }
.lp-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
.lp-narrow { max-width: 800px; }
.lp-nav { position: sticky; top: 0; z-index: 50; background: rgba(7, 10, 16, .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.lp-nav-inner { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.lp-logo { text-decoration: none !important; }
.lp-links { display: flex; gap: 1.25rem; margin-left: auto; }
.lp-links a { color: #b9c3d4; font-size: .9rem; font-weight: 500; }
.lp-links a:hover { color: #fff; text-decoration: none; }

.lp-hero { position: relative; padding: 5rem 0 4rem; overflow: hidden; }
.lp-hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 120%;
  background: radial-gradient(700px 420px at 20% 10%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 65%),
              radial-gradient(600px 400px at 85% 30%, color-mix(in srgb, var(--brand-2) 16%, transparent), transparent 65%);
  pointer-events: none;
}
.lp-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); font-size: .8rem; font-weight: 600; color: #b9c3d4; }
.lp-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -.035em; margin: 1.1rem 0 1rem; font-weight: 850; }
.lp-grad { background: linear-gradient(90deg, var(--brand), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-lead { font-size: 1.12rem; color: #b9c3d4; max-width: 560px; }
.lp-ctas { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.75rem 0 1.25rem; }
.lp-checks { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: .88rem; color: #8592a8; }
.lp-checks li { display: inline-flex; gap: .35rem; align-items: center; }
.lp-checks .ic { color: var(--success); width: 16px; height: 16px; }

.lp-mock { border-radius: 18px; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 100px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .03); transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); }
.lp-mock-top { display: flex; align-items: center; gap: .4rem; padding: .7rem 1rem; background: #0e131d; font-size: .7rem; letter-spacing: .1em; color: #8592a8; }
.lp-mock-top span { width: 10px; height: 10px; border-radius: 50%; background: #2a3448; }
.lp-mock-top b { margin-left: auto; }
.lp-mock-screen { position: relative; height: 300px; overflow: hidden; }
.lp-mock-text { position: absolute; left: 0; right: 0; padding: 0 2rem; font: 800 1.45rem/1.5 Arial, sans-serif; color: #fff; animation: lpScroll 14s linear infinite; }
.lp-mock-text p { margin: 0 0 .5rem; }
.lp-mock-text .tp-marker { font-size: .6em; vertical-align: .2em; }
.lp-mock-line { position: absolute; left: 0; right: 0; top: 38%; border-top: 2px solid #ef4444; opacity: .7; }
.lp-mock-line::before, .lp-mock-line::after { content: ""; position: absolute; top: -9px; border: 8px solid transparent; }
.lp-mock-line::before { left: 0; border-left: 12px solid #ef4444; }
.lp-mock-line::after { right: 0; border-right: 12px solid #ef4444; }
@keyframes lpScroll { from { transform: translateY(120px); } to { transform: translateY(-160px); } }
.lp-mock-bar { display: flex; gap: 1.2rem; padding: .7rem 1rem; background: #0e131d; font-size: .68rem; letter-spacing: .08em; color: #8592a8; flex-wrap: wrap; }
.lp-mock-bar b { color: #fff; font-family: var(--mono); }

.lp-section { padding: 5rem 0; }
.lp-alt { background: #0b0f17; border-top: 1px solid rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .05); }
.lp-h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.025em; text-align: center; }
.lp-split .lp-h2, .lp-split .lp-sub { text-align: left; }
.lp-sub { text-align: center; color: #8592a8; max-width: 640px; margin: 0 auto 2.5rem; font-size: 1.05rem; }
.lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.lp-features-sm { grid-template-columns: repeat(4, 1fr); margin-top: 2rem; }
.lp-feature { padding: 1.5rem; border-radius: 16px; background: rgba(255, 255, 255, .025); border: 1px solid rgba(255, 255, 255, .07); transition: transform .25s var(--ease), border-color .25s; }
.lp-feature:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.lp-feature h3 { margin: .9rem 0 .4rem; font-size: 1.05rem; }
.lp-feature p { color: #8592a8; margin: 0; font-size: .93rem; }
.lp-feature-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); }

.lp-split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; }
.lp-split-rev { grid-template-columns: .9fr 1.1fr; }
.lp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; color: #b9c3d4; }
.lp-list li { display: flex; gap: .55rem; align-items: center; }
.lp-list .ic { color: var(--success); }
.lp-phone { justify-self: center; width: 260px; padding: 12px; border-radius: 38px; background: #1a2232; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
.lp-phone-screen { border-radius: 28px; background: #0b0f17; padding: 1.5rem 1rem; display: grid; gap: .7rem; }
.lp-phone-code { text-align: center; font: 900 1.6rem var(--mono); letter-spacing: .1em; }
.lp-phone-play { display: flex; align-items: center; justify-content: center; gap: .5rem; height: 86px; border-radius: 16px; background: #f59e0b; color: #111; font-weight: 800; }
.lp-phone-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.lp-phone-grid span { height: 52px; display: grid; place-items: center; border-radius: 12px; border: 1px solid #2f3c57; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-align: center; }

.lp-editor-mock { border-radius: 16px; background: #131a26; border: 1px solid #243047; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.lp-editor-tools { display: flex; gap: .9rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid #243047; color: #b9c3d4; font-size: .9rem; }
.lp-editor-text { padding: 1.4rem 1.5rem; font-size: 1rem; line-height: 1.7; }
.lp-editor-text h4 { font-size: .8rem; letter-spacing: .1em; color: #8592a8; margin-bottom: .6rem; }
.lp-editor-text p { margin: 0 0 .6rem; }
.lp-editor-foot { display: flex; gap: 1.2rem; flex-wrap: wrap; padding: .7rem 1rem; border-top: 1px solid #243047; font-size: .78rem; color: #8592a8; }

.lp-faq { border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; margin-bottom: .6rem; background: rgba(255, 255, 255, .02); }
.lp-faq summary { list-style: none; cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq[open] summary .ic { transform: rotate(180deg); }
.lp-faq summary .ic { transition: transform .2s; color: #8592a8; }
.lp-faq p { padding: 0 1.2rem 1.1rem; margin: 0; color: #b9c3d4; }
.lp-cta { padding: 5rem 0; text-align: center; background: radial-gradient(600px 300px at 50% 100%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%); }
.lp-cta h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.025em; }
.lp-footer { border-top: 1px solid rgba(255, 255, 255, .06); padding: 2.5rem 0; }
.lp-footer-inner { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.lp-footer .ic { width: 15px; height: 15px; }

@media (max-width: 960px) {
  .lp-links { display: none; }
  .lp-nav-inner .btn { margin-left: auto; }
  .lp-hero-grid, .lp-split, .lp-split-rev { grid-template-columns: 1fr; }
  .lp-mock { transform: none; }
  .lp-features, .lp-features-sm { grid-template-columns: 1fr 1fr; }
  .lp-hero { padding: 3rem 0; }
}
@media (max-width: 600px) {
  .lp-features, .lp-features-sm { grid-template-columns: 1fr; }
  .lp-section { padding: 3.5rem 0; }
  .lp-mock-text { font-size: 1.1rem; }
}