/* ============================================================
   2. BARRA FIJA
   ============================================================ */
.topbar{position:fixed; top:0; left:0; right:0; z-index:80;
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  background:linear-gradient(180deg, rgba(10,8,6,.92), rgba(10,8,6,.66));
  border-bottom:1px solid var(--line-soft); transition:.4s var(--ease)}
.topbar.is-stuck{background:rgba(10,8,6,.97); border-bottom-color:var(--line); box-shadow:0 16px 44px -30px #000}
.topbar__in{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:11px 0}

.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex:1 1 auto; min-width:0}
.brand__mark{width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center; border-radius:13px; background:radial-gradient(circle at 50% 45%, rgba(242,172,94,.16), transparent 70%)}
.brand__mark img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 10px rgba(242,172,94,.35))}
.brand__name{font-family:var(--display); font-weight:800; font-size:1.06rem; letter-spacing:-.03em; white-space:nowrap;
  background:linear-gradient(100deg,var(--oro-luz),var(--oro) 45%,var(--oro-med)); -webkit-background-clip:text; background-clip:text; color:transparent}

.switch-wrap{flex:0 0 auto}
.switch{display:flex; gap:4px; padding:4px; background:rgba(242,172,94,.06); border:1px solid var(--line); border-radius:999px}
.switch button{flex:1; appearance:none; border:0; cursor:pointer; background:transparent; color:var(--muted);
  font-family:var(--display); font-weight:600; font-size:.95rem; padding:10px 22px; border-radius:999px; min-height:var(--tap); transition:.32s var(--ease)}
.switch button[aria-selected="true"]{background:linear-gradient(140deg,var(--oro-luz),var(--oro) 55%,var(--oro-med)); color:#1A0F04; box-shadow:0 6px 20px -8px var(--oro)}

.topnav{display:flex; align-items:center; gap:20px}
.topnav a{font-size:.9rem; color:var(--muted); text-decoration:none; transition:color .25s}
.topnav a:hover{color:var(--oro)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--display); font-weight:600;
  font-size:.95rem; padding:13px 22px; min-height:var(--tap); border-radius:999px; text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:.3s var(--ease); white-space:nowrap}
.btn--solid{background:linear-gradient(140deg,var(--oro-luz),var(--oro) 52%,var(--oro-med)); color:#1A0F04; box-shadow:0 12px 30px -14px var(--oro)}
.btn--solid:hover{transform:translateY(-2px); box-shadow:0 18px 38px -14px var(--oro)}
.btn--ghost{border-color:var(--line); color:var(--oro); background:linear-gradient(180deg, rgba(242,172,94,.07), rgba(242,172,94,.02))}
.btn--ghost:hover{border-color:var(--oro); background:rgba(242,172,94,.13)}
.btn--sm{padding:10px 17px; font-size:.86rem; min-height:42px}
.btn:disabled{opacity:.32; cursor:not-allowed; transform:none !important; box-shadow:none}

.burger{display:none; width:44px; height:44px; flex:0 0 auto; border-radius:12px; border:1px solid var(--line); background:rgba(242,172,94,.05); cursor:pointer; padding:0}
.burger span{display:block; width:16px; height:1.5px; background:var(--oro); margin:3.5px auto}

@media(max-width:1040px){ .topnav{display:none} .burger{display:block} }
@media(max-width:860px){
  html{scroll-padding-top:132px}
  .topbar__in{gap:10px; padding:9px 0}
  .brand__mark{width:38px; height:38px}
  .brand__name{font-size:1rem}
  .topbar .btn--solid{display:none}
  .switch-wrap{order:5; flex:1 0 100%; padding-bottom:4px}
  .switch button{padding:11px 10px; font-size:.94rem}
}
.drawer{display:none; border-top:1px solid var(--line); padding:8px 0 20px; background:rgba(10,8,6,.98)}
.drawer.open{display:block}
.drawer a{display:flex; align-items:center; min-height:var(--tap); text-decoration:none; font-family:var(--display); font-size:1.05rem; border-bottom:1px solid var(--line-soft)}

/* ============================================================
   3. PANEL / VISTAS
   ============================================================ */
.shell{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%);
  box-shadow:0 40px 90px -50px #000, inset 0 1px 0 rgba(242,172,94,.09);
  padding:clamp(20px,4vw,44px)}
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}

[data-vista]{display:none}
body[data-mundo="dulce"] [data-vista="dulce"], body[data-mundo="pelu"] [data-vista="pelu"]{display:block}
li[data-vista]{display:none}
body[data-mundo="dulce"] li[data-vista="dulce"], body[data-mundo="pelu"] li[data-vista="pelu"]{display:list-item}