/* Variantes locales de color para revisar la dirección visual. */
.color-picker{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid #ffffff40;font-size:12px}.color-picker>span{margin-right:10px}.color-picker button{min-height:36px;border:1px solid currentColor;border-radius:100px;padding:5px 14px;font-size:12px;color:inherit}.color-picker button[aria-pressed=true]{background:#06253d;color:#fff8ef;border-color:#06253d}.color-picker button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
body[data-color=orange]{background:#ff6b2b;color:#06253d}body[data-color=orange]:before{background:#ff6b2b}body[data-color=orange]:after,body[data-color=cream]:after{content:'';position:fixed;z-index:-1;inset:0;pointer-events:none;background:url('ondas.svg') right center/auto 110% no-repeat;opacity:.55;mask-image:linear-gradient(90deg,transparent 35%,#000 100%)}
body[data-color=orange] .logo img,body[data-color=cream] .logo img{content:url('logo-ink.svg')}body[data-color=orange] .color-picker{border-color:#06253d30}body[data-color=orange] h1 em{border-color:#fff8ef}body[data-color=orange] .primary{background:#fff8ef;color:#06253d;border-color:#fff8ef}body[data-color=orange] .secondary{border-color:#06253d;background:#ff6b2b}body[data-color=orange] .small,body[data-color=orange] .process span{opacity:1}body[data-color=orange] .process,body[data-color=orange] details,body[data-color=orange] footer{border-color:#06253d55}
body[data-color=orange] .intro .salvamento svg g[stroke],body[data-color=orange] .audio .salvamento svg g[stroke]{stroke:#fff8ef}body[data-color=orange] .intro .lighthouse-beam,body[data-color=orange] .intro .lighthouse-light circle{fill:#fff8ef}body[data-color=orange] .salvamento-control{background:#06253d;border-color:#06253d;color:#fff8ef}body[data-color=orange] .paper{box-shadow:0 20px 70px #8a2b1020;border-radius:18px}body[data-color=orange] .paper .primary{background:#06253d;color:#fff8ef;border-color:#06253d}body[data-color=orange] .audio{background:#fff8ef;border-radius:24px;padding:40px;margin:0 0 55px;max-width:none}body[data-color=orange] .audio .salvamento svg g[stroke]{stroke:#ff4f00}body[data-color=orange] .audio .primary{background:#06253d;color:#fff8ef;border-color:#06253d}body[data-color=orange] .audio .small{opacity:.9}body[data-color=orange] .intro-art .salvamento{width:150px;height:150px}
body[data-color=cream]{background:#f4f0e8;color:#06253d}body[data-color=cream]:before{background:#f4f0e8}body[data-color=cream]:after{opacity:.28;filter:invert(32%) sepia(95%) saturate(3565%) hue-rotate(356deg)}body[data-color=cream] .primary{background:#06253d;color:#f4f0e8;border-color:#06253d}body[data-color=cream] .secondary,body[data-color=cream] .process,body[data-color=cream] details,body[data-color=cream] footer,body[data-color=cream] .color-picker{border-color:#06253d40}body[data-color=cream] .paper{background:#fffdf8;border:1px solid #19527d25;border-radius:18px}body[data-color=cream] .small,body[data-color=cream] .process span{opacity:1}
@media(max-width:1000px){body[data-color=orange] .intro-art .salvamento{width:100px;height:100px}}@media(max-width:600px){.color-picker{gap:6px;padding:10px}.color-picker>span{margin-right:3px}body[data-color=orange] .audio{padding:28px 22px}body[data-color=orange]:after,body[data-color=cream]:after{opacity:.25;mask-image:linear-gradient(90deg,transparent 40%,#000 100%)}}