/* PIC-ARTE · PAGINAS INFORMATIVAS v1
   Se aplica solo con body.pic-info-page. No afecta otras paginas. */

.pic-info-page{
  --pi-brand:#6F3CC3; --pi-brand-2:#9b4ad0;
  --pi-ink:#171717; --pi-text:#555; --pi-muted:#8a8a8a;
  --pi-line:#e8e1f7; --pi-soft:#f4effd; --pi-card:#faf8fe;
  --pi-soft-ink:#38235f; --pi-link:#6F3CC3; --pi-note-line:#d3c3f4;
}
html[data-theme="dark"] .pic-info-page{
  --pi-ink:#f4f5f8; --pi-text:#c9ccd8; --pi-muted:#8f94a8;
  --pi-line:#343744; --pi-soft:#302747; --pi-card:#1f2130;
  --pi-soft-ink:#d5ccff; --pi-link:#d5ccff; --pi-note-line:#4b3a7a;
}
html[data-theme="dark"] body.pic-info-page{
  background:radial-gradient(circle at 84% 6%,rgba(195,75,208,.14),transparent 28%),#101116;
  color:var(--pi-ink); color-scheme:dark;
}

/* ---- Layout: todo centrado en el mismo ancho ---- */
.pic-info-page .pic-legal-main{padding:56px 0 96px}
.pic-info-wrap{width:min(860px,calc(100% - 32px));margin:0 auto}
.pic-info-page .pic-legal-intro{max-width:none;margin:0 0 28px}
.pic-info-page .pic-legal-intro h1{color:var(--pi-ink)}
.pic-info-page .pic-legal-lead{color:var(--pi-text)}
.pic-info-page .pic-legal-updated{color:var(--pi-muted)}
.pic-info-page .pic-legal-eyebrow{color:var(--pi-brand)}
html[data-theme="dark"] .pic-info-page .pic-legal-eyebrow{color:#b9a8ff}
.pic-info-page .pic-legal-content{max-width:none;margin:0;padding:44px 48px}
html[data-theme="dark"] .pic-info-page .pic-legal-content{background:#191b23;border-color:#343744;box-shadow:none}

/* ---- Texto ---- */
.pic-info-page .pic-legal-content h2{margin:42px 0 16px;color:var(--pi-ink)}
.pic-info-page .pic-legal-content > h2:first-child{margin-top:0}
.pic-info-page .pic-legal-content h3{color:var(--pi-ink)}
.pic-info-page .pic-legal-content p,
.pic-info-page .pic-legal-content li{color:var(--pi-text)}
.pic-info-page .pic-legal-content a{color:var(--pi-link);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---- Aviso destacado ---- */
.pic-info-page .hf-note{margin:0 0 8px;padding:18px 20px;border-radius:16px;background:var(--pi-soft);border:1.5px solid var(--pi-note-line)}
.pic-info-page .hf-note strong{display:block;margin-bottom:6px;font-size:1.08em;color:var(--pi-soft-ink)}
.pic-info-page .hf-note p{margin:0;color:var(--pi-soft-ink)}

/* ---- Pasos ---- */
.pic-info-page .hf-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.pic-info-page .hf-step{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:16px;border-radius:16px;border:1px solid var(--pi-line);background:var(--pi-card)}
.pic-info-page .hf-num{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;background:linear-gradient(135deg,var(--pi-brand),var(--pi-brand-2))}
.pic-info-page .hf-step h3{margin:2px 0 6px;font-size:1.08em}
.pic-info-page .hf-step p{margin:0 0 6px}
.pic-info-page .hf-step p:last-child{margin-bottom:0}

/* ---- Etiquetas y atajos ---- */
.pic-info-page .hf-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.pic-info-page .hf-chips span,
.pic-info-page .hf-jump a{padding:9px 15px;border-radius:99px;font-weight:600;font-size:.95em;background:var(--pi-soft);color:var(--pi-soft-ink);border:1px solid var(--pi-note-line);text-decoration:none}
.pic-info-page .hf-jump{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}

/* ---- Medios de pago ---- */
.pic-info-page .hf-pay{display:grid;gap:10px;margin:14px 0}
@media (min-width:640px){.pic-info-page .hf-pay{grid-template-columns:1fr 1fr}}
.pic-info-page .hf-pay div{padding:14px 16px;border-radius:14px;border:1px solid var(--pi-line);background:var(--pi-card);color:var(--pi-text)}
.pic-info-page .hf-pay b{display:block;margin-bottom:4px;color:var(--pi-ink)}

/* ---- Barra de reparto ---- */
.pic-info-page .hf-split{margin:18px 0 8px;display:flex;height:50px;border-radius:12px;overflow:hidden;font-weight:800;border:1px solid var(--pi-line)}
.pic-info-page .hf-split span{display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:15px;text-align:center}
.pic-info-page .hf-split .a{background:linear-gradient(135deg,var(--pi-brand),var(--pi-brand-2));color:#fff}
.pic-info-page .hf-split .b{background:var(--pi-soft);color:var(--pi-soft-ink)}

/* ---- Botones ---- */
.pic-info-page .pic-legal-content .hf-cta{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.pic-info-page .pic-legal-content .hf-cta a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:12px;font-weight:700;text-decoration:none;color:var(--pi-link);border:1.5px solid var(--pi-link);background:transparent}
.pic-info-page .pic-legal-content .hf-cta a.main{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--pi-brand),var(--pi-brand-2))}
.pic-info-page .hf-cta a.main span{color:inherit}

/* ---- Preguntas frecuentes ---- */
.pic-info-page .hf-faq details{border-top:1px solid var(--pi-line);padding:2px 0}
.pic-info-page .hf-faq details:last-of-type{border-bottom:1px solid var(--pi-line)}
.pic-info-page .hf-faq summary{list-style:none;cursor:pointer;padding:14px 32px 14px 0;min-height:44px;font-weight:700;color:var(--pi-ink);position:relative}
.pic-info-page .hf-faq summary::-webkit-details-marker{display:none}
.pic-info-page .hf-faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:500;color:var(--pi-link)}
.pic-info-page .hf-faq details[open] summary::after{content:"\2212"}
.pic-info-page .hf-faq details p{margin:0 0 14px}

/* ---- Celular ---- */
@media (max-width:640px){
  .pic-info-page .pic-legal-main{padding:32px 0 80px}
  .pic-info-page .pic-legal-content{padding:26px 18px;border-radius:18px}
  .pic-info-page .hf-step{grid-template-columns:38px 1fr;gap:12px;padding:14px}
  .pic-info-page .hf-num{width:38px;height:38px;font-size:16px}
  .pic-info-page .pic-legal-content .hf-cta a{width:100%}
}

/* PAGINAS CON SECCIONES (compras y pagos y otras legales) */
.pic-info-page .pic-legal-content section h2{margin-top:0}
.pic-info-page .pic-legal-content section + section{border-top-color:var(--pi-line)}