/* Barra de propuesta + notas "por qué funciona" — compartido por las simulaciones FB / IG */
.pp-bar{position:sticky;top:0;z-index:1000;background:#14100d;color:#f4ede3;font:500 13px/1.3 "Inter",system-ui,-apple-system,sans-serif;border-bottom:1px solid rgba(200,164,106,.3)}
.pp-bar .in{max-width:1240px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pp-tag{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#c8a46a;white-space:nowrap}
.pp-tabs{display:flex;gap:4px;margin-left:auto;background:rgba(244,237,227,.08);border-radius:999px;padding:3px}
.pp-tabs a{padding:6px 12px;border-radius:999px;color:#f4ede3;text-decoration:none;opacity:.75;white-space:nowrap}
.pp-tabs a.on{background:#c8a46a;color:#14100d;opacity:1}
.pp-notes{border:1px solid #c8a46a;background:none;color:#e0c08a;border-radius:999px;padding:6px 12px;font:inherit;cursor:pointer;white-space:nowrap}
.pp-notes[aria-pressed=true]{background:#c8a46a;color:#14100d}
.pp-sub{width:100%;font-size:11px;color:#a89a8a;font-weight:400}
@media(max-width:640px){.pp-tag{display:none}.pp-tabs{margin-left:0}.pp-bar .in{justify-content:space-between}}

[data-note]{position:relative}
.pp-dot{display:none;position:absolute;top:6px;right:6px;z-index:50;width:24px;height:24px;border-radius:50%;background:#c8a46a;color:#14100d;font:700 12px/24px "Inter",system-ui,sans-serif;text-align:center;border:2px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.3);cursor:pointer;animation:pp-pulse 2s infinite}
body.pp-on .pp-dot{display:block}
body.pp-on .li[data-note],body.pp-on .evc[data-note],body.pp-on .bio[data-note]{padding-right:34px}
body.pp-on [data-note]{outline:2px dashed rgba(200,164,106,.85);outline-offset:3px}
@keyframes pp-pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,164,106,.6)}50%{box-shadow:0 0 0 8px rgba(200,164,106,0)}}
.pp-pop{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:2000;width:min(520px,calc(100vw - 32px));background:#14100d;color:#f4ede3;border:1px solid #c8a46a;border-radius:14px;padding:16px 18px 16px 52px;font:400 14px/1.5 "Inter",system-ui,sans-serif;box-shadow:0 20px 50px rgba(0,0,0,.4);display:none}
.pp-pop.on{display:block}
.pp-pop b{position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:50%;background:#c8a46a;color:#14100d;text-align:center;line-height:26px;font-size:13px}
.pp-pop strong{color:#e0c08a;display:block;margin-bottom:2px}
.pp-pop button{position:absolute;right:8px;top:6px;background:none;border:0;color:#a89a8a;font-size:20px;cursor:pointer}

/* Lista visible "por qué funciona" */
.pp-why{background:#14100d;color:#f4ede3;font-family:"Inter",system-ui,-apple-system,sans-serif}
.pp-why .in{max-width:1100px;margin:0 auto;padding:36px 16px 40px}
.pp-why .eb{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#c8a46a;font-weight:500}
.pp-why h2{font:400 clamp(28px,4vw,42px)/1.1 "Cormorant Garamond",Georgia,serif;margin:10px 0 8px}
.pp-why h2 em{color:#e0c08a;font-style:italic}
.pp-why .lead{color:#d9cfc1;font-weight:300;max-width:62ch;font-size:15px;line-height:1.6}
.pp-list{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pp-list li{display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(200,164,106,.28);border-radius:8px;padding:14px;cursor:pointer;transition:.2s;background:rgba(244,237,227,.02)}
.pp-list li:hover,.pp-list li:focus{border-color:#c8a46a;background:rgba(200,164,106,.08);outline:none}
.pp-list li>b{flex:none;width:26px;height:26px;border-radius:50%;background:#c8a46a;color:#14100d;font:700 12px/26px "Inter",sans-serif;text-align:center}
.pp-list strong{display:block;font-weight:600;font-size:14px;color:#f4ede3;margin-bottom:3px}
.pp-list span{display:block;font-size:13px;line-height:1.5;color:#a89a8a}
@media(max-width:900px){.pp-list{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  .pp-why .in{padding:28px 16px 30px}
  .pp-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:20px -16px 0;padding:0 16px 4px;scroll-padding:0 16px;scrollbar-width:none}
  .pp-list::-webkit-scrollbar{display:none}
  .pp-list li{flex:0 0 82%;scroll-snap-align:start}
  .pp-why .swipe{display:block}
}
.pp-why .swipe{display:none;font-size:12px;color:#a89a8a;margin-top:10px}
/* variante en columna (Instagram) */
.pp-list.col{grid-template-columns:1fr;display:grid;overflow:visible;margin:16px 0 0;padding:0}
.pp-list.col li{flex:none}
@keyframes pp-flash{0%,100%{outline-color:rgba(200,164,106,.85)}50%{outline-color:#fff;outline-width:4px}}
body.pp-on .pp-flash{animation:pp-flash .5s ease 3}