/* ============================================================
   ReelsLab — Botones de navegación destacados (compartido)
   Inclúyelo DESPUÉS del <style> de cada página:
   <link rel="stylesheet" href="assets/nav.css">
   ============================================================ */

/* Volver al Panel = grande y llamativo (violeta→cian) */
a.back{
  display:inline-flex!important; align-items:center!important; gap:6px!important;
  font-size:14px!important; font-weight:800!important; color:#fff!important;
  border:0!important; border-radius:13px!important; padding:12px 20px!important;
  background:linear-gradient(100deg,#7c3aed,#0891b2)!important;
  box-shadow:0 6px 22px rgba(124,58,237,.45)!important; transition:.18s!important;
}
a.back:hover{ transform:translateY(-1px)!important; filter:brightness(1.08)!important; }

/* El botón hacia el ESTUDIO / LABORATORIO = color especial (ámbar/dorado) */
a.back[href*="creador_de_reels_cosmos"]{
  background:linear-gradient(100deg,#fbbf24,#f59e0b)!important;
  color:#3a2400!important;
  box-shadow:0 6px 22px rgba(245,158,11,.5)!important;
}

/* Botón "Volver al Panel" del propio Estudio (usa .panel-btn): más grande */
a.panel-btn{
  font-size:14px!important; font-weight:800!important; padding:13px 22px!important;
  border-radius:13px!important;
}

/* ============================================================
   HEADER DE MARCA UNIFICADO — páginas con barra .top
   (logo animado a la izquierda · idioma · botón Volver al Panel
   a la derecha, con el MISMO orden y estilo en todas las páginas)
   ============================================================ */
.top{ gap:11px!important; align-items:center!important; }
.top .logo{
  order:0; margin-right:auto!important;
  display:flex!important; align-items:center!important; gap:10px!important;
  font-weight:800!important; font-size:17px!important;
}
.top .logo img{
  width:34px!important; height:34px!important;
  filter:drop-shadow(0 0 12px rgba(139,92,246,.55))!important;
}
.top .logo b{
  background:linear-gradient(100deg,#fff,#67e8f9)!important;
  -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important;
}
/* selector de idioma (mismo look en todas) */
.top .lang, .top .lang2, .top .lang3{
  order:1; margin-left:0!important; align-self:center;
  background:rgba(0,0,0,.32)!important; border:1px solid var(--glass-line,rgba(140,130,220,.2))!important;
  border-radius:10px!important; overflow:hidden;
}
.top .lang button, .top .lang2 button, .top .lang3 button{ font-weight:800!important; }
/* botón Volver al Panel siempre al final (a la derecha) */
.top .back{ order:2; margin-left:2px!important; }

/* ============================================================
   Candado por CRÉDITOS — "ver pero difuminado" (compartido)
   Aplica la clase .cr-locked a cualquier contenedor:
   se difumina, se bloquea el clic y aparece un sello "💎 Solo con créditos".
   ============================================================ */
.cr-locked{ position:relative!important; }
.cr-locked > *:not(.cr-lockbar){ filter:blur(6px) saturate(.7)!important; opacity:.5!important; pointer-events:none!important; user-select:none!important; }
.cr-locked::after{
  content:''!important;
  position:absolute!important; inset:0!important; z-index:4!important; pointer-events:none!important;
  background:radial-gradient(130% 120% at 50% 0,rgba(124,58,237,.22),rgba(3,2,10,.55))!important;
  border-radius:inherit!important;
}
/* CTA clicable centrado encima del contenido difuminado */
.cr-lockbar{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:6;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center;
}
.cr-lockbar a, .cr-lockbar button{
  border:0; cursor:pointer; font-family:inherit; font-weight:800; font-size:12.5px;
  color:#3a2400; background:linear-gradient(100deg,#fde68a,#f59e0b);
  border-radius:11px; padding:9px 15px; box-shadow:0 6px 20px rgba(245,158,11,.45);
  text-decoration:none; transition:.18s;
}
.cr-lockbar a:hover, .cr-lockbar button:hover{ transform:translateY(-1px); filter:brightness(1.05); }