/* Wënü Studio · Wültufe v0.7 — tokens de wenu-frontend/src/styles/tokens.css (vía docs/02-marca-iconografia.md) + marca v2 (Telar).
   Superficies de vidrio oscuro sobrio (mockup-1), tipografía más grande, oro solo para el foco y «siguiente ideal». */
:root {
  --obsidian:#0a0a0a; --charcoal:#121212; --ash:#1a1a1a; --bone:#f0ede8; --sand:#9a948a; --silver:#b8b4aa; --ember:#c9a84c; --ember-hi:#e3c46e;
  --ink-2:#d9d3c8; --ink-3:#bdb6aa;
  --line:rgba(240,237,232,.12); --line-2:rgba(240,237,232,.22); --line-3:rgba(240,237,232,.36);
  --glass:rgba(17,15,14,.66); --glass-2:rgba(26,23,21,.72); --glass-hi:rgba(240,237,232,.045); --solid:#110f0e;
  --serif:'Instrument Serif',Georgia,serif; --ritual:'Cormorant Garamond',Georgia,serif; --sans:'Instrument Sans',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --hud:68px; --panel-w:380px; --rail:0px; --anat:0px; --rail-w:84px; --anat-w:256px; --r:16px; --r-s:12px; --ease:cubic-bezier(.2,.7,.2,1);
  --wultufe-accent:var(--ember);
}
* { box-sizing:border-box; }
html, body { margin:0; height:100%; background:var(--obsidian); color:var(--bone); font:400 17px/1.5 var(--sans); -webkit-text-size-adjust:100%; }
body { overflow:hidden; overscroll-behavior:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
input, textarea { -webkit-user-select:text; user-select:text; }
[hidden] { display:none !important; }
button, input, a.btn { font:inherit; color:inherit; }
button { cursor:pointer; }
:focus-visible { outline:2px solid var(--ember); outline-offset:2px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#sky { position:fixed; inset:0; width:100%; height:100%; z-index:0; }
.nebula { position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 78% 18%, rgba(88,64,150,.15), transparent 70%), radial-gradient(50% 45% at 12% 82%, rgba(40,74,130,.13), transparent 70%), radial-gradient(40% 35% at 50% 50%, rgba(120,90,60,.06), transparent 70%); }
svg { display:block; }
[data-icon] { display:inline-block; flex:none; }
[data-icon] svg { width:100%; height:100%; }
.glass { background:var(--glass); border:1px solid var(--line); box-shadow:inset 0 1px 0 var(--glass-hi), 0 18px 48px rgba(0,0,0,.42); backdrop-filter:blur(18px) saturate(1.08); -webkit-backdrop-filter:blur(18px) saturate(1.08); }

/* ── HUD ── */
.hud { position:fixed; top:0; left:0; right:0; height:var(--hud); z-index:30; display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:12px; padding:0 14px; padding-top:env(safe-area-inset-top);
  background:linear-gradient(rgba(10,10,10,.94), rgba(10,10,10,.78)); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
body[data-scene="carga"] .hud { opacity:0; pointer-events:none; }
.brand { display:flex; align-items:center; gap:12px; background:none; border:0; padding:0 6px 0 0; min-height:48px; text-align:left; min-width:0; justify-self:start; }
.sello { width:40px; height:40px; flex:none; filter:drop-shadow(0 0 10px rgba(201,168,76,.18)); }
.brand-txt { display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.brand-name { font:400 25px/1 var(--serif); letter-spacing:.01em; }
.brand-sub { font-size:14px; color:var(--sand); max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; }
.steps { display:flex; justify-content:center; align-items:center; gap:4px; min-width:0; }
.steps .st { position:relative; display:flex; align-items:center; gap:9px; min-width:44px; min-height:48px; padding:4px 12px; background:none; border:0; border-radius:999px; color:var(--sand); transition:color .3s, background .3s; }
.steps .st .n { font:500 12px/1 var(--mono); letter-spacing:.04em; color:var(--sand); }
.steps .st svg { width:16px; height:16px; transition:transform .35s var(--ease), color .3s; }
.steps .st .lbl { font-size:15px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.steps .st.lit { color:var(--ink-2); }
.steps .st.now { color:var(--bone); background:rgba(240,237,232,.06); box-shadow:inset 0 0 0 1px var(--line-2); }
.steps .st.now svg { color:var(--ember-hi); transform:scale(1.2); filter:drop-shadow(0 0 8px rgba(201,168,76,.65)); }
.steps .st:disabled { opacity:.38; cursor:default; }
.steps .thread { width:26px; height:1px; background:var(--line-2); flex:none; position:relative; overflow:hidden; }
.steps .thread::after { content:''; position:absolute; inset:0; background:rgba(240,237,232,.7); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.steps .thread.lit::after { transform:scaleX(1); }
.tools { display:flex; gap:8px; justify-self:end; align-items:center; }
.tool { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:transparent; border:1px solid var(--line); border-radius:var(--r-s); color:var(--sand); padding:0 10px; }
.tool svg { width:22px; height:22px; }
.tool .tl { display:none; }
.tool .on { display:none; } .tool[aria-pressed="true"] .on { display:inline; } .tool[aria-pressed="true"] .off { display:none; }
.tool[aria-pressed="true"] { color:var(--bone); border-color:var(--line-2); background:rgba(240,237,232,.06); }
.tool.pro { padding:0 14px 0 10px; } .tool.pro .tl { display:inline; font-size:15px; letter-spacing:.04em; }
.tool.pro .sw { width:34px; height:20px; border-radius:10px; background:rgba(240,237,232,.12); position:relative; transition:background .25s; }
.tool.pro .sw i { position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:var(--sand); transition:transform .25s var(--ease), background .25s; }
.tool.pro[aria-pressed="true"] .sw { background:rgba(240,237,232,.3); } .tool.pro[aria-pressed="true"] .sw i { transform:translateX(14px); background:var(--bone); }
.tool.more { display:none; }
.tool.more [data-icon] { width:24px; height:24px; }
@media (max-width:1180px) { .steps .st .n { display:none; } .steps .thread { width:16px; } .brand-sub { max-width:150px; } }
@media (max-width:999px) { .hud { grid-template-columns:auto minmax(0, 1fr) auto; } .brand-sub { display:none; } .steps .st { padding:4px 9px; gap:7px; } .steps .st .lbl { font-size:14px; letter-spacing:.04em; } }
@media (max-width:760px) {
  :root { --hud:60px; }
  .hud { grid-template-columns:auto minmax(0, 1fr) auto; gap:4px; padding:0 6px; padding-top:env(safe-area-inset-top); }
  .brand-txt { display:none; } .brand { padding:0; min-width:44px; justify-content:center; } .sello { width:34px; height:34px; }
  .steps { gap:0; justify-content:space-between; }
  .steps .st { flex-direction:column; gap:3px; padding:4px 4px; min-width:44px; }
  .steps .st .lbl { font-size:12px; letter-spacing:.05em; }
  .steps .st svg { width:12px; height:12px; }
  .steps .st.now { background:none; box-shadow:none; }
  .steps .thread { flex:1; width:auto; min-width:2px; max-width:22px; }
  .tool.more { display:inline-flex; }
  .tools { position:fixed; top:calc(var(--hud) + 6px); right:8px; flex-direction:column; align-items:stretch; padding:8px; gap:6px; border-radius:var(--r); background:var(--solid); border:1px solid var(--line-2); box-shadow:0 18px 40px rgba(0,0,0,.6); display:none; z-index:35; }
  .tools.open { display:flex; animation:popIn .2s var(--ease) both; }
  .tools .tool { justify-content:flex-start; min-height:48px; padding:0 14px; } .tools .tool .tl { display:inline; font-size:16px; }
}
@keyframes popIn { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:none; } }

/* ── escenas ── */
main { position:fixed; top:var(--hud); left:calc(var(--rail) + var(--anat)); right:0; bottom:0; z-index:1; transition:left .3s var(--ease); }
body[data-scene="carga"] main { top:0; left:0; }
.scene { position:absolute; inset:0; animation:sceneIn .42s var(--ease) both; }
@keyframes sceneIn { from { opacity:0; transform:translateY(10px) scale(.992); } to { opacity:1; transform:none; } }
.panel > *, .inicio-form > * { animation:riseIn .5s var(--ease) both; }
.panel > :nth-child(2) { animation-delay:.04s; } .panel > :nth-child(3) { animation-delay:.08s; } .panel > :nth-child(4) { animation-delay:.12s; } .panel > :nth-child(n+5) { animation-delay:.16s; }
@keyframes riseIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* carga */
#s-carga { display:grid; place-items:center; cursor:pointer; }
#loaderCv { position:absolute; inset:0; width:100%; height:100%; }
.carga-txt { position:absolute; left:0; right:0; bottom:max(5vh, 24px); display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:0 16px; }
.sello-big { width:min(96px, 11vh); height:min(96px, 11vh); opacity:0; animation:fadeUp .6s .3s var(--ease) forwards; filter:drop-shadow(0 0 22px rgba(201,168,76,.28)); }
.ritual { font:italic 500 23px/1.3 var(--ritual); color:var(--ink-2); margin:0; }
.skip { background:none; border:0; color:var(--sand); font-size:15px; min-height:44px; padding:0 16px; letter-spacing:.06em; }
@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* inicio: portada cósmica con el sello + formulario en vidrio */
#s-inicio { overflow:auto; -webkit-overflow-scrolling:touch; }
.inicio { max-width:1240px; margin:0 auto; padding:clamp(16px, 4vh, 48px) 16px 48px; display:grid; grid-template-columns:minmax(0, 1fr); gap:18px; }
.portada { position:relative; min-height:min(52vh, 480px); display:grid; place-items:end center; border-radius:24px; overflow:hidden; background:radial-gradient(80% 60% at 50% 30%, rgba(70,56,110,.22), transparent 70%); }
.portada canvas { position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.9; }
.portada-in { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:12px 12px 26px; }
.sello-portada { width:88px; height:88px; filter:drop-shadow(0 0 26px rgba(201,168,76,.3)) drop-shadow(0 0 2px rgba(240,237,232,.4)); animation:breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { filter:drop-shadow(0 0 18px rgba(201,168,76,.22)); } 50% { filter:drop-shadow(0 0 32px rgba(201,168,76,.42)); } }
.wordmark { margin:4px 0 0; font:400 clamp(44px, 6vw, 64px)/1 var(--serif); letter-spacing:.14em; text-transform:uppercase; padding-left:.14em; }
.pasos-portada { list-style:none; margin:10px 0 0; padding:0; display:flex; gap:6px 18px; flex-wrap:wrap; justify-content:center; font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.pasos-portada b { font:500 12px var(--mono); color:var(--sand); margin-right:7px; letter-spacing:0; }
.inicio-form { max-width:760px; width:100%; margin:0 auto; display:flex; flex-direction:column; gap:22px; min-width:0; padding:26px 26px 22px; border-radius:22px; }
@media (min-width:1000px) and (orientation:landscape) {
  .inicio { grid-template-columns:minmax(0, 1fr) minmax(0, 580px); gap:28px; align-items:start; min-height:100%; }
  .portada { position:sticky; top:0; height:calc(100vh - var(--hud) - 64px); max-height:780px; min-height:0; }
}
.eyebrow { margin:0; font:500 13px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--sand); }
h1 { font:400 clamp(42px, 6.4vw, 62px)/1.02 var(--serif); margin:0; letter-spacing:-.01em; }
h2 { font:400 30px/1.12 var(--serif); margin:0; }
.field { display:flex; flex-direction:column; gap:10px; border:0; padding:0; margin:0; min-width:0; }
.field > span, .field legend { font-size:15px; color:var(--sand); letter-spacing:.04em; padding:0; margin-bottom:10px; }
input[type=text], input[type=search] { min-height:52px; padding:0 16px; background:rgba(8,8,8,.55); border:1px solid var(--line-2); border-radius:var(--r-s); color:var(--bone); font-size:18px; width:100%; }
input[type=text]:focus, input[type=search]:focus { outline:none; border-color:var(--line-3); box-shadow:0 0 0 3px rgba(240,237,232,.06); }
.seg { display:flex; gap:8px; flex-wrap:wrap; }
.chip { min-height:44px; padding:0 15px; display:inline-flex; align-items:center; gap:8px; background:rgba(240,237,232,.02); border:1px solid var(--line); border-radius:var(--r-s); color:var(--ink-2); font-size:16px; letter-spacing:.02em; transition:border-color .2s, background .2s, color .2s; }
.chip[aria-pressed="true"], .chip[aria-selected="true"] { border-color:var(--line-3); color:var(--bone); background:rgba(240,237,232,.09); }
.chip.big { min-height:60px; flex:1; justify-content:center; font-size:18px; }
.ear-ic { width:28px; height:28px; } .ear-ic.flip { transform:scaleX(-1); }
.bases { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.base { display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left; padding:18px 16px; min-height:156px; background:rgba(14,13,12,.55); border:1px solid var(--line); border-radius:var(--r); transition:border-color .2s, background .2s, transform .25s var(--ease); }
.base:hover { border-color:var(--line-2); }
.base[aria-pressed="true"] { border-color:var(--line-3); background:rgba(240,237,232,.07); box-shadow:inset 0 0 0 1px rgba(240,237,232,.08); }
.base .b-ic { width:34px; height:34px; color:var(--bone); }
.base b { font:400 25px/1.1 var(--serif); }
.base small { font-size:15px; color:var(--sand); line-height:1.4; }
.note { margin:0; font-size:16px; color:var(--sand); }
.fine { margin:0; font-size:14px; line-height:1.45; color:var(--sand); }
.actions { display:flex; justify-content:flex-end; }
.btn { min-height:48px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:9px; background:rgba(240,237,232,.025); border:1px solid var(--line-2); border-radius:var(--r-s); color:var(--bone); font-size:16px; letter-spacing:.02em; text-decoration:none; transition:border-color .2s, background .2s, transform .15s var(--ease); }
.btn:hover { border-color:var(--line-3); background:rgba(240,237,232,.06); }
.btn:active { transform:scale(.98); }
.btn [data-icon] { width:22px; height:22px; }
.btn.primary { background:linear-gradient(180deg, #e8d08c, #c9a84c 70%, #b8963e); border-color:rgba(255,236,180,.5); color:#14110b; font-weight:600; border-radius:999px; box-shadow:0 8px 24px rgba(201,168,76,.22), inset 0 1px 0 rgba(255,255,255,.4); }
.btn.primary:hover { background:linear-gradient(180deg, #efd99a, #d2b257 70%, #c09d44); }
.btn.primary .arr { font-size:20px; margin-left:4px; }
.btn[aria-pressed="true"] { border-color:var(--line-3); background:rgba(240,237,232,.1); }
.btn:disabled { opacity:.4; cursor:default; }
#btnStart { min-width:220px; min-height:58px; font-size:18px; }
.saved ul { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.saved li { display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; border:1px solid var(--line); border-radius:var(--r-s); padding:6px 6px 6px 14px; background:rgba(14,13,12,.5); }
.saved li .meta { font-size:14px; color:var(--sand); } .saved li b { font:400 21px var(--serif); display:block; }
.base-note { display:none; margin:0; font-size:15px; color:var(--sand); }
@media (max-width:640px) {
  .inicio { gap:12px; padding:8px 12px 0; } .portada { min-height:400px; border-radius:20px; } .sello-portada { width:60px; height:60px; } .wordmark { font-size:40px; } .portada-in .eyebrow { font-size:11.5px; letter-spacing:.14em; } .pasos-portada { font-size:12.5px; gap:4px 12px; letter-spacing:.1em; flex-wrap:nowrap; } .pasos-portada b { display:none; } .pasos-portada { font-size:13px; gap:6px 12px; }
  .inicio-form { gap:16px; padding:20px 16px 0; border-radius:20px 20px 0 0; } .inicio h1 { font-size:40px; } .inicio .ritual { font-size:20px; }
  .bases { grid-template-columns:repeat(3, 1fr); gap:8px; } .base { min-height:0; padding:14px 8px; align-items:center; text-align:center; gap:6px; } .base b { font-size:19px; } .base small { display:none; } .chip.big { min-height:54px; }
  .actions { position:sticky; bottom:0; z-index:3; margin:0 -16px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--solid); box-shadow:0 -16px 16px -2px var(--solid); } .actions .btn { width:100%; } .inicio-form > .fine { padding-bottom:20px; } .base-note { display:block; }
}

/* ── espacio de trabajo: escenario + panel ── */
.work { display:grid; grid-template-columns:1fr; grid-template-rows:minmax(0, 1fr) auto; }
.stage { position:relative; min-height:0; min-width:0; overflow:hidden; touch-action:none; }
.stage > canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hint { position:absolute; left:12px; right:12px; bottom:14px; display:flex; justify-content:center; pointer-events:none; z-index:2; }
.hint.top { bottom:78px; }
.hint:empty { display:none; }
.hint > span { background:rgba(12,11,10,.84); border:1px solid var(--line); border-radius:999px; padding:10px 18px; font-size:16px; max-width:580px; text-align:center; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hint .ritual { font-size:21px; }
@media (max-width:760px) { .hint { left:8px; right:8px; bottom:6px; } .hint.top { bottom:62px; } .hint > span { padding:7px 12px; font-size:14px; line-height:1.3; } .hint .ritual { font-size:17px; } }
.panel { border-top:1px solid var(--line); --pb:14px; padding:16px 18px calc(var(--pb) + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:14px; overflow:auto; max-height:46vh; scroll-padding-bottom:var(--cta-h, 96px); border-radius:0; box-shadow:none; }
.panel p { margin:0; color:var(--ink-2); }
.panel .lead { font-size:16px; color:var(--ink-3); }
.row { display:flex; gap:8px; flex-wrap:wrap; }
.row .btn { flex:1 1 auto; }
.cta { display:flex; gap:8px; position:sticky; bottom:calc(-1 * var(--pb) - env(safe-area-inset-bottom)); z-index:2; padding:12px 0 calc(var(--pb) + env(safe-area-inset-bottom)); margin:auto 0 calc(-1 * var(--pb) - env(safe-area-inset-bottom)); background:var(--solid); box-shadow:0 -16px 16px -2px var(--solid); }
.cta .btn:not(.primary) { background:var(--solid); }
.cta .btn { flex:1; } .cta.col { flex-direction:column; position:static; background:none; box-shadow:none; margin:0; padding:2px 0 4px; } .cta.col .btn:not(.primary) { background:rgba(240,237,232,.025); }
.sec { display:flex; flex-direction:column; gap:10px; padding-top:14px; border-top:1px solid var(--line); }
@media (min-width:1000px) and (orientation:landscape) {
  .work { grid-template-columns:minmax(0, 1fr) var(--panel-w); grid-template-rows:minmax(0, 1fr); }
  .panel { border-top:0; border-left:1px solid var(--line); max-height:none; --pb:20px; padding:22px 22px calc(var(--pb) + env(safe-area-inset-bottom)); }
}
@media (min-width:1400px) { :root { --panel-w:400px; --anat-w:276px; --rail-w:88px; } }
@media (max-width:760px) { .panel { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(14,12,11,.96); } }

/* herramientas de la vista: columna vertical de vidrio a la derecha del escenario */
.stools { position:absolute; top:10px; right:10px; z-index:3; display:flex; flex-direction:column; gap:8px; }
.stool { min-height:48px; min-width:48px; padding:6px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:rgba(14,12,11,.7); border:1px solid var(--line-2); color:var(--ink-2); font-size:12px; letter-spacing:.04em; border-radius:var(--r-s); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:border-color .2s, color .2s, background .2s; }
.stool [data-icon] { width:22px; height:22px; }
.stool[aria-pressed="true"] { border-color:var(--line-3); color:var(--bone); background:rgba(40,36,32,.85); }
#zoomMap[aria-pressed="true"], #zoomDs[aria-pressed="true"] { border-color:var(--ember); }
@media (max-width:760px) { .stools { top:6px; right:6px; gap:6px; } .stool { min-height:44px; min-width:44px; padding:4px; } .stool > span:not([data-icon]) { display:none; } }

/* ── modo piercer: barra vertical + columna de anatomía (mockup-1 / Auriculo 360) ── */
.rail { position:fixed; left:0; top:var(--hud); bottom:0; width:var(--rail-w); z-index:12; display:none; flex-direction:column; align-items:stretch; gap:4px; padding:10px 8px calc(10px + env(safe-area-inset-bottom)); background:rgba(12,11,10,.9); border-right:1px solid var(--line); overflow-y:auto; scrollbar-width:none; }
.rail::-webkit-scrollbar { display:none; }
.rail button { min-height:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:6px 2px; background:none; border:1px solid transparent; border-radius:var(--r-s); color:var(--sand); font-size:12.5px; letter-spacing:.03em; transition:color .2s, background .2s, border-color .2s; }
.rail button [data-icon] { width:24px; height:24px; }
.rail button:hover { color:var(--bone); background:rgba(240,237,232,.04); }
.rail button.on, .rail button[aria-pressed="true"] { color:var(--bone); background:rgba(240,237,232,.08); border-color:var(--line-2); }
.rail button.on [data-icon] { color:var(--ember-hi); }
.rail-sep { display:block; height:1px; margin:6px 10px; background:var(--line); }
.anat { position:fixed; left:var(--rail); top:var(--hud); bottom:0; width:var(--anat-w); z-index:11; display:none; flex-direction:column; gap:12px; padding:18px 14px calc(14px + env(safe-area-inset-bottom)); border-radius:0; border-width:0 1px 0 0; overflow:hidden; }
.anat-head h2 { font-size:26px; margin-top:4px; }
.search { display:flex; align-items:center; gap:8px; position:relative; }
.search [data-icon] { position:absolute; left:14px; width:18px; height:18px; color:var(--sand); pointer-events:none; }
.search input { padding-left:42px; min-height:46px; font-size:16px; }
.zlist { list-style:none; margin:0; padding:0 2px 0 0; display:flex; flex-direction:column; gap:4px; overflow-y:auto; min-height:0; flex:1; scrollbar-width:thin; scrollbar-color:#3a3530 transparent; }
.zlist button { width:100%; min-height:50px; display:grid; grid-template-columns:22px 26px minmax(0, 1fr) auto; gap:10px; align-items:center; padding:6px 10px; background:none; border:1px solid transparent; border-radius:var(--r-s); text-align:left; color:var(--ink-2); transition:background .2s, border-color .2s; }
.zlist button:hover { background:rgba(240,237,232,.04); }
.zlist button[aria-pressed="true"] { border-color:var(--line-3); background:rgba(240,237,232,.08); color:var(--bone); }
.zlist .ck { width:20px; height:20px; border:1px solid var(--line-3); border-radius:5px; display:grid; place-items:center; color:var(--obsidian); }
.zlist .ck.on { background:var(--bone); border-color:var(--bone); }
.zlist .ck [data-icon] { width:14px; height:14px; }
.zlist .zi { width:26px; height:26px; color:var(--ink-2); }
.zlist .zn { display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.zlist .zn b { font-weight:500; font-size:16px; }
.zlist .zn small { font-size:12.5px; color:var(--sand); letter-spacing:.03em; }
.zlist .zc { display:flex; gap:6px; align-items:center; font:500 12px var(--mono); color:var(--sand); }
.zlist .zc [data-icon] { width:12px; height:12px; }
.zlist .sw { width:10px; height:10px; border-radius:3px; display:inline-block; }
.zlist .empty { color:var(--sand); font-size:15px; padding:8px 10px; }
body.pro.ws .rail { display:flex; }
body.pro.ws { --rail:var(--rail-w); }
@media (min-width:1000px) and (orientation:landscape) {
  body.pro.ws.anat-open:not([data-scene="revela"]) { --anat:var(--anat-w); }
  body.pro.ws.anat-open:not([data-scene="revela"]) .anat { display:flex; }
}
@media (max-width:999px), (orientation:portrait) {
  body.pro.ws.anat-drawer .anat { display:flex; z-index:25; width:min(320px, calc(100vw - var(--rail) - 24px)); box-shadow:24px 0 60px rgba(0,0,0,.6); animation:drawerIn .3s var(--ease) both; background:rgba(16,14,13,.94); }
}
@keyframes drawerIn { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:none; } }
@media (max-width:760px) { body.pro.ws { --rail:0px; } body.pro.ws .rail { display:none; } }
body.clean .panel, body.clean .tray, body.clean .anat { display:none !important; }
body.clean { --anat:0px !important; }
body.clean .work { grid-template-columns:1fr !important; grid-template-rows:1fr !important; }

/* capas */
.layers { display:flex; flex-direction:column; gap:6px; padding:14px; border-radius:var(--r); width:300px; }
.layers.pop { position:fixed; z-index:26; left:calc(var(--rail) + 10px); top:calc(var(--hud) + 10px); animation:popIn .2s var(--ease) both; }
.layers:not(.pop):not(.slotted) { display:none; }
.layers.slotted { width:auto; padding:0; background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.lay { display:grid; grid-template-columns:24px 78px minmax(0, 1fr) 48px; gap:10px; align-items:center; min-height:48px; }
.lay [data-icon] { width:22px; height:22px; color:var(--ink-3); }
.lay .ln { font-size:16px; }
.lay output { font:500 13px var(--mono); color:var(--sand); text-align:right; }
.lay input[type=range] { width:100%; height:44px; background:none; accent-color:var(--bone); -webkit-appearance:none; appearance:none; }
.lay input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:linear-gradient(90deg, var(--bone) var(--v, 100%), rgba(240,237,232,.16) var(--v, 100%)); }
.lay input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; margin-top:-9px; border-radius:50%; background:var(--bone); border:0; box-shadow:0 2px 8px rgba(0,0,0,.6); }
.layers.no3d .lay[data-l="skin"] { display:none; }

/* ficha contextual (zona o joya) */
.ficha { border-radius:var(--r); padding:16px; display:grid; grid-template-columns:52px minmax(0, 1fr) 44px; gap:10px 12px; align-items:start; box-shadow:inset 0 1px 0 var(--glass-hi); animation:riseIn .35s var(--ease) both; }
.ficha .ph { width:52px; height:52px; display:grid; place-items:center; background:radial-gradient(circle at 50% 40%, #2a2420, #120f0d 70%); border:1px solid var(--line); border-radius:50%; color:var(--ink-2); }
.ficha .ph img { max-width:40px; max-height:40px; } .ficha .ph [data-icon] { width:30px; height:30px; }
.ficha .nm { font:400 25px/1.1 var(--serif); }
.ficha .zn { font-size:15px; color:var(--sand); margin-top:4px; }
.ficha .x { min-width:44px; min-height:44px; display:grid; place-items:center; background:none; border:1px solid var(--line); border-radius:50%; color:var(--ink-2); padding:0; }
.ficha .x [data-icon] { width:18px; height:18px; }
.ficha .full { grid-column:1 / -1; }
.ficha .kv { grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:2px 0 0; font-size:15px; }
.ficha .kv dt { color:var(--sand); } .ficha .kv dd { margin:0; color:var(--ink-2); }
.ficha .flag { grid-column:1 / -1; display:flex; gap:8px; align-items:flex-start; font-size:14.5px; color:var(--ink-3); padding:9px 12px; border:1px dashed var(--line-2); border-radius:var(--r-s); }
.ficha .flag [data-icon] { width:18px; height:18px; margin-top:2px; }
.ficha .seg, .ficha .row, .ficha .heal, .ficha input, .ficha .pts { grid-column:1 / -1; }
.ficha .heal { font-size:15px; color:var(--ink-3); margin:0; }
.ficha .mono { font:400 13.5px var(--mono); color:var(--sand); grid-column:1 / -1; }
.ficha input { min-height:46px; font-size:16px; }
.ficha .pts { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:15px; color:var(--ink-2); }
.ficha .pts li { display:flex; gap:8px; align-items:center; } .ficha .pts [data-icon] { width:16px; height:16px; }
.ficha .grab { display:none; }
@media (max-width:760px) {
  .ficha { position:fixed; left:0; right:0; bottom:0; z-index:45; max-height:64vh; overflow:auto; border-radius:22px 22px 0 0; padding:22px 16px calc(16px + env(safe-area-inset-bottom)); background:#141211; backdrop-filter:none; -webkit-backdrop-filter:none; border-width:1px 0 0; box-shadow:0 -20px 60px rgba(0,0,0,.65); animation:sheetUp .36s var(--ease) both; }
  .ficha .btn { background:#1b1817; }
  .ficha .grab { display:block; position:absolute; top:8px; left:50%; width:40px; height:4px; margin-left:-20px; border-radius:2px; background:var(--line-3); }
}
@keyframes sheetUp { from { transform:translateY(100%); } to { transform:none; } }

/* mapeo */
#stepFit, #stepHave { display:flex; flex-direction:column; gap:14px; }
.pinstars { display:flex; gap:6px; }
.pinstars i { flex:1; height:4px; border-radius:2px; background:rgba(240,237,232,.14); transition:background .3s; }
.pinstars i.done { background:var(--bone); } .pinstars i.now { background:var(--ember); }
.pinguide { display:grid; grid-template-columns:104px 1fr; gap:16px; align-items:center; }
.pinguide canvas { width:104px; height:104px; background:#000; border:1px solid var(--line); border-radius:var(--r-s); }
.pinguide h2 { font-size:28px; }
.st-ic { width:22px; height:22px; } .st-ic.bone { color:var(--bone); } .st-ic.silver { color:var(--silver); } .st-ic.ember { color:var(--ember-hi); } .st-ic.sand { color:var(--sand); }
.marks { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.marks li { display:grid; grid-template-columns:44px 1fr 44px; gap:6px; align-items:center; }
.marks li input { min-height:44px; font-size:16px; padding:0 12px; }
.marks .stb, .marks .del { min-width:44px; min-height:44px; display:grid; place-items:center; background:transparent; border:1px solid var(--line); border-radius:var(--r-s); color:var(--bone); padding:0; }
.marks .stb [data-icon], .marks .del [data-icon] { width:20px; height:20px; }
.marks .coord { grid-column:2 / -1; font:400 13.5px var(--mono); color:var(--sand); margin-top:-4px; }
.marks li.empty-li { display:block; }
.marks .empty { color:var(--sand); font-size:16px; display:block; grid-column:1 / -1; }
@media (max-width:999px), (orientation:portrait) { #mapPanel .pinguide canvas { width:80px; height:80px; } .pinguide { grid-template-columns:80px 1fr; } #mapPanel h2 { font-size:25px; } }

/* diseño */
.design { grid-template-rows:minmax(0, 1fr) auto auto; }
.tray { position:relative; border-top:1px solid var(--line); background:linear-gradient(180deg, rgba(20,17,15,.94), rgba(11,10,9,.97)); padding:12px 0 10px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.presets { display:flex; gap:8px; padding:0 14px; overflow-x:auto; scrollbar-width:none; }
.presets::-webkit-scrollbar { display:none; }
.presets .chip { flex:none; border-radius:999px; }
.presets .inspire { margin-left:auto; flex:none; border-radius:999px; min-height:44px; }
.presets .inspire svg { color:var(--ember-hi); }
.jewels { display:flex; gap:10px; padding:2px 14px 6px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#3a3530 transparent; touch-action:pan-x; }
.jewel { flex:none; width:128px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 8px 10px; background:radial-gradient(70% 60% at 50% 34%, rgba(240,237,232,.08), rgba(0,0,0,0) 70%), #13100f; border:1px solid var(--line); border-radius:var(--r); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none; cursor:grab; transition:border-color .2s, transform .25s var(--ease), opacity .2s, box-shadow .2s; }
.jewel:hover { border-color:var(--line-2); transform:translateY(-2px); }
.jewel .ph { width:80px; height:80px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 50% 38%, #2c2521, #110e0c 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.55); }
.jewel img { max-width:62px; max-height:62px; pointer-events:none; filter:drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.jewel .nm { font-size:15px; line-height:1.2; text-align:center; color:#e8e2d7; min-height:36px; display:flex; align-items:center; justify-content:center; }
.jewel .pr { font:500 14px/1.2 var(--sans); font-variant-numeric:tabular-nums; color:var(--ink-2); text-align:center; } /* precio y «en consulta» con la misma familia */
.jewel .pr .mt { color:var(--sand); font-weight:400; }
.jewel[aria-pressed="true"] { border-color:var(--ember); box-shadow:0 0 0 1px rgba(201,168,76,.35), 0 10px 30px rgba(201,168,76,.12); }
.jewel.dim { opacity:.4; }
.jewel.dragging { opacity:.35; transform:scale(.94); }
#ghost { position:fixed; left:0; top:0; z-index:50; pointer-events:none; display:none; will-change:transform; }
#ghost img { display:block; filter:drop-shadow(0 10px 12px rgba(0,0,0,.55)); }
#ghost.on { display:block; }
#ghost.back { transition:transform .32s var(--ease), opacity .32s; opacity:0; }
.looks { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.looks .seg { gap:4px; }
.looks .chip { min-width:52px; justify-content:center; font:400 21px var(--serif); }
.looks .chip small { font:500 13px var(--mono); color:var(--sand); }
.btn.icon { padding:0 14px; }
.total { display:grid; grid-template-columns:auto 1fr; align-items:baseline; column-gap:12px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.t-lbl { font-size:16px; color:var(--sand); }
.t-val { font:400 42px/1 var(--serif); justify-self:end; font-variant-numeric:tabular-nums; }
.t-sub { grid-column:1 / -1; font-size:15px; color:var(--sand); margin-top:6px; }
.cards { display:flex; flex-direction:column; gap:8px; }
.cards:empty { display:none; }
.card { border:1px solid rgba(154,148,138,.4); background:rgba(154,148,138,.07); border-radius:var(--r-s); padding:12px 12px 12px 14px; display:grid; grid-template-columns:22px 1fr 44px; gap:6px 10px; align-items:start; animation:cardIn .32s var(--ease) both; }
.card [data-icon] { width:22px; height:22px; color:var(--sand); margin-top:2px; }
.card p { font-size:15.5px; line-height:1.45; color:#e6e0d6; }
.card .x { min-width:44px; min-height:44px; margin:-10px -8px 0 0; background:none; border:0; color:var(--sand); display:grid; place-items:center; }
.card .x [data-icon] { width:16px; height:16px; margin:0; }
.card .acts { grid-column:2 / -1; display:flex; gap:8px; flex-wrap:wrap; }
.card .acts .btn { min-height:44px; font-size:15px; padding:0 12px; }
@keyframes cardIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.row.small .btn { min-height:44px; font-size:15px; }
.pro-only { display:none; }
body.pro .pro-only { display:flex; flex-direction:column; gap:14px; }
@media (min-width:1000px) and (orientation:landscape) {
  .design { grid-template-columns:minmax(0, 1fr) var(--panel-w); grid-template-rows:minmax(0, 1fr) auto; grid-template-areas:"stage panel" "tray panel"; }
  .design .stage { grid-area:stage; } .design .tray { grid-area:tray; } .design .panel { grid-area:panel; }
}
@media (max-width:999px), (orientation:portrait) {
  .design .panel { height:31vh; max-height:none; gap:10px; } /* alto fijo: al aparecer la ficha el escenario no cambia ni la oreja se reencaja */
  .design .total { padding:8px 0; } .design .t-val { font-size:34px; }
}
@media (max-width:760px) {
  .jewel { width:112px; padding:8px 6px; gap:4px; } .jewel .ph { width:68px; height:68px; } .jewel img { max-width:52px; max-height:52px; } .jewel .nm { font-size:14px; line-height:1.18; min-height:33px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .jewel .pr { font-size:13px; }
  .tray { padding:8px 0 6px; gap:8px; } .presets { padding:0 10px; } .jewels { padding:2px 10px 4px; gap:8px; }
  .design .panel { height:24vh; padding-top:10px; }
  .design .total { grid-template-columns:auto 1fr; padding:6px 0; } .design .t-val { font-size:30px; } .design .t-sub { margin-top:2px; font-size:14px; }
  .looks .btn.icon span:not([data-icon]) { display:none; }
}

/* constelación: Actual · Propuesta · Evolución (tres miniaturas comparables) */
.tri { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.tri figure, .tri button { margin:0; padding:0; display:flex; flex-direction:column; background:rgba(10,9,8,.6); border:1px solid var(--line); border-radius:var(--r-s); overflow:hidden; text-align:center; color:inherit; }
.tri canvas { width:100%; aspect-ratio:3 / 4; display:block; }
.tri .cap { padding:7px 4px 9px; display:flex; flex-direction:column; gap:1px; }
.tri .cap b { font:500 13px var(--sans); letter-spacing:.14em; text-transform:uppercase; }
.tri .cap span { font-size:13px; color:var(--sand); }
.tri button { min-height:44px; transition:border-color .2s, transform .2s var(--ease); }
.tri button[aria-pressed="true"] { border-color:var(--line-3); box-shadow:inset 0 0 0 1px rgba(240,237,232,.18); }
.tri.big .cap b { font-size:13.5px; }
/* paleta de joyería */
.pal { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.pal li { display:grid; grid-template-columns:48px minmax(0, 1fr) auto; gap:12px; align-items:center; padding:6px 10px 6px 6px; border:1px solid var(--line); border-radius:var(--r-s); background:rgba(10,9,8,.45); }
.pal .ph { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 50% 40%, #2a2420, #110e0c 70%); }
.pal .ph img { max-width:36px; max-height:36px; } .pal .ph [data-icon] { width:28px; height:28px; color:var(--ember-hi); }
.pal .nm { font-size:15.5px; line-height:1.25; } .pal .nm small { display:block; font-size:13.5px; color:var(--sand); }
.pal .pr { font:500 14px var(--mono); color:var(--bone); text-align:right; white-space:nowrap; } .pal .pr small { display:block; font:400 12px var(--sans); color:var(--sand); }
.pal-empty { font-size:15px; color:var(--sand); margin:0; }
/* plan por fases (línea de tiempo vertical) */
.plan { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.plan li { display:grid; grid-template-columns:30px minmax(0, 1fr); gap:12px; position:relative; padding-bottom:14px; }
.plan li::before { content:''; position:absolute; left:14.5px; top:30px; bottom:0; width:1px; background:var(--line-2); }
.plan li:last-child::before { display:none; } .plan li:last-child { padding-bottom:0; }
.plan .nd { width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; background:var(--solid); }
.plan .nd [data-icon] { width:16px; height:16px; }
.plan .nd.ember { border-color:rgba(201,168,76,.6); } .plan .nd.ember [data-icon] { color:var(--ember-hi); }
.plan h3 { margin:3px 0 2px; font:400 21px/1.15 var(--serif); }
.plan h3 small { font:500 12px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--sand); margin-left:6px; }
.plan p { font-size:15px; color:var(--ink-3); margin:0; }
.plan .zs { margin:4px 0 0; padding:0; list-style:none; font-size:14.5px; color:var(--ink-2); }
.plan .zs li { display:block; padding:0; } .plan .zs li::before { display:none; }
.plan .zs em { font-style:normal; color:var(--sand); }
/* cuidado */
.care { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; counter-reset:c; }
.care li { display:grid; grid-template-columns:32px minmax(0, 1fr); gap:10px; }
.care .k { font:500 13px var(--mono); color:var(--sand); padding-top:3px; }
.care b { font:400 19px/1.2 var(--serif); display:block; }
.care p { font-size:15px; color:var(--ink-3); margin:2px 0 0; }

/* 3D */
.cosmic { background:radial-gradient(60% 55% at 50% 45%, rgba(70,56,110,.32), rgba(10,10,14,0) 70%), radial-gradient(35% 30% at 70% 30%, rgba(60,90,150,.16), transparent 70%); }
#v3d { position:absolute; inset:0; }
#v3d canvas { display:block; touch-action:none; }
.labels3d { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:visible; }
.labels3d .ld { fill:none; stroke:rgba(240,237,232,.72); stroke-width:1; }
.labels3d .pl { fill:rgba(12,11,10,.8); stroke:rgba(240,237,232,.3); stroke-width:1; }
.labels3d .pl.ideal { stroke:rgba(227,196,110,.85); }
.labels3d .t1 { font:italic 600 17px var(--ritual); fill:var(--bone); }
.labels3d .t2 { font:500 10.5px var(--sans); letter-spacing:.14em; fill:#b9b2a6; }
.labels3d .zl { font:500 13px var(--sans); letter-spacing:.12em; fill:var(--bone); }
.credit3d { position:absolute; left:12px; top:10px; right:96px; margin:0; font-size:13px; color:var(--sand); pointer-events:none; text-shadow:0 1px 2px #000; z-index:2; }
.tabs3d { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:3; display:flex; gap:4px; padding:4px; border-radius:999px; background:rgba(14,12,11,.78); border:1px solid var(--line-2); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.tabs3d button { min-height:44px; min-width:44px; padding:0 16px; display:flex; align-items:center; gap:8px; background:none; border:0; border-radius:999px; color:var(--sand); font-size:15px; letter-spacing:.03em; transition:background .2s, color .2s; }
.tabs3d button [data-icon] { width:20px; height:20px; }
.tabs3d button[aria-selected="true"] { background:rgba(240,237,232,.12); color:var(--bone); }
.tabp { display:flex; flex-direction:column; gap:14px; }
.mini-tray { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.mini-tray button { min-height:66px; display:grid; place-items:center; padding:6px; background:#13100f; border:1px solid var(--line); border-radius:var(--r-s); }
.mini-tray button img { max-width:42px; max-height:42px; }
.mini-tray button[aria-checked="true"] { border-color:var(--ember); box-shadow:0 0 0 1px rgba(201,168,76,.3); }
.mini-tray .gen { width:36px; height:36px; color:var(--ember-hi); }
@media (max-width:760px) {
  .credit3d { right:64px; font-size:12px; } .tabs3d { bottom:8px; } .tabs3d button { padding:0 12px; font-size:14px; }
  .mini-tray { grid-template-columns:repeat(7, minmax(44px, 1fr)); gap:5px; } .mini-tray button { min-height:50px; min-width:44px; padding:4px; } .mini-tray button img { width:100%; height:32px; max-width:34px; max-height:32px; object-fit:contain; }
  #v3dPanel h2, #v3dPanel .lead { display:none; } #v3dPanel { max-height:34vh; }
}

/* plan + revelación */
.reveal .stage { touch-action:auto; }
.plate-wrap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:18px; opacity:0; transition:opacity .6s var(--ease); }
.plate-wrap.on { opacity:1; }
.plate-wrap img, .plate-wrap canvas { max-width:100%; max-height:100%; box-shadow:0 24px 70px rgba(0,0,0,.7); border:1px solid var(--line); border-radius:6px; }
.plate-wrap img { cursor:zoom-in; }
.plate-wrap.off { opacity:0 !important; pointer-events:none; }
.phase-tag { position:absolute; left:50%; top:14px; transform:translateX(-50%); margin:0; padding:8px 16px; border-radius:999px; background:rgba(12,11,10,.84); border:1px solid var(--line-2); font-size:14px; letter-spacing:.14em; text-transform:uppercase; z-index:2; white-space:nowrap; }
.reveal .panel .cta.col .primary { transition:opacity .25s, transform .25s var(--ease); min-height:56px; font-size:17px; }
#rvPanel.pre .cta.col .primary { opacity:0; transform:translateY(6px); }
#rvPanel .seg .chip { flex:1; justify-content:center; }
.zoom { position:fixed; inset:0; z-index:70; background:#050507; display:flex; flex-direction:column; }
.zoom-box { flex:1; overflow:auto; display:grid; place-items:center; padding:12px; touch-action:pan-x pan-y pinch-zoom; -webkit-overflow-scrolling:touch; }
.zoom-box img { max-width:100%; max-height:100%; cursor:zoom-in; display:block; }
.zoom.big .zoom-box { place-items:start; }
.zoom.big .zoom-box img { max-width:none; max-height:none; width:1080px; cursor:zoom-out; }
.zoom > .btn { margin:0 16px calc(12px + env(safe-area-inset-bottom)); }
#rvCv { transition:opacity .5s; } #rvCv.off { opacity:0; }
@media (max-width:999px), (orientation:portrait) { .reveal .panel { max-height:44vh; } .reveal .cta.col { display:grid; grid-template-columns:1fr 1fr; } .reveal .cta.col .primary, .reveal .cta.col .seg { grid-column:1 / -1; } .reveal h2 { font-size:26px; } }

/* diálogo comparar */
.dialog { position:fixed; inset:0; z-index:40; background:rgba(5,5,7,.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); display:grid; place-items:center; padding:16px; overflow:auto; }
.dialog-in { width:min(1180px, 100%); display:flex; flex-direction:column; gap:14px; }
.dialog-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.cmp { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.cmp figure { margin:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:rgba(14,13,13,.9); display:flex; flex-direction:column; }
.cmp figure.on { border-color:var(--line-3); }
.cmp canvas { width:100%; aspect-ratio:3 / 4; display:block; }
.cmp figcaption { padding:10px 12px 12px; display:flex; flex-direction:column; gap:8px; }
.cmp figcaption b { font:400 25px var(--serif); } .cmp figcaption span { font-size:15px; color:var(--sand); }
@media (max-width:760px) { .cmp { grid-template-columns:1fr; } .cmp canvas { aspect-ratio:4 / 3; } }

#toast { position:fixed; left:50%; top:calc(var(--hud) + 12px); transform:translate(-50%, -12px); z-index:60; background:#100f0f; border:1px solid var(--line-2); border-radius:var(--r-s); padding:11px 16px; font-size:16px; max-width:min(460px, calc(100vw - 32px)); opacity:0; pointer-events:none; transition:opacity .25s, transform .25s var(--ease); display:flex; gap:12px; align-items:center; }
#toast.on { opacity:1; transform:translate(-50%, 0); }
#toast .btn { pointer-events:auto; }
#toast.docked { left:var(--tx); top:var(--ty); width:var(--tw); max-width:none; transform:translateY(-8px); justify-content:center; text-align:center; }
#toast.docked.on { transform:none; }
.stage .hint { transition:opacity .2s; } .stage.toasting .hint { opacity:0; }
#toast .btn { min-height:44px; font-size:15px; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.15s !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.15s !important; }
  .sello-big { opacity:1; }
}