/* ═══════════════════════════════════════════════════ lp-nutrisurcoapp.min.css — Landing de venta NutrisurcoApp (/nutrisurcoapp/) Complementa main.min.css y lp-berries.min.css (reutiliza sus variables de color y sus clases de sección/tarjetas: lp-etapas-grid, lp-etapa-card) ═══════════════════════════════════════════════════ */ /* ── Botones de pago con logo ────────────────────── */ .lp-btn-pay-logo{background:#fff;border:1px solid var(--campo-b);border-radius:8px;padding:12px 20px;display:flex;align-items:center;justify-content:center;width:100%;text-decoration:none;transition:border-color .2s,transform .15s,box-shadow .2s} .lp-btn-pay-logo:hover{border-color:var(--verde);transform:translateY(-1px);box-shadow:0 4px 14px rgba(12,89,19,.12)} .lp-btn-pay-logo img,.lp-btn-pay-logo svg{height:22px;width:auto;display:block} .lp-btn-pay-logo.pay-mercadopago img,.lp-btn-pay-logo.pay-mercadopago svg{height:26px} .lp-btn-pay-logo.pay-stripe img,.lp-btn-pay-logo.pay-stripe svg{height:26px} .lp-btn-pay-logo .pay-label{font-size:.78rem;font-weight:700;color:var(--gris-texto);margin-right:8px;white-space:nowrap} /* ── CTA lima (demo / pruébala gratis) ───────────── */ .app-demo-cta{background:var(--lima);color:var(--verde);font-weight:800;padding:16px 34px;border-radius:10px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;font-size:1.02rem;box-shadow:0 4px 22px rgba(177,232,40,.35);transition:transform .15s} .app-demo-cta:hover{transform:translateY(-2px)} /* ── Precios ──────────────────────────────────────── */ .pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem;max-width:1240px;margin:0 auto} /* v20.0.55: botones de pago OCULTOS hasta que existan los Payment Links reales (v1.8-T2) — quitar esta regla al restaurarlos. Compra por WhatsApp. */ .pricing-pay-options{display:none} .lp-btn-wa-buy{background:#25D366;color:#fff;font-weight:800;padding:13px 18px;border-radius:10px;text-decoration:none;display:block;text-align:center;font-size:.95rem;box-shadow:0 4px 16px rgba(37,211,102,.3);transition:transform .15s} .lp-btn-wa-buy:hover{transform:translateY(-2px)} .pricing-card{background:#fff;border:1px solid var(--campo-b);border-radius:16px;padding:2rem 1.8rem;display:flex;flex-direction:column;gap:1.1rem;position:relative} .pricing-card-featured{border:2px solid var(--verde);box-shadow:0 10px 32px rgba(12,89,19,.14)} .pricing-badge-top{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--verde);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.4px;padding:5px 14px;border-radius:20px;white-space:nowrap} .pricing-plan-name{font-size:1.05rem;font-weight:800;color:var(--verde);text-transform:uppercase;letter-spacing:.3px} .pricing-plan-for{font-size:.85rem;color:var(--gris-texto)} .price-row{display:flex;align-items:baseline;gap:.4rem;margin-top:.2rem} .price-tag{font-size:2.1rem;font-weight:900;color:var(--verde)} .price-period{font-size:.85rem;color:var(--gris-texto);font-weight:600} .price-intro-note{font-size:.76rem;font-weight:700;color:var(--cafe);background:var(--crema);border-radius:6px;padding:5px 10px;display:inline-block;width:fit-content} .pricing-feature-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;flex-grow:1} .pricing-feature-list li{font-size:.88rem;color:var(--gris-texto);padding-left:1.4rem;position:relative} .pricing-feature-list li::before{content:"✓";position:absolute;left:0;color:var(--verde);font-weight:800} .pricing-pay-options{display:flex;flex-direction:column;gap:.6rem;margin-top:.3rem} .pricing-guarantee{text-align:center;max-width:640px;margin:1.6rem auto 0;font-size:.82rem;color:var(--gris-texto)} @media (max-width:640px){.price-tag{font-size:1.8rem}} /* ── 4 pasos: reutiliza .lp-etapas-grid/.lp-etapa-card tal cual (mismo componente que "Protocolo por etapa" en alomyxa-para-fresa/); solo agrega el modificador de 4 columnas en desktop ───────────────── */ .app-pasos-grid.lp-etapas-grid{grid-template-columns:repeat(4,1fr)} @media (max-width:900px){.app-pasos-grid.lp-etapas-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.app-pasos-grid.lp-etapas-grid{grid-template-columns:1fr}} /* ── Tira de confianza (demo) ─────────────────────── */ .app-trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:1.5rem 0 0} .app-trust-strip .lp-trust-badge{background:rgba(12,89,19,.06);border:1px solid rgba(12,89,19,.18);color:var(--verde)} /* ── Marca "NutrisurcoApp": N y A mayúscula siempre. .nav-links a y .mobile-link fuerzan text-transform:uppercase para TODO el menú (por diseño, igual que "ALOMYXA"/"BIOMECANISMOS"); esta clase solo desactiva esa transformación en el enlace de marca ──────────────────────── */ .brand-case{text-transform:none!important} .lp-hero-para-fresa{text-transform:none} /* Nota: .footer-heading NO se sobreescribe — en producción real (nutrisurco.com/alomyxa-para-fresa/) esos encabezados heredan var(--negro) del body en las 4 columnas del footer; esta página se deja igual, para no ser la única distinta del resto del sitio. */ /* v20.0.57: logotipo del hero (sustituye al texto "Nutrisurco.App"). Se define AQUÍ y no se delega a lp-berries.min.css porque esta landing carga las hojas globales desde https://nutrisurco.com (la versión publicada), y esta hoja propia va por ruta relativa: así el tamaño siempre viaja con la página. */ .lp-hero .lp-hero-logo{display:block!important;height:auto!important;width:100%!important;max-width:340px!important;margin:0 0 1.1rem!important} @media (max-width:768px){.lp-hero .lp-hero-logo{max-width:250px!important}} /* v20.0.60: los CTA "Probar gratis" pasaron de