/* Ilustración del panel en la portada de la plataforma (_PanelPlataforma). Colores propios: se ve igual en cualquier plantilla. */
.pp-panel {
    position: relative; z-index: 1; width: 100%; max-width: 540px; margin: 0 auto;
    border-radius: 22px; overflow: hidden; text-align: left;
    background: #ffffff; color: #0f172a; border: 1px solid #e5e7eb;
    box-shadow: 0 30px 70px rgba(15, 23, 42, .18), 0 6px 18px rgba(15, 23, 42, .08);
    font-size: 14px;
}
.pp-barra { display: flex; align-items: center; gap: 6px; padding: .75rem 1rem; background: #0b1026; }
.pp-barra span { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.pp-barra span:nth-child(2) { background: #febc2e; }
.pp-barra span:nth-child(3) { background: #28c840; }
.pp-barra b { margin-left: .6rem; font-size: .8rem; font-weight: 600; color: #c7cbe6; }
.pp-cuerpo { padding: 1.1rem; display: grid; gap: 1rem; }
.pp-indicadores { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.pp-indicador { padding: .85rem 1rem; border-radius: 16px; background: #f5f6ff; border: 1px solid #e7e9fb; }
.pp-indicador small { display: block; font-size: .74rem; color: #64748b; }
.pp-indicador b { display: block; margin: .15rem 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.pp-indicador em { font-style: normal; font-size: .74rem; font-weight: 600; color: #475569; }
.pp-indicador .pp-sube { color: #16a34a; }
.pp-grafica {
    display: flex; align-items: flex-end; gap: 10px; height: 84px; padding: .7rem .8rem 0;
    border-radius: 16px; background: linear-gradient(180deg, #fafbff, #f1f3ff); border: 1px solid #e7e9fb;
}
.pp-grafica span { flex: 1; height: var(--h); border-radius: 8px 8px 0 0; background: #c7c4ff; }
.pp-grafica .pp-hoy { background: linear-gradient(180deg, #7c5cff, #4f46e5); }
.pp-eventos { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pp-eventos li { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 14px; border: 1px solid #eef0f6; }
.pp-eventos b { display: block; font-size: .84rem; }
.pp-eventos small { display: block; font-size: .74rem; color: #64748b; }
.pp-icono { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .95rem; }
.pp-icono i { color: #fff; margin: 0; }
.pp-verde { background: linear-gradient(135deg, #22c55e, #059669); }
.pp-azul { background: linear-gradient(135deg, #06b6d4, #2563eb); }
.pp-wa { background: #25d366; }
@media (max-width: 575.98px) {
    .pp-panel { font-size: 13px; border-radius: 18px; }
    .pp-indicador b { font-size: 1.05rem; }
    .pp-grafica { height: 72px; }
}

/* Inicio de la plataforma: íconos de los beneficios en círculo */
.landing-plataforma .lm-icono { border-radius: 50%; }