/* ========================================================================== MP · SISTEMA DE DISEÑO PARA LANDING PAGES (compartido por TODAS las LPs) -------------------------------------------------------------------------- Se escribe UNA sola vez. Cada LP (template-lp-*.php) carga este archivo y compone su contenido con estas clases .mp-*. NO crear un CSS por página. Todo va namespaced bajo .mp-lp para no filtrar estilos al resto del theme. ========================================================================== */ :root{ --mp-navy:#0d2c4e; --mp-navy-dark:#082343; --mp-green:#147d69; --mp-green-dark:#0d5a4b; --mp-green-light:#a8e6d5; --mp-green-pale:#e8f5f0; --mp-text:#2b3648; --mp-muted:#5a677a; --mp-border:#e5eaf0; --mp-line:#eef1f6; --mp-bg:#fafbfc; --mp-white:#ffffff; --mp-r-sm:8px; --mp-r-md:12px; --mp-r-lg:20px; --mp-shadow:0 12px 40px -12px rgba(13,44,78,.15); --mp-shadow-sm:0 4px 14px rgba(13,44,78,.08); } /* Reglas base envueltas en :where() → especificidad 0, para que NUNCA pisen a las clases de componentes (.mp-btn, .wa-float, etc.). */ :where(.mp-lp) *{box-sizing:border-box} .mp-lp{font-family:'DM Sans',system-ui,-apple-system,sans-serif;color:var(--mp-text);background:var(--mp-white);line-height:1.65;-webkit-font-smoothing:antialiased} :where(.mp-lp) h1,:where(.mp-lp) h2,:where(.mp-lp) h3,:where(.mp-lp) h4{font-family:'DM Sans',sans-serif;font-weight:800;color:var(--mp-navy);letter-spacing:-0.015em;line-height:1.2;margin:0 0 .5em} :where(.mp-lp) h1{font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.15} :where(.mp-lp) h2{font-size:clamp(1.55rem,2.8vw,2rem);line-height:1.2} :where(.mp-lp) h3{font-size:1.2rem;font-weight:700} :where(.mp-lp) h4{font-size:1rem;font-weight:700} :where(.mp-lp) p{margin:0 0 1em} :where(.mp-lp) a{color:var(--mp-green);text-decoration:none} :where(.mp-lp) em{font-family:inherit;font-style:normal;color:var(--mp-green);font-weight:800} :where(.mp-lp) img{max-width:100%;display:block} .mp-lp .mh-container{max-width:1200px;margin:0 auto;padding:0 20px} /* ===== HEADER ===== */ .mp-header{background:#fff;border-bottom:1px solid var(--mp-border);padding:14px 0;position:sticky;top:0;z-index:100} .mp-header-in{display:flex;align-items:center;justify-content:space-between;gap:20px} .mp-logo img{height:36px;width:auto} .mp-nav{display:flex;gap:24px;font-size:.9rem;font-weight:500} .mp-nav a{color:var(--mp-text)} .mp-nav a:hover{color:var(--mp-green)} .mp-header-cta{display:flex;gap:8px;align-items:center} .mp-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:99px;font-weight:600;font-size:.92rem;transition:.2s;cursor:pointer;border:0;text-decoration:none} .mp-btn-wa{background:#25D366;color:#fff} .mp-btn-wa:hover{background:#128C7E} .mp-btn-green{background:var(--mp-green);color:#fff} .mp-btn-green:hover{background:var(--mp-green-dark)} .mp-btn-outline{background:transparent;color:var(--mp-navy);border:1.5px solid var(--mp-border)} .mp-btn-outline:hover{border-color:var(--mp-navy)} .mp-btn-lg{padding:16px 28px;font-size:1rem} /* ===== BREADCRUMB ===== */ .mp-breadcrumb{background:var(--mp-bg);padding:12px 0;font-size:.82rem;color:var(--mp-muted);border-bottom:1px solid var(--mp-border)} .mp-breadcrumb a{color:var(--mp-muted)} .mp-breadcrumb a:hover{color:var(--mp-green)} .mp-breadcrumb b{color:var(--mp-navy)} .mp-breadcrumb .sep{margin:0 8px} /* ===== HERO ===== */ .mp-hero{background:linear-gradient(180deg,#fff 0%,var(--mp-green-pale) 100%);padding:44px 0 32px} .mp-hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:44px;align-items:start} .mp-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;background:rgba(20,125,105,.10);color:var(--mp-green);font-size:.82rem;font-weight:700;margin-bottom:16px;text-transform:uppercase;letter-spacing:.06em} .mp-hero-badge:before{content:"●";color:var(--mp-green);animation:pulse 1.5s infinite} @keyframes pulse{50%{opacity:.4}} .mp-hero h1{margin-bottom:12px} .mp-hero-lead{font-size:1.08rem;color:var(--mp-muted);max-width:600px;margin-bottom:22px} .mp-hero-answer{background:#fff;border-left:4px solid var(--mp-green);padding:20px 22px;border-radius:0 var(--mp-r-md) var(--mp-r-md) 0;box-shadow:var(--mp-shadow-sm);margin-bottom:24px;font-size:1rem;line-height:1.75} .mp-hero-answer b{color:var(--mp-navy)} .mp-hero-answer .price-big{color:var(--mp-green);font-weight:800;font-size:1.05em} .mp-hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px} .mp-hero-trust{display:flex;gap:20px;flex-wrap:wrap;padding-top:16px;border-top:1px dashed var(--mp-border);color:var(--mp-muted);font-size:.87rem} .mp-hero-trust b{color:var(--mp-navy)} .mp-hero-trust .stars{color:var(--mp-green)} /* Hero side: Precio card */ .mp-price-card{background:#fff;border-radius:var(--mp-r-lg);padding:26px;box-shadow:var(--mp-shadow);border:1px solid var(--mp-border);position:sticky;top:88px} .mp-price-card .tag{display:inline-block;background:var(--mp-green);color:#fff;padding:4px 12px;border-radius:6px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px} .mp-price-card h3{font-size:1.15rem;margin-bottom:10px;color:var(--mp-navy)} .mp-price-card .desde{color:var(--mp-muted);font-size:.82rem;margin-bottom:4px} .mp-price-card .amount{font-size:2.3rem;font-weight:800;color:var(--mp-green);line-height:1;margin-bottom:4px} .mp-price-card .amount small{font-size:.8rem;color:var(--mp-muted);font-weight:400} .mp-price-card .cur{color:var(--mp-muted);font-size:.78rem;margin-bottom:16px} .mp-price-card ul{list-style:none;padding:0;margin:0 0 18px;font-size:.87rem} .mp-price-card ul li{padding:4px 0;display:flex;align-items:flex-start;gap:8px} .mp-price-card ul li:before{content:"✓";color:var(--mp-green);font-weight:700;flex-shrink:0} .mp-price-card .btn-full{width:100%;justify-content:center} /* ===== SECTION BASE ===== */ .mp-section{padding:56px 0;border-bottom:1px solid var(--mp-line)} .mp-section-grey{background:var(--mp-bg)} .mp-section-navy{background:var(--mp-navy);color:#fff} .mp-section-navy h2, .mp-section-navy h3, .mp-section-navy h4{color:#fff} .mp-section-navy em{color:var(--mp-green-light)} .mp-section-navy .mp-section-sub{color:rgba(255,255,255,.72)} .mp-section-head{max-width:820px;margin-bottom:36px} .mp-section-tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.14em;color:var(--mp-green);text-transform:uppercase;margin-bottom:8px} .mp-section-tag-white{color:var(--mp-green-light)} .mp-section-sub{color:var(--mp-muted);font-size:1rem;max-width:640px} /* ===== TABLA PRECIOS ===== */ .mp-price-table{background:#fff;border:1px solid var(--mp-border);border-radius:var(--mp-r-lg);overflow:hidden;box-shadow:var(--mp-shadow-sm);margin-bottom:24px} .mp-price-table table{width:100%;border-collapse:collapse;font-size:.92rem} .mp-price-table thead{background:var(--mp-navy);color:#fff} .mp-price-table th{padding:16px 18px;text-align:left;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em} .mp-price-table td{padding:16px 18px;border-top:1px solid var(--mp-border);vertical-align:top} .mp-price-table tbody tr:hover{background:var(--mp-bg)} .mp-price-table .row-highlight{background:rgba(20,125,105,.05)} .mp-price-table .price-cell{color:var(--mp-green);font-weight:800;font-size:1.05rem;white-space:nowrap} .mp-price-table .badge-pop{display:inline-block;background:var(--mp-green);color:#fff;padding:2px 8px;border-radius:5px;font-size:.68rem;font-weight:700;margin-left:6px;text-transform:uppercase;letter-spacing:.04em} .mp-price-table small{color:var(--mp-muted);font-size:.78rem} /* ===== BLOQUE "QUÉ INCLUYE" (Information Gain) ===== */ .mp-includes{background:linear-gradient(135deg,var(--mp-green-pale) 0%,#fff 100%);border-radius:var(--mp-r-lg);padding:36px;border:1px solid var(--mp-border);margin-top:32px} .mp-includes h3{color:var(--mp-navy);margin-bottom:20px} .mp-includes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .mp-inc-item{background:#fff;border-radius:var(--mp-r-md);padding:16px 18px;display:flex;gap:12px;align-items:flex-start;border:1px solid var(--mp-border)} .mp-inc-item .icon{width:32px;height:32px;border-radius:8px;background:var(--mp-green);color:#fff;display:grid;place-items:center;font-size:.85rem;flex-shrink:0} .mp-inc-item strong{color:var(--mp-navy);display:block;margin-bottom:2px;font-size:.95rem} .mp-inc-item span{color:var(--mp-muted);font-size:.85rem;line-height:1.5} /* ===== GRID DE FACTORES / TARJETAS NUMERADAS ===== */ .mp-factors-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .mp-factor-card{background:#fff;border:1px solid var(--mp-border);border-radius:var(--mp-r-md);padding:22px;display:flex;gap:16px;align-items:flex-start;transition:.2s} .mp-factor-card:hover{border-color:var(--mp-green);transform:translateY(-2px);box-shadow:var(--mp-shadow-sm)} .mp-factor-card .num{font-size:1.6rem;font-weight:800;color:var(--mp-green);line-height:1;flex-shrink:0;font-family:'DM Sans',sans-serif} .mp-factor-card strong{color:var(--mp-navy);display:block;margin-bottom:4px} .mp-factor-card span{color:var(--mp-muted);font-size:.9rem;line-height:1.6} /* ===== TARJETAS EN COLUMNAS (ej. niveles K1-K4) ===== */ .mp-k-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:16px} .mp-k-card{background:#fff;border:1.5px solid var(--mp-border);border-radius:var(--mp-r-md);padding:20px;text-align:center;transition:.2s;position:relative} .mp-k-card:hover{border-color:var(--mp-green);transform:translateY(-3px);box-shadow:var(--mp-shadow-sm)} .mp-k-card .lvl{display:inline-block;font-family:'DM Sans',sans-serif;font-weight:800;font-size:1.5rem;color:#fff;background:var(--mp-navy);width:52px;height:52px;border-radius:50%;line-height:52px;margin-bottom:12px} .mp-k-card.k3 .lvl, .mp-k-card.k4 .lvl{background:var(--mp-green)} .mp-k-card h4{font-size:.95rem;margin-bottom:6px;color:var(--mp-navy)} .mp-k-card p{font-size:.82rem;color:var(--mp-muted);margin-bottom:12px;min-height:64px;line-height:1.5} .mp-k-card .k-price{color:var(--mp-green);font-weight:800;font-size:1.05rem;padding-top:10px;border-top:1px dashed var(--mp-border)} .mp-k-card .k-price small{color:var(--mp-muted);font-size:.72rem;font-weight:400;display:block} /* ===== BLOQUE FINANCIAMIENTO / DESTACADO NAVY ===== */ .mp-fin-box{background:linear-gradient(135deg,var(--mp-navy) 0%,var(--mp-navy-dark) 100%);color:#fff;border-radius:var(--mp-r-lg);padding:40px;position:relative;overflow:hidden} .mp-fin-box:before{content:"";position:absolute;top:-30px;right:-30px;width:280px;height:280px;background:radial-gradient(circle,rgba(20,125,105,.35),transparent 70%);border-radius:50%} .mp-fin-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:36px;align-items:center;position:relative} .mp-fin-grid h3{color:#fff;font-size:1.6rem;margin-bottom:12px} .mp-fin-grid p{color:rgba(255,255,255,.85);font-size:.95rem;margin-bottom:20px} .mp-fin-plans{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} .mp-fin-plan{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--mp-r-md);padding:20px;text-align:center} .mp-fin-plan .plazo{font-size:.72rem;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px} .mp-fin-plan .cuota{font-size:1.65rem;font-weight:800;color:var(--mp-green-light);line-height:1;margin-bottom:4px} .mp-fin-plan .cuota small{font-size:.7rem;color:rgba(255,255,255,.7);font-weight:400} .mp-fin-plan .info{font-size:.78rem;color:rgba(255,255,255,.65);margin-top:6px} /* ===== TABLA COMPARATIVA (2 columnas vs) ===== */ .mp-compare-table{background:#fff;border:1px solid var(--mp-border);border-radius:var(--mp-r-lg);overflow:hidden;box-shadow:var(--mp-shadow-sm)} .mp-compare-table table{width:100%;border-collapse:collapse;font-size:.9rem} .mp-compare-table thead{background:var(--mp-navy);color:#fff} .mp-compare-table th{padding:18px;text-align:left;font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em} .mp-compare-table th:nth-child(3){background:var(--mp-green)} .mp-compare-table td{padding:14px 18px;border-top:1px solid var(--mp-border);vertical-align:top} .mp-compare-table td:first-child{background:var(--mp-bg);font-weight:700;color:var(--mp-navy)} .mp-tag-good{color:var(--mp-green);font-weight:700} .mp-tag-good:before{content:"✓ "} .mp-tag-bad{color:#c33;font-weight:600} .mp-tag-bad:before{content:"✕ "} .mp-tag-med{color:var(--mp-muted);font-weight:600} .mp-tag-med:before{content:"◐ "} /* ===== TABLA TCO / MULTICOLUMNA NUMÉRICA ===== */ .mp-tco-table{background:#fff;border-radius:var(--mp-r-lg);overflow:hidden;border:1px solid var(--mp-border);box-shadow:var(--mp-shadow-sm)} .mp-tco-table table{width:100%;border-collapse:collapse;font-size:.9rem} .mp-tco-table thead{background:var(--mp-navy);color:#fff} .mp-tco-table th{padding:14px 18px;text-align:left;font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.05em} .mp-tco-table th:not(:first-child){text-align:right} .mp-tco-table td{padding:12px 18px;border-top:1px solid var(--mp-border)} .mp-tco-table td:not(:first-child){text-align:right;font-family:'DM Sans',sans-serif} .mp-tco-table td:first-child{background:var(--mp-bg);color:var(--mp-navy);font-weight:600} .mp-tco-table tr.total{background:rgba(20,125,105,.06);font-weight:800;color:var(--mp-navy)} .mp-tco-table tr.total td{border-top:2px solid var(--mp-green)} /* ===== GRID GEO / CIUDADES ===== */ .mp-geo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .mp-geo-item{background:#fff;border:1px solid var(--mp-border);border-radius:var(--mp-r-md);padding:20px 16px;text-align:center;transition:.15s} .mp-geo-item:hover{border-color:var(--mp-green);transform:translateY(-3px);box-shadow:var(--mp-shadow-sm)} .mp-geo-item h4{color:var(--mp-navy);margin-bottom:8px;font-size:1rem} .mp-geo-item .g-price{color:var(--mp-green);font-weight:800;font-size:1.15rem;margin-bottom:4px} .mp-geo-item .g-info{font-size:.78rem;color:var(--mp-muted)} /* ===== FAQ (acordeón accesible) ===== */ .mp-faq-wrap{max-width:920px} .mp-faq-item{background:#fff;border:1px solid var(--mp-border);border-radius:var(--mp-r-md);margin-bottom:10px;overflow:hidden} /* .mp-faq-q es