/* =====================================================================
   PROYECTUM IA · Sistema de diseño compartido
   ---------------------------------------------------------------------
   Lo usan index, plataforma, resultados, ia, publicaciones y paquetes.
   Cada página conserva en su <style> solo lo que es exclusivo de ella;
   todo lo que se repetía (tokens, nav, hotbar, footer, cookies, login,
   modales, botones, toast, animaciones) vive aquí para que las seis
   páginas se vean y se muevan igual.

   Reglas del sistema (para no romper la consistencia):
   - Un solo acento: cian de marca (--primary). El dorado (--gold) solo
     para precios y el botón "Acceso" del hotbar.
   - Radios: controles 12px, tarjetas 18px, modales/paneles 24px,
     pills y chips 999px.
   - Tipografía: Space Grotesk (títulos), Geist (texto e interfaz),
     Geist Mono (solo números y etiquetas pequeñas).
   - Tema: oscuro por identidad de marca (el logo es blanco + cian).
   - Toda animación respeta prefers-reduced-motion.
   ===================================================================== */

:root{
  color-scheme: dark;

  /* Superficies */
  --bg:#04141a;
  --bg-alt:#071f27;
  --panel:#0a2933;
  --panel-2:#0d3340;
  --line:#134753;
  --line-soft:#0e3642;

  /* Marca */
  --primary:#22FDF9;
  --primary-ink:#03181c;
  --primary-dim:#22fdf933;
  --primary-soft:#22fdf912;
  --secondary:#035266;
  --gold:#ffc94a;

  /* Texto */
  --text:#eafffd;
  --text-dim:#93b9be;
  --text-faint:#6a9096;

  /* Estados */
  --danger:#ff8a80;
  --ok:#8ff0be;

  /* Forma */
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:24px;
  --radius-pill:999px;

  /* Tipografía */
  --ff-display:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-body:'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Layout */
  --wrap:1200px;
  --gutter:24px;
  --nav-h:68px;
  --hotbar-h:68px;

  /* Movimiento */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);

  /* Sombras teñidas del fondo (nada de negro puro) */
  --shadow-sm:0 8px 24px -12px rgba(1,10,13,.8);
  --shadow-lg:0 32px 80px -32px rgba(1,10,13,.95);
  --glow:0 10px 34px -12px rgba(34,253,249,.55);
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
/* Solo scroll vertical: Safari de iPhone ignora overflow-x del body si el html no lo tiene, y los paneles
   escondidos fuera de pantalla (Explora, cajones) dejaban deslizar de lado. "clip" no crea contenedor de
   scroll, así que no rompe position:sticky; "hidden" queda de respaldo para navegadores viejos. */
html,body{overflow-x:hidden;overflow-x:clip;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;min-height:100vh;min-height:100dvh;
  background:var(--bg);color:var(--text);
  font-family:var(--ff-body);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,textarea,select{font:inherit;color:inherit;}
button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
h1,h2,h3,h4{font-family:var(--ff-display);margin:0;letter-spacing:-.02em;line-height:1.15;font-weight:600;}
p{margin:0;}
::selection{background:var(--primary);color:var(--primary-ink);}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}
@media(max-width:640px){:root{--gutter:16px;}}

/* Énfasis de marca: cian sólido (antes era un degradado cian-dorado).
   Se mantiene el nombre de clase para no tocar el HTML existente. */
.grad-text{color:var(--primary);background:none;-webkit-text-fill-color:currentColor;}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono);font-size:.75rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--primary);
}
.lead{color:var(--text-dim);font-size:clamp(1rem,.96rem + .3vw,1.125rem);line-height:1.65;max-width:58ch;}

/* ---------------------------------------------------------------------
   Botones
   Primario = cian sólido con texto tinta. Secundario = contorno.
   Los alias mantienen funcionando las clases que ya usa cada página.
   --------------------------------------------------------------------- */
.btn,
.btn-primary,.btn-ghost,
.pill-btn,.nav-login,.login-submit,.save-btn,.cancel-btn,.publish-btn,
.pkg-cta,.cookie-accept,.compra-submit,.admin-save,.admin-reset,.ml-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ff-body);font-weight:600;font-size:.9375rem;letter-spacing:-.005em;line-height:1.1;
  padding:13px 22px;border-radius:var(--radius-sm);border:1px solid transparent;
  white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease-out),background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .25s ease;
}
.btn svg,.pill-btn svg,.nav-login svg,.pkg-cta svg,.ml-btn svg{width:17px;height:17px;flex:none;transition:transform .25s var(--ease-out);}

.btn-primary,.pill-btn.primary,.nav-login,.login-submit,.save-btn,.publish-btn,
.pkg-cta,.cookie-accept,.compra-submit,.admin-save,.ml-btn{
  background:var(--primary);color:var(--primary-ink);border-color:var(--primary);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 24px -14px rgba(34,253,249,.7);
}
.btn-primary:hover,.pill-btn.primary:hover,.nav-login:hover,.login-submit:hover,.save-btn:hover,.publish-btn:hover,
.pkg-cta:hover,.cookie-accept:hover,.compra-submit:hover,.admin-save:hover,.ml-btn:hover{
  transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,var(--glow);
}
.btn-primary:hover svg,.pkg-cta:hover svg,.ml-btn:hover svg,.nav-login:hover svg{transform:translateX(3px);}

.btn-ghost,.pill-btn,.cancel-btn,.admin-reset{
  background:rgba(10,41,51,.55);color:var(--text);border-color:var(--line);
}
.btn-ghost:hover,.pill-btn:hover,.cancel-btn:hover,.admin-reset:hover{border-color:var(--primary);color:var(--text);transform:translateY(-1px);}

.btn:active,.btn-primary:active,.btn-ghost:active,.pill-btn:active,.nav-login:active,.login-submit:active,
.save-btn:active,.cancel-btn:active,.publish-btn:active,.pkg-cta:active,.cookie-accept:active,.compra-submit:active,.ml-btn:active{
  transform:translateY(0) scale(.98);
}
.btn:disabled,.pill-btn:disabled,.login-submit:disabled,.save-btn:disabled,.publish-btn:disabled,.compra-submit:disabled{
  opacity:.5;cursor:not-allowed;transform:none !important;box-shadow:none;
}
.pill-btn{padding:10px 16px;font-size:.875rem;}
.btn-lg{padding:16px 28px;font-size:1rem;border-radius:14px;}

/* ---------------------------------------------------------------------
   Navegación superior (PC)
   --------------------------------------------------------------------- */
.site-nav{
  position:sticky;top:0;left:0;width:100%;z-index:500;
  padding-top:env(safe-area-inset-top);
  background:rgba(4,20,26,.78);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid rgba(19,71,83,.75);
  view-transition-name:site-nav;
}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;height:var(--nav-h);
  padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
}
.nav-brand{
  justify-self:start;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--ff-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.015em;color:var(--text);
  white-space:nowrap;
}
.nav-brand img{width:34px;height:34px;flex:none;transition:transform .5s var(--ease-spring);}
.nav-brand:hover img{transform:rotate(-8deg) scale(1.06);}
.nav-brand b{color:var(--primary);font-weight:700;}

.nav-links{display:flex;align-items:center;gap:2px;}
.nav-links a{
  position:relative;display:inline-flex;align-items:center;
  font-family:var(--ff-body);font-size:.9375rem;font-weight:500;letter-spacing:-.005em;
  color:var(--text-dim);padding:10px 16px;border-radius:var(--radius-pill);white-space:nowrap;
  transition:color .2s ease,background-color .2s ease;
}
.nav-links a:hover{color:var(--text);background:rgba(10,41,51,.8);}
.nav-links a.active,.nav-links a[aria-current="page"]{color:var(--text);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);}
.nav-links a.active::after,.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:50%;bottom:5px;width:16px;height:2px;border-radius:2px;
  background:var(--primary);transform:translateX(-50%);
}
/* Enlaces que requieren sesión (index los marca con .auth-locked) */
.nav-links a.auth-locked{color:var(--text-faint);}
.nav-links a.auth-locked:hover{color:var(--text-dim);}

.nav-account,.header-right{justify-self:end;display:flex;align-items:center;gap:10px;flex:none;}
.nav-login{padding:11px 18px;font-size:.9rem;}
.nav-login-short{display:none;}
.nav-toggle{display:none !important;}
/* Botón de idioma EN/ES (lo agrega /assets/i18n.js) */
.lang-btn{min-width:40px;min-height:40px;padding:0 10px;border-radius:var(--radius-pill);border:1px solid var(--line);background:transparent;
  font-family:var(--ff-mono,var(--ff-body));font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--text-dim);cursor:pointer;
  transition:color .2s ease,border-color .2s ease;}
.lang-btn:hover{color:var(--text);border-color:var(--primary);}
.lang-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

/* Perfil (avatar + menú) */
.nav-profile{position:relative;display:none;}
.nav-profile-btn{
  width:40px;height:40px;border-radius:50%;padding:0;flex:none;
  border:1px solid var(--line);background:var(--panel);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease,transform .25s var(--ease-out);
}
.nav-profile-btn:hover{border-color:var(--primary);transform:translateY(-1px);}
.nav-avatar{
  width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--ff-display);font-weight:700;font-size:.9rem;color:var(--primary-ink);
  background:linear-gradient(140deg,var(--primary),#9ffcf9);
}
.nav-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.nav-profile-menu{
  position:absolute;top:calc(100% + 12px);right:0;min-width:240px;z-index:520;
  background:rgba(7,31,39,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:16px;padding:8px;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;
  transition:opacity .2s ease,transform .25s var(--ease-out),visibility .2s;
}
.nav-profile-menu.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
.nav-profile-email{
  font-family:var(--ff-mono);font-size:.72rem;color:var(--text-dim);
  padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px;word-break:break-all;
}
.nav-profile-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  font-family:var(--ff-body);font-size:.9rem;font-weight:500;color:var(--text);
  padding:11px 10px;border-radius:10px;background:none;border:none;text-decoration:none;
  transition:background-color .15s ease;
}
.nav-profile-item:hover{background:var(--panel);}
.nav-profile-item.nav-profile-admin{color:var(--gold);}
.nav-profile-logout{color:var(--danger);}
.admin-tag{
  font-family:var(--ff-mono);font-size:.62rem;font-weight:600;color:var(--primary-ink);
  background:var(--primary);padding:2px 8px;border-radius:var(--radius-pill);margin-left:4px;
}

/* Créditos Neo (pia.js pinta el saldo; sin sesión dice "Créditos") */
.nav-credits{
  display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px 0 11px;flex:none;
  border-radius:var(--radius-pill);border:1px solid var(--line);background:rgba(10,41,51,.6);
  color:var(--text-dim);font-size:.875rem;font-weight:500;white-space:nowrap;
  transition:border-color .2s ease,color .2s ease,transform .25s var(--ease-out);
}
.nav-credits:hover{border-color:var(--primary);color:var(--text);transform:translateY(-1px);}
.nav-credits:active{transform:scale(.97);}
.nav-credits svg{width:18px;height:18px;flex:none;color:var(--primary);}
.nav-credits .nc-dot{display:none;width:6px;height:6px;border-radius:50%;background:var(--ok);animation:piaBreath 2.8s ease-in-out infinite;}
.nav-credits.has-balance{color:var(--text);font-family:var(--ff-mono);font-size:.84rem;font-variant-numeric:tabular-nums;}
.nav-credits.has-balance .nc-dot{display:block;}
@keyframes piaBreath{0%,100%{opacity:.35;transform:scale(.75);}50%{opacity:1;transform:scale(1);}}
/* Tablet (enlaces + cuenta en una sola fila) y móvil angosto: el chip sin sesión queda solo con el ícono */
@media(max-width:420px),(min-width:861px) and (max-width:1080px){
  .nav-credits{padding:0 11px;}
  .nav-credits:not(.has-balance) [data-credits]{display:none;}
}
@media(min-width:861px) and (max-width:1000px){
  .nav-login-full{display:none;}
  .nav-login-short{display:inline;}
}

/* Tablet: enlaces más compactos */
@media(max-width:1080px){
  .nav-links a{padding:9px 12px;font-size:.9rem;}
}
/* Móvil: el hotbar inferior reemplaza a los enlaces */
@media(max-width:860px){
  :root{--nav-h:60px;}
  .nav-inner{grid-template-columns:1fr auto;}
  .nav-links{display:none !important;}
  .nav-login{padding:10px 15px;font-size:.875rem;}
  .nav-profile-menu{right:-4px;}
}
@media(max-width:380px){
  .nav-brand{font-size:.98rem;gap:8px;}
  .nav-brand img{width:30px;height:30px;}
  .nav-login-full{display:none;}
  .nav-login-short{display:inline;}
}

/* ---------------------------------------------------------------------
   Hotbar móvil (barra de pestañas tipo app)
   --------------------------------------------------------------------- */
.mobile-hotbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:600;
  background:rgba(4,20,26,.88);
  -webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);
  border-top:1px solid rgba(19,71,83,.85);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  view-transition-name:hotbar;
}
.hotbar-row{display:flex;align-items:stretch;justify-content:space-between;max-width:560px;margin:0 auto;gap:2px;}
.hotbar-item{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:8px 2px 6px;border-radius:14px;background:none;border:none;
  color:var(--text-dim);font-family:var(--ff-body);font-size:.6875rem;font-weight:500;letter-spacing:.005em;
  transition:color .2s ease,background-color .2s ease,transform .2s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.hotbar-item svg{width:22px;height:22px;stroke-width:1.8;flex:none;}
.hotbar-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.hotbar-item.active{color:var(--primary);background:var(--primary-soft);}
.hotbar-item:active{transform:scale(.94);}
.hotbar-item.buy .hotbar-icon-wrap{
  width:42px;height:42px;border-radius:50%;margin-top:-20px;
  display:flex;align-items:center;justify-content:center;color:var(--primary-ink);
  background:var(--primary);border:3px solid var(--bg);
  box-shadow:0 8px 20px -6px rgba(34,253,249,.7);
}
.hotbar-item.buy .hotbar-icon-wrap svg{width:20px;height:20px;stroke:currentColor;}
.hotbar-item.buy span{color:var(--gold);font-weight:600;}
.hotbar-item.auth-locked{color:var(--text-faint);opacity:.6;}
.hotbar-item.auth-locked .hotbar-icon-wrap{background:#3e4b4f;box-shadow:none;}
@media(max-width:860px){
  .mobile-hotbar{display:block;}
  body{padding-bottom:calc(var(--hotbar-h) + env(safe-area-inset-bottom));}
}

/* ---------------------------------------------------------------------
   Encabezado de página (plataforma, resultados, ia, comunidad, paquetes)
   --------------------------------------------------------------------- */
.page-head{
  position:relative;overflow:hidden;
  padding:clamp(40px,6vw,76px) 0 clamp(28px,4vw,44px);
  border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(52% 90% at 88% -10%, rgba(34,253,249,.10), transparent 70%),
    radial-gradient(40% 70% at 0% 110%, rgba(3,82,102,.35), transparent 70%);
}
.page-head-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px 48px;}
.page-head h1{
  font-size:clamp(2.1rem,1.3rem + 3vw,3.5rem);line-height:1.04;letter-spacing:-.035em;font-weight:600;
  margin-top:14px;max-width:18ch;text-wrap:balance;
}
.page-head .lead{margin-top:16px;}
.page-head-aside{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
@media(max-width:760px){
  .page-head-inner{grid-template-columns:1fr;align-items:start;}
  .page-head-aside{justify-content:flex-start;}
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--line-soft);background:var(--bg-alt);
  padding:48px 0 36px;
}
.site-footer .foot-top{
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:32px;align-items:start;
}
.foot-brand{display:flex;gap:14px;align-items:flex-start;}
.foot-brand img{width:40px;height:40px;flex:none;}
.foot-brand b{display:block;font-family:var(--ff-display);font-size:1.05rem;font-weight:700;letter-spacing:-.01em;}
.foot-brand span{display:block;color:var(--text-dim);font-size:.9rem;margin-top:4px;max-width:34ch;}
.foot-col h2{font-family:var(--ff-body);font-size:.8125rem;font-weight:600;color:var(--text);letter-spacing:0;margin-bottom:12px;}
.foot-col a{display:block;width:fit-content;color:var(--text-dim);font-size:.9rem;padding:4px 0;transition:color .2s ease;}
.foot-col a:hover{color:var(--primary);}
.site-footer .foot-note{
  margin-top:32px;padding-top:20px;border-top:1px solid var(--line-soft);
  color:var(--text-faint);font-size:.8125rem;line-height:1.6;max-width:82ch;
}
.site-footer .copy{margin-top:10px;color:var(--text-faint);font-size:.8125rem;}
@media(max-width:760px){
  .site-footer{padding:40px 0 28px;}
  .site-footer .foot-top{grid-template-columns:1fr 1fr;}
  .foot-brand{grid-column:1/-1;}
}

/* ---------------------------------------------------------------------
   Aviso de cookies (tarjeta flotante, igual en todas las páginas)
   --------------------------------------------------------------------- */
.cookie-banner{
  display:none;position:fixed;z-index:590;left:16px;right:16px;bottom:16px;
  max-width:560px;margin:0 auto;
  background:rgba(7,31,39,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:14px 14px 14px 18px;
}
.cookie-banner.show{display:block;animation:piaRise .6s var(--ease-out) .8s both;}
.cookie-banner-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;}
.cookie-banner-inner p{margin:0;color:var(--text-dim);font-size:.875rem;line-height:1.5;}
.cookie-banner-inner a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;}
.cookie-accept{padding:10px 16px;font-size:.875rem;}
@media(max-width:860px){
  .cookie-banner{bottom:calc(var(--hotbar-h) + 10px + env(safe-area-inset-bottom));left:12px;right:12px;}
}

/* ---------------------------------------------------------------------
   Modales (login y los de cada página comparten la misma piel)
   --------------------------------------------------------------------- */
.login-overlay,.t-modal,.pkg-modal,.compra-modal,.admin-overlay,.overlay{
  position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  padding:20px;overflow-y:auto;
  background:rgba(2,10,13,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.login-overlay.open,.t-modal.open,.pkg-modal.open,.compra-modal.open,.admin-overlay.open,.overlay.open{
  display:flex;animation:piaFade .25s ease both;
}
.login-box,.t-modal-box,.pkg-modal-box,.compra-modal-box,.admin-box,.overlay .modal{
  position:relative;width:100%;max-width:420px;margin:auto;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 26px 26px;box-shadow:var(--shadow-lg);
}
.login-overlay.open .login-box,.t-modal.open .t-modal-box,.pkg-modal.open .pkg-modal-box,
.compra-modal.open .compra-modal-box,.admin-overlay.open .admin-box,.overlay.open .modal{
  animation:piaModalIn .45s var(--ease-out) both;
}
.login-box h2,.t-modal-box h2,.pkg-modal-box h2,.compra-modal-box h2,.admin-box h2{font-size:1.4rem;margin-top:10px;letter-spacing:-.025em;}
.login-box p.sub,.compra-modal-box .sub{color:var(--text-dim);font-size:.9rem;margin-top:8px;}
.close-btn{
  position:absolute;top:16px;right:16px;z-index:5;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:var(--panel);border:1px solid var(--line);color:var(--text-dim);font-size:.9rem;
  transition:color .2s ease,border-color .2s ease;
}
.close-btn:hover{color:var(--text);border-color:var(--primary);}

/* Campos de formulario: etiqueta arriba, texto de ayuda abajo */
.login-field,.field,.compra-field{margin-top:16px;}
.login-field label,.field label,.compra-field label{
  display:block;font-family:var(--ff-body);font-size:.8125rem;font-weight:500;color:var(--text-dim);margin-bottom:7px;
}
.login-field input,
.field input[type=text],.field input[type=url],.field input[type=number],.field input[type=email],.field input[type=password],
.field textarea,.field select,
.compra-field input{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;color:var(--text);font-family:var(--ff-body);font-size:.9375rem;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.login-field input::placeholder,.field input::placeholder,.field textarea::placeholder,.compra-field input::placeholder{color:var(--text-faint);}
.login-field input:focus,.field input:focus,.field textarea:focus,.field select:focus,.compra-field input:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft);
}
.login-submit{width:100%;margin-top:22px;padding:14px;}
.login-note{margin-top:16px;color:var(--text-dim);font-size:.8125rem;text-align:center;line-height:1.55;}
.login-note a{color:var(--primary);}
.login-error{display:none;margin-top:10px;color:var(--danger);font-size:.8125rem;text-align:center;}
.login-success{display:none;margin-top:10px;color:var(--ok);font-size:.8125rem;text-align:center;}
.login-forgot-link,.login-back-link{
  display:block;width:100%;margin-top:14px;background:none;border:none;
  font-size:.8125rem;text-align:center;text-decoration:underline;text-underline-offset:3px;
}
.login-forgot-link{color:var(--primary);}
.login-back-link{color:var(--text-dim);}
.consent-field{display:flex;align-items:flex-start;gap:10px;margin-top:16px;}
.consent-field input[type=checkbox]{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--primary);}
.consent-field label{font-size:.8125rem;color:var(--text-dim);line-height:1.55;}
.consent-field a{color:var(--primary);}
.modal-actions{display:flex;gap:10px;margin-top:22px;}
.modal-actions .save-btn{flex:1;}

/* ---------------------------------------------------------------------
   Toast
   --------------------------------------------------------------------- */
.toast{
  position:fixed;left:50%;bottom:24px;z-index:3000;transform:translate(-50%,16px);
  background:var(--bg-alt);border:1px solid var(--primary);color:var(--text);box-shadow:var(--shadow-lg);
  font-size:.875rem;font-weight:500;padding:12px 18px;border-radius:14px;
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .35s var(--ease-out);
}
.toast.show{opacity:1;transform:translate(-50%,0);}
@media(max-width:860px){.toast{bottom:calc(var(--hotbar-h) + 14px + env(safe-area-inset-bottom));}}

/* ---------------------------------------------------------------------
   Burbuja del E-book (plataforma y comunidad)
   --------------------------------------------------------------------- */
.ebook-bubble{
  position:fixed;right:22px;bottom:24px;z-index:480;
  display:flex;align-items:center;gap:10px;
  background:rgba(7,31,39,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:var(--radius-pill);padding:7px 7px 7px 16px;
  box-shadow:var(--shadow-sm);
  animation:piaRise .7s var(--ease-out) 1.2s both;
  transition:border-color .2s ease;
}
.ebook-bubble:hover{border-color:var(--primary);}
.ebook-bubble .ebook-label{font-size:.8125rem;font-weight:500;color:var(--text-dim);white-space:nowrap;}
.ebook-bubble:hover .ebook-label{color:var(--text);}
.ebook-bubble .ebook-icon{
  position:relative;width:38px;height:38px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--primary);
}
.ebook-bubble .ebook-icon svg{width:18px;height:18px;stroke:var(--primary-ink);}
@media(max-width:860px){
  .ebook-bubble{bottom:calc(var(--hotbar-h) + 12px + env(safe-area-inset-bottom));right:14px;padding:7px;}
  .ebook-bubble .ebook-label{display:none;}
}

/* ---------------------------------------------------------------------
   Estados vacíos y skeletons de carga (misma forma que el contenido)
   --------------------------------------------------------------------- */
.empty-state,.empty{
  text-align:center;padding:56px 20px;color:var(--text-dim);
  border:1px dashed var(--line);border-radius:var(--radius);font-size:.9375rem;
}
.empty-state svg{width:34px;height:34px;margin:0 auto 12px;color:var(--text-faint);}

.skel{
  position:relative;overflow:hidden;border-radius:10px;
  background:linear-gradient(100deg,var(--panel) 30%,#0f3947 50%,var(--panel) 70%) 0 0/300% 100%;
  animation:piaShimmer 1.6s linear infinite;
}
.skel-line{height:12px;border-radius:6px;}
.skel-card{border:1px solid var(--line-soft);border-radius:var(--radius);background:rgba(10,41,51,.4);overflow:hidden;}
.skel-card .skel-media{aspect-ratio:16/9;border-radius:0;}
.skel-card .skel-body{padding:18px;display:grid;gap:10px;}
.skel-w90{width:90%;}.skel-w70{width:70%;}.skel-w50{width:50%;}.skel-w30{width:30%;}

/* ---------------------------------------------------------------------
   Carga inicial (primera visita de la sesión) + barra de navegación
   --------------------------------------------------------------------- */
.pia-loader{display:none;}
html.pia-first .pia-loader{
  display:grid;place-items:center;position:fixed;inset:0;z-index:10000;background:var(--bg);
  /* respaldo: si el JS no llega, el loader se va solo */
  animation:piaLoaderOut .5s ease 2.6s forwards;
}
html.pia-first.pia-ready .pia-loader{animation:piaLoaderOut .55s var(--ease-out) forwards;}
.pia-loader-inner{display:grid;justify-items:center;gap:22px;}
.pia-loader-mark{position:relative;width:96px;height:96px;display:grid;place-items:center;}
.pia-loader-mark img{width:88px;height:88px;animation:piaMarkIn .9s var(--ease-out) both;}
.pia-loader-mark::before{
  content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1.5px solid rgba(34,253,249,.18);border-top-color:var(--primary);
  animation:piaSpin 1s linear infinite;
}
.pia-loader-word{font-family:var(--ff-display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;animation:piaRise .7s var(--ease-out) .15s both;}
.pia-loader-word b{color:var(--primary);}

.pia-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:9000;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);opacity:0;
  background:linear-gradient(90deg,var(--primary),#9ffcf9);box-shadow:0 0 12px rgba(34,253,249,.7);
}
html.pia-leaving .pia-progress{opacity:1;animation:piaProgress 1.6s var(--ease-out) forwards;}

/* ---------------------------------------------------------------------
   Entrada de cada página (escalonada) y revelado al hacer scroll
   data-enter: aparece al cargar, en orden según style="--d:N"
   .reveal:    aparece cuando entra en pantalla (pia.js)
   .pia-stagger > *: los hijos insertados por JS entran en cascada
   --------------------------------------------------------------------- */
html.js:not(.pia-ready) [data-enter]{opacity:0;}
html.pia-ready [data-enter]{animation:piaEnter .85s var(--ease-out) backwards;animation-delay:calc(var(--d,0) * 90ms);}
html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--d,0) * 80ms);}
html.js .reveal.is-in{opacity:1;transform:none;}

.pia-stagger > *{animation:piaEnter .7s var(--ease-out) backwards;}
.pia-stagger > :nth-child(2){animation-delay:60ms;}
.pia-stagger > :nth-child(3){animation-delay:120ms;}
.pia-stagger > :nth-child(4){animation-delay:180ms;}
.pia-stagger > :nth-child(5){animation-delay:240ms;}
.pia-stagger > :nth-child(6){animation-delay:300ms;}
.pia-stagger > :nth-child(n+7){animation-delay:360ms;}
.pia-stagger.no-anim > *,.no-anim .pia-stagger > *{animation:none;}

@keyframes piaEnter{from{opacity:0;transform:translateY(22px);filter:blur(6px);}to{opacity:1;transform:none;filter:none;}}
@keyframes piaRise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes piaFade{from{opacity:0;}to{opacity:1;}}
@keyframes piaModalIn{from{opacity:0;transform:translateY(18px) scale(.97);}to{opacity:1;transform:none;}}
@keyframes piaMarkIn{from{opacity:0;transform:scale(.7) rotate(-20deg);filter:blur(8px);}to{opacity:1;transform:none;filter:none;}}
@keyframes piaSpin{to{transform:rotate(360deg);}}
@keyframes piaShimmer{from{background-position:100% 0;}to{background-position:-50% 0;}}
@keyframes piaLoaderOut{to{opacity:0;visibility:hidden;}}
@keyframes piaProgress{0%{transform:scaleX(0);}40%{transform:scaleX(.55);}100%{transform:scaleX(.92);}}

/* ---------------------------------------------------------------------
   Transición entre páginas (Chrome 126+, Safari 18.2+).
   Nav y hotbar se quedan quietos; solo cambia el contenido.
   --------------------------------------------------------------------- */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:piaVtOut .2s ease both;}
::view-transition-new(root){animation:piaVtIn .45s var(--ease-out) both;}
@keyframes piaVtOut{to{opacity:0;}}
@keyframes piaVtIn{from{opacity:0;transform:translateY(10px);}}

/* ---------------------------------------------------------------------
   Movimiento reducido: todo aparece estático y al instante
   --------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none;}
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  html.js:not(.pia-ready) [data-enter],html.js .reveal{opacity:1;transform:none;}
  .pia-loader{display:none !important;}
  .skel{animation:none;}
}