/* ═══════════════════════════════════════════════════════════════ ACADEMIA MMB — Bloque "Detalles del curso" (Fase 4: contenido que vende) ─────────────────────────────────────────────────────────────── Componentes para responder rápido a las 6 preguntas del alumno (¿es para mí? ¿qué aprendo? ¿cómo me ayuda? ¿cuánto cuesta? ¿qué incluye? ¿cómo empiezo?). Todo con datos REALES puestos en el HTML de cada landing; esta hoja solo aporta la presentación. - Se apoya en los tokens y componentes ya existentes (mmb-tokens.css / mmb-components.css). Usa rem y var(--mmb-radius-*) para heredar el escalado y la redondez de cada persona (Fase 3) sin reglas extra. - Acento por página vía --acc (triplete RGB en ), igual patrón que .mmb-border-glow. - Enlazar DESPUÉS de mmb-personas.css. ═══════════════════════════════════════════════════════════════ */ .mmb-venta{ } /* ───────── Cabecera de sección reutilizable ───────── */ .mmb-venta-head{ text-align:center; max-width:44rem; margin:0 auto 2.5rem; } .mmb-venta-head h2{ font-size:clamp(1.6rem, 1.1rem + 2vw, 2.1rem); font-weight:700; color:var(--mmb-ink); margin:.4rem 0 .5rem; } .mmb-venta-head p{ color:var(--mmb-ink-dim); line-height:1.6; } /* ───────── Ficha rápida (precio / duración / módulos / acceso …) ───────── */ .mmb-ficha{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:1px; background:var(--mmb-line); border:1px solid var(--mmb-glass-border); border-radius:var(--mmb-radius-md); overflow:hidden; max-width:960px; margin:0 auto; } .mmb-ficha-item{ background:var(--mmb-glass-bg); backdrop-filter:blur(var(--mmb-glass-blur)); -webkit-backdrop-filter:blur(var(--mmb-glass-blur)); padding:1.25rem 1rem; text-align:center; } .mmb-ficha-item i{ font-size:1.15rem; color:rgba(var(--acc,80,230,255),1); margin-bottom:.5rem; } .mmb-ficha-item .mmb-ficha-label{ display:block; font-family:'JetBrains Mono', monospace; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mmb-ink-faint); margin-bottom:.25rem; } .mmb-ficha-item .mmb-ficha-value{ display:block; font-family:'Space Grotesk', sans-serif; font-weight:600; color:var(--mmb-ink); font-size:1rem; line-height:1.25; } .mmb-ficha-item .mmb-ficha-value small{ font-weight:500; color:var(--mmb-ink-dim); font-size:.75rem; } /* ───────── Rejilla "Qué incluye" ───────── */ .mmb-incluye-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1rem; max-width:960px; margin:0 auto; } .mmb-incluye-card{ display:flex; gap:.85rem; align-items:flex-start; padding:1.1rem 1.15rem; border-radius:var(--mmb-radius-sm); background:var(--mmb-glass-bg); border:1px solid var(--mmb-glass-border); } .mmb-incluye-card i{ flex:none; width:2.1rem; height:2.1rem; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:.9rem; color:rgba(var(--acc,80,230,255),1); background:rgba(var(--acc,80,230,255),.14); border:1px solid rgba(var(--acc,80,230,255),.28); } .mmb-incluye-card h4{ font-family:'Space Grotesk', sans-serif; font-weight:600; color:var(--mmb-ink); font-size:.98rem; margin:0 0 .2rem; } .mmb-incluye-card p{ color:var(--mmb-ink-dim); font-size:.83rem; line-height:1.5; margin:0; } /* ───────── Requisitos + Acceso/soporte (dos columnas) ───────── */ .mmb-venta-cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.25rem; max-width:960px; margin:0 auto; } .mmb-venta-panel{ padding:1.5rem 1.5rem 1.35rem; border-radius:var(--mmb-radius-md); background:var(--mmb-glass-bg); border:1px solid var(--mmb-glass-border); } .mmb-venta-panel > h3{ display:flex; align-items:center; gap:.55rem; font-family:'Space Grotesk', sans-serif; font-weight:700; color:var(--mmb-ink); font-size:1.05rem; margin:0 0 1rem; } .mmb-venta-panel > h3 i{ color:rgba(var(--acc,80,230,255),1); } .mmb-venta-panel ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; } .mmb-venta-panel li{ display:flex; gap:.65rem; align-items:flex-start; color:var(--mmb-ink-dim); font-size:.9rem; line-height:1.5; } .mmb-venta-panel li i{ flex:none; margin-top:.15rem; color:rgba(var(--acc,80,230,255),1); font-size:.85rem; } .mmb-venta-panel li strong{ color:var(--mmb-ink); font-weight:600; } .mmb-venta-note{ margin-top:1rem; font-size:.78rem; color:var(--mmb-ink-faint); } .mmb-venta-note a{ color:rgba(var(--acc,80,230,255),1); text-decoration:underline; } /* ───────── El certificado (explicación + ejemplo) ───────── */ .mmb-cert{ display:grid; grid-template-columns:1.1fr .9fr; gap:1.5rem; align-items:center; max-width:960px; margin:0 auto; padding:1.75rem; border-radius:var(--mmb-radius-lg); background:var(--mmb-glass-bg); border:1px solid var(--mmb-glass-border); } @media (max-width:720px){ .mmb-cert{ grid-template-columns:1fr; } } .mmb-cert h3{ font-family:'Space Grotesk', sans-serif; font-weight:700; color:var(--mmb-ink); font-size:1.15rem; margin:0 0 .6rem; } .mmb-cert p{ color:var(--mmb-ink-dim); font-size:.9rem; line-height:1.6; margin:0 0 .9rem; } /* Maqueta de diploma (representativa, no una imagen real) */ .mmb-cert-mock{ position:relative; border-radius:var(--mmb-radius-md); border:1px solid rgba(var(--acc,80,230,255),.35); background: radial-gradient(circle at 80% 12%, rgba(var(--acc,80,230,255),.12), transparent 55%), var(--mmb-bg-soft); padding:1.15rem 1.25rem 1.25rem; overflow:hidden; } .mmb-cert-mock .mmb-cert-seal{ position:absolute; top:.9rem; right:.9rem; width:2.4rem; height:2.4rem; border-radius:50%; display:flex; align-items:center; justify-content:center; color:rgba(var(--acc,80,230,255),1); border:2px solid rgba(var(--acc,80,230,255),.5); background:rgba(var(--acc,80,230,255),.1); } .mmb-cert-mock .mmb-cert-kicker{ font-family:'JetBrains Mono', monospace; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--mmb-ink-faint); } .mmb-cert-mock .mmb-cert-name{ font-family:'Space Grotesk', sans-serif; color:var(--mmb-ink); font-weight:700; font-size:1.05rem; margin:.35rem 0 .1rem; } .mmb-cert-mock .mmb-cert-course{ color:var(--mmb-ink-dim); font-size:.8rem; } .mmb-cert-mock .mmb-cert-code{ margin-top:.85rem; font-family:'JetBrains Mono', monospace; font-size:.66rem; color:rgba(var(--acc,80,230,255),1); border-top:1px dashed var(--mmb-line); padding-top:.6rem; } /* ───────── "Así es por dentro" — maquetas honestas (no capturas) ───────── */ .mmb-dentro-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.15rem; max-width:1040px; margin:0 auto; } .mmb-dentro-card{ border-radius:var(--mmb-radius-md); border:1px solid var(--mmb-glass-border); background:var(--mmb-glass-bg); overflow:hidden; } .mmb-dentro-view{ padding:1.1rem 1.15rem; min-height:150px; background: linear-gradient(180deg, rgba(var(--acc,80,230,255),.06), transparent 60%), var(--mmb-bg-soft); border-bottom:1px solid var(--mmb-line); } .mmb-dentro-cap{ padding:.85rem 1.15rem 1rem; } .mmb-dentro-cap h4{ font-family:'Space Grotesk', sans-serif; font-weight:600; color:var(--mmb-ink); font-size:.95rem; margin:0 0 .2rem; } .mmb-dentro-cap p{ color:var(--mmb-ink-dim); font-size:.8rem; line-height:1.45; margin:0; } /* Etiqueta honesta: recordar que es una representación */ .mmb-dentro-tag{ display:inline-block; font-family:'JetBrains Mono', monospace; font-size:.55rem; letter-spacing:.08em; text-transform:uppercase; color:var(--mmb-ink-faint); border:1px solid var(--mmb-line); border-radius:999px; padding:2px 8px; margin-bottom:.55rem; } /* Piezas de las maquetas */ .mmb-mock-row{ display:flex; align-items:center; gap:.5rem; margin-bottom:.6rem; } .mmb-mock-dot{ width:.6rem; height:.6rem; border-radius:50%; background:rgba(var(--acc,80,230,255),.5); flex:none; } .mmb-mock-label{ font-size:.72rem; color:var(--mmb-ink-dim); font-family:'JetBrains Mono', monospace; } .mmb-mock-bar{ height:.5rem; border-radius:999px; background:var(--mmb-line); overflow:hidden; } .mmb-mock-bar > span{ display:block; height:100%; width:60%; border-radius:999px; background:linear-gradient(90deg, rgba(var(--acc,80,230,255),.9), rgba(var(--acc,80,230,255),.5)); } .mmb-mock-line{ height:.55rem; border-radius:4px; background:var(--mmb-line); margin-bottom:.45rem; } .mmb-mock-line.short{ width:55%; } .mmb-mock-chip{ display:inline-flex; align-items:center; gap:.35rem; font-size:.7rem; color:rgba(var(--acc,80,230,255),1); background:rgba(var(--acc,80,230,255),.12); border:1px solid rgba(var(--acc,80,230,255),.28); border-radius:999px; padding:.2rem .55rem; } .mmb-mock-feedback{ margin-top:.6rem; padding:.6rem .7rem; border-radius:.6rem; background:rgba(var(--acc,80,230,255),.08); border:1px solid rgba(var(--acc,80,230,255),.2); font-size:.72rem; color:var(--mmb-ink-dim); line-height:1.4; } /* ───────── Ajustes por persona (Fase 3) ───────── La mayoría se hereda de los tokens; aquí solo lo específico. */ :root[data-mmb-persona="mayores"] .mmb-ficha-item .mmb-ficha-value{ font-size:1.1rem; } :root[data-mmb-persona="mayores"] .mmb-incluye-card p, :root[data-mmb-persona="mayores"] .mmb-venta-panel li{ font-size:.95rem; } :root[data-mmb-persona="oposiciones"] .mmb-dentro-tag{ opacity:.85; } @media (prefers-reduced-motion: reduce){ .mmb-mock-bar > span{ transition:none; } }