/* Capa de identidad por herramienta: cada página tiene su color, su brillo y sus botones propios. */
:root { --pa: #7c5cff; --pb: #5b8cff; }
:root:has(.cx-main) { --pa: #ff5fae; --pb: #9b6dff; }            /* Canvas */
:root:has(.ed-main) { --pa: #ff6b4a; --pb: #f5a524; }            /* Editor */
:root:has(.sl-main) { --pa: #7c5cff; --pb: #22b8cf; }            /* Presentaciones */
:root:has(#pv) { --pa: #34d399; --pb: #22b8cf; }                 /* Amigo privado */
:root:has(.cv-main:not(.ed-main)) { --pa: #5b8cff; --pb: #34d399; } /* Convertir */

.cv-top::before, #pv::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 460px; z-index: -1; pointer-events: none;
  background: radial-gradient(720px 360px at 18% -8%, color-mix(in srgb, var(--pa) 30%, transparent), transparent 65%), radial-gradient(620px 320px at 92% -4%, color-mix(in srgb, var(--pb) 20%, transparent), transparent 65%);
  animation: pm-glow 9s ease-in-out infinite alternate; }
@keyframes pm-glow { to { transform: translateX(3%) scale(1.06); opacity: .8; } }

.cv-top h1 { background: linear-gradient(95deg, var(--text, #fff) 20%, var(--pa)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.02em; }
.cv-top .cv-sub { padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pa); background: color-mix(in srgb, var(--pa) 14%, transparent); }
.cv-back { transition: transform .15s, border-color .15s; } .cv-back:hover { transform: translateX(-2px); border-color: var(--pa); }

.sl-hero, .cx-hero { font-size: clamp(26px, 4vw, 40px); line-height: 1.08; letter-spacing: -.03em; background: linear-gradient(95deg, var(--text, #fff) 35%, var(--pa) 75%, var(--pb)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sl-hero-sub, .cx-hero-sub { font-size: 15.5px; }

.sl-compose, .cx-compose, .cv-drop { border-radius: 24px; border: 1px solid color-mix(in srgb, var(--pa) 30%, rgba(255,255,255,.1)); box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03) inset, 0 0 60px color-mix(in srgb, var(--pa) 12%, transparent); transition: box-shadow .25s, border-color .25s, transform .25s; }
.sl-compose:focus-within, .cx-compose:focus-within { border-color: var(--pa); box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 0 4px color-mix(in srgb, var(--pa) 22%, transparent), 0 0 80px color-mix(in srgb, var(--pa) 22%, transparent); }
.cv-drop { border-style: dashed; border-width: 2px; }
.cv-drop:hover, .cv-drop.over { transform: translateY(-3px); border-color: var(--pa); box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 90px color-mix(in srgb, var(--pa) 25%, transparent); }

.sl-go, .cx-go, .ed-btn.ed-primary, .sl-btn.sl-primary, .pv-send { background: linear-gradient(135deg, var(--pa), var(--pb)) !important; color: #fff !important; border: 0 !important; box-shadow: 0 10px 24px color-mix(in srgb, var(--pa) 40%, transparent); transition: transform .15s, box-shadow .15s; }
.sl-go:hover, .cx-go:hover, .ed-btn.ed-primary:hover, .sl-btn.sl-primary:hover, .pv-send:hover { transform: translateY(-1px); box-shadow: 0 14px 32px color-mix(in srgb, var(--pa) 55%, transparent); }
.sl-go:active, .cx-go:active, .ed-btn.ed-primary:active, .pv-send:active { transform: scale(.96); }

.cv-chip, .sl-chip, .cx-examples button, .sl-btn, .ed-btn, .cx-btn { transition: transform .15s, border-color .15s, background .15s; }
.cv-chip:hover, .sl-chip:hover, .cx-examples button:hover, .sl-btn:hover, .ed-btn:hover, .cx-btn:hover { border-color: var(--pa); background: color-mix(in srgb, var(--pa) 14%, transparent); transform: translateY(-1px); }
.cx-tabs .on, .sl-seg .on { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pa) 50%, transparent) inset; }
.cx-tabs .on { border-bottom-color: var(--pa) !important; }
.sl-thumb.on { box-shadow: 0 0 0 2px var(--pa), 0 10px 24px color-mix(in srgb, var(--pa) 35%, transparent); }
.sl-canvas .sl-slide { box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); }

/* Amigo privado */
.pv-lock-ico { background: linear-gradient(135deg, var(--pa), var(--pb)) !important; color: #06281f !important; box-shadow: 0 0 0 10px color-mix(in srgb, var(--pa) 12%, transparent), 0 0 60px color-mix(in srgb, var(--pa) 45%, transparent); animation: pm-pulse 2.8s ease-in-out infinite; }
@keyframes pm-pulse { 50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--pa) 5%, transparent), 0 0 80px color-mix(in srgb, var(--pa) 55%, transparent); } }
.pv-pad button { transition: transform .12s, background .15s, box-shadow .15s; }
.pv-pad button:hover { background: color-mix(in srgb, var(--pa) 22%, transparent); box-shadow: 0 0 0 1px var(--pa) inset; }
.pv-pad button:active { transform: scale(.9); background: var(--pa); color: #06281f; }
.pv-dots i.on, .pv-dots .on { background: var(--pa) !important; border-color: var(--pa) !important; box-shadow: 0 0 12px var(--pa); }
.pv-link, .pv-back { color: var(--pa) !important; }
.pv-file { animation: sl-in .25s ease; }
@media (prefers-reduced-motion: reduce) { .cv-top::before, #pv::before, .pv-lock-ico { animation: none; } }

.ed-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.ed-feat { display: grid; gap: 5px; align-content: start; padding: 16px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); transition: transform .2s, border-color .2s; animation: sl-in .4s ease both; }
.ed-feat:nth-child(2) { animation-delay: .05s; } .ed-feat:nth-child(3) { animation-delay: .1s; } .ed-feat:nth-child(4) { animation-delay: .15s; } .ed-feat:nth-child(5) { animation-delay: .2s; } .ed-feat:nth-child(6) { animation-delay: .25s; }
.ed-feat:hover { transform: translateY(-3px); border-color: var(--pa); }
.ed-feat i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font-style: normal; font-weight: 700; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--pa), var(--pb)); margin-bottom: 4px; }
.ed-feat b { font-size: 14.5px; } .ed-feat small { font-size: 12.5px; opacity: .7; line-height: 1.4; }
@keyframes sl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .ed-feats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .ed-feats { grid-template-columns: 1fr; } }