/* ░░ Guardalia landing · estilos de autor ░░ */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Nav con efecto glass al hacer scroll */
#nav.scrolled { background: rgba(255,255,255,.85); backdrop-filter: blur(12px); border-bottom: 1px solid #eef2f7; box-shadow: 0 1px 20px rgba(2,6,23,.04); }

/* Texto degradado */
.text-gradient { background: linear-gradient(120deg,#10b981,#059669 60%,#0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Blobs decorativos del hero */
.blob { position:absolute; border-radius:50%; filter: blur(60px); opacity:.55; z-index:0; pointer-events:none; }
.blob-1 { width:480px; height:480px; background:#a7f3d0; top:-160px; right:-120px; animation: float 14s ease-in-out infinite; }
.blob-2 { width:380px; height:380px; background:#bae6fd; bottom:-140px; left:-100px; animation: float 18s ease-in-out infinite reverse; }
@keyframes float { 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(20px,-30px) scale(1.08); } }

/* Botones */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; color:#fff; background:linear-gradient(120deg,#10b981,#059669); padding:.85rem 1.5rem; border-radius:9999px; box-shadow:0 10px 25px -5px rgba(16,185,129,.45); transition:.2s; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 16px 30px -8px rgba(16,185,129,.55); }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; color:#1f2937; background:#fff; border:1px solid #e2e8f0; padding:.85rem 1.5rem; border-radius:9999px; transition:.2s; }
.btn-ghost:hover { border-color:#10b981; color:#059669; }
.btn-outline { font-weight:600; color:#059669; background:#fff; border:1.5px solid #a7f3d0; padding:.8rem 1.25rem; border-radius:9999px; transition:.2s; }
.btn-outline:hover { background:#ecfdf5; border-color:#10b981; }

/* Tipografía de secciones */
.eyebrow { font-weight:700; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:#059669; margin-bottom:.75rem; }
.section-title { font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; color:#0b1220; font-size:clamp(1.8rem,3.5vw,2.6rem); line-height:1.1; letter-spacing:-.02em; }
.section-sub { color:#64748b; font-size:1.05rem; margin-top:.75rem; }
.section-title.text-left, .section-sub.text-left { text-align:left; }

/* Features */
.feature { background:#fff; border:1px solid #eef2f7; border-radius:1.5rem; padding:1.75rem; transition:.25s; }
.feature:hover { transform:translateY(-4px); box-shadow:0 24px 40px -20px rgba(2,6,23,.15); border-color:#d1fae5; }
.feature-ic { width:3rem; height:3rem; border-radius:1rem; display:grid; place-items:center; font-size:1.4rem; margin-bottom:1rem; }
.feature h3 { font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; color:#0b1220; margin-bottom:.4rem; }
.feature p { color:#64748b; font-size:.95rem; line-height:1.55; }

/* Pasos */
.step { background:#fff; border:1px solid #eef2f7; border-radius:1.5rem; padding:2rem; position:relative; }
.step-num { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:1rem; font-family:"Plus Jakarta Sans"; font-weight:800; color:#fff; background:linear-gradient(120deg,#10b981,#059669); margin-bottom:1rem; }
.step h3 { font-family:"Plus Jakarta Sans"; font-weight:700; color:#0b1220; margin-bottom:.4rem; }
.step p { color:#64748b; font-size:.95rem; line-height:1.55; }

/* Checks */
.check, li.check { display:flex; gap:.6rem; align-items:flex-start; color:#1f2937; font-size:.97rem; }
.check::before { content:"✓"; color:#059669; font-weight:800; }

/* Mockup navegador */
.mockup { background:#fff; border:1px solid #e8edf3; border-radius:1.5rem; box-shadow:0 40px 80px -30px rgba(2,6,23,.35); overflow:hidden; }
.mockup-bar { display:flex; gap:.4rem; padding:.85rem 1rem; background:#f8fafc; border-bottom:1px solid #eef2f7; }
.mockup-bar span { width:.7rem; height:.7rem; border-radius:50%; background:#e2e8f0; }
.mockup-bar span:nth-child(1){ background:#fca5a5;} .mockup-bar span:nth-child(2){ background:#fcd34d;} .mockup-bar span:nth-child(3){ background:#86efac;}
.mockup-body { padding:1.25rem; }
.stat-mini { border-radius:1rem; padding:.6rem; text-align:center; }
.stat-mini b { display:block; font-family:"Plus Jakarta Sans"; font-size:1.3rem; }
.stat-mini span { font-size:.65rem; color:#64748b; }
.row-mini { display:flex; align-items:center; gap:.6rem; background:#f8fafc; border-radius:.9rem; padding:.55rem .7rem; }
.row-mini div { flex:1; } .row-mini b { font-size:.8rem; color:#0b1220; display:block; } .row-mini i { font-size:.65rem; color:#94a3b8; font-style:normal; }
.av { width:1.9rem; height:1.9rem; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.75rem; }
.pill { font-size:.6rem; font-weight:700; padding:.2rem .5rem; border-radius:9999px; }
.pill-green { background:#d1fae5; color:#047857; } .pill-amber { background:#fef3c7; color:#b45309; }

/* Teléfono */
.phone { width:260px; margin:0 auto; background:#0b1220; border-radius:2.5rem; padding:.7rem; box-shadow:0 40px 80px -30px rgba(2,6,23,.45); position:relative; }
.phone-notch { width:90px; height:18px; background:#0b1220; border-radius:0 0 12px 12px; position:absolute; top:.7rem; left:50%; transform:translateX(-50%); z-index:2; }
.phone-screen { background:#f1f5f9; border-radius:2rem; padding:1.25rem 1rem; min-height:380px; }
.card-soft { background:#fff; border:1px solid #eef2f7; border-radius:1rem; padding:.75rem; }

/* Precios */
.price-card { position:relative; background:#fff; border:1px solid #eef2f7; border-radius:1.75rem; padding:2rem; display:flex; flex-direction:column; transition:.25s; }
.price-card:hover { transform:translateY(-4px); box-shadow:0 30px 50px -25px rgba(2,6,23,.2); }
.price-card.popular { border:2px solid #10b981; box-shadow:0 30px 60px -25px rgba(16,185,129,.4); }
.badge-pop { position:absolute; top:-.8rem; left:50%; transform:translateX(-50%); background:linear-gradient(120deg,#10b981,#059669); color:#fff; font-size:.7rem; font-weight:700; padding:.3rem .9rem; border-radius:9999px; white-space:nowrap; }
.price-name { font-family:"Plus Jakarta Sans"; font-weight:800; font-size:1.3rem; color:#0b1220; }
.price-desc { color:#64748b; font-size:.88rem; margin:.4rem 0 1rem; min-height:2.6rem; }
.price-amount { font-family:"Plus Jakarta Sans"; font-weight:800; font-size:2.5rem; color:#0b1220; }
.price-amount span { font-size:1rem; font-weight:600; color:#94a3b8; }
.price-list { margin:1.25rem 0; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.price-list li { display:flex; gap:.5rem; color:#1f2937; font-size:.92rem; }
.price-list li::before { content:"✓"; color:#059669; font-weight:800; }

/* Testimonios */
.quote { background:#fff; border:1px solid #eef2f7; border-radius:1.5rem; padding:1.75rem; }
.quote p { color:#1f2937; font-size:1rem; line-height:1.6; }
.quote p::before { content:"“"; font-family:Georgia; font-size:2.5rem; color:#a7f3d0; line-height:0; vertical-align:-.4em; margin-right:.1em; }
.quote figcaption { display:flex; align-items:center; gap:.7rem; margin-top:1.25rem; }
.quote figcaption b { color:#0b1220; font-size:.9rem; display:block; } .quote figcaption i { color:#94a3b8; font-size:.75rem; font-style:normal; }

/* FAQ */
.faq-item { background:#fff; border:1px solid #eef2f7; border-radius:1.1rem; overflow:hidden; }
.faq-q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.1rem 1.4rem; font-weight:600; color:#0b1220; text-align:left; cursor:pointer; font-family:"Plus Jakarta Sans"; }
.faq-q span { color:#10b981; font-size:1.4rem; font-weight:400; transition:transform .25s; flex-shrink:0; }
.faq-item.open .faq-q span { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p { padding:0 1.4rem 1.2rem; color:#64748b; font-size:.95rem; line-height:1.6; }

/* CTA final */
.cta-card { background:linear-gradient(130deg,#047857,#10b981 55%,#0ea5e9); border-radius:2rem; overflow:hidden; box-shadow:0 40px 80px -30px rgba(5,150,105,.5); }

/* Formulario */
.lbl { display:block; font-size:.78rem; font-weight:600; color:#475569; margin-bottom:.3rem; }
.inp { width:100%; border:1px solid #e2e8f0; border-radius:.85rem; padding:.7rem .9rem; font-size:.9rem; outline:none; transition:.15s; }
.inp:focus { border-color:#10b981; box-shadow:0 0 0 3px #d1fae5; }

/* Footer */
.footer-h { color:#fff; font-weight:700; font-family:"Plus Jakarta Sans"; margin-bottom:.8rem; font-size:.9rem; }
.footer-l { display:block; font-size:.88rem; color:rgba(255,255,255,.6); padding:.25rem 0; transition:.15s; }
.footer-l:hover { color:#6ee7b7; }

/* Animación reveal al hacer scroll */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; transition-delay:var(--d,0s); }
.reveal.in { opacity:1; transform:none; }

@media (max-width:640px){ .blob{ opacity:.4; } }