/* ============ Tokens — dark (default) ============ */
:root{
  --bg: #05070a;
  --bg-1: #0a0e14;
  --bg-2: #0d1219;
  --panel: #0f151d;
  --line: rgba(160, 200, 230, 0.12);
  --line-strong: rgba(160, 200, 230, 0.22);
  --nav-bg: rgba(5, 7, 10, .72);

  --ink: #eef3f7;
  --ink-dim: #9fb0bf;
  --ink-faint: #6a7a89;

  --blue: #4fb3ff;
  --blue-2: #1e8fe0;
  --blue-deep: #0a3a63;
  --ice: #bfe6ff;

  --glow-1: rgba(79,179,255,.22);
  --glow-2: rgba(191,230,255,.14);
  --glow-3: rgba(10,58,99,.5);

  --shadow: rgba(0,0,0,.6);

  --radius: 14px;
  --radius-sm: 9px;

  --font-head: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --maxw: 1180px;
  --ease: cubic-bezier(.19,1,.22,1);
  --ease-reveal: cubic-bezier(.33,1,.68,1);
}

/* ============ Tokens — light ============ */
:root[data-theme="light"]{
  --bg: #ffffff;
  --bg-1: #ffffff;
  --bg-2: #e7f0f8;
  --panel: #f4f9fc;
  --line: rgba(20, 50, 80, 0.10);
  --line-strong: rgba(20, 50, 80, 0.20);
  --nav-bg: rgba(255, 255, 255, .78);

  --ink: #0c1a26;
  --ink-dim: #4b5d70;
  --ink-faint: #7c8ea0;

  --blue: #0d84e0;
  --blue-2: #0a63ad;
  --blue-deep: #dbeeff;
  --ice: #0a5fb0;

  --glow-1: rgba(13,132,224,.12);
  --glow-2: rgba(191,230,255,.30);
  --glow-3: rgba(191,230,255,.45);

  --shadow: rgba(20,50,80,.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:84px; overflow-x:hidden; width:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
  transition:background .3s, color .3s;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;}
input,textarea{font:inherit;}

::selection{background:var(--blue-deep); color:var(--ice);}

/* subtle grain/frost overlay */
.frost-noise{
  position:fixed; inset:0; pointer-events:none; z-index:2000;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ Layout helpers ============ */
.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:96px 24px;
}
.section-alt{ background:linear-gradient(180deg, transparent, rgba(79,179,255,.035) 40%, transparent); }

.section-head{ max-width:640px; margin-bottom:48px; }
.kicker{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  color:var(--blue);
  margin:0 0 12px;
}
.section-head h2{
  font-family:var(--font-head);
  font-size:clamp(1.6rem, 3.2vw, 2.4rem);
  margin:0 0 12px;
  letter-spacing:-.01em;
}
.section-desc{ color:var(--ink-dim); margin:0; font-size:1rem; max-width:52ch; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:.92rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease), background .25s, border-color .25s, box-shadow .25s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn-primary{
  background:linear-gradient(135deg, var(--blue), var(--blue-2));
  color:var(--bg);
  box-shadow:0 0 0 0 rgba(79,179,255,.5);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -10px rgba(79,179,255,.55); }
@property --border-spin-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; pointer-events:none; }
.btn-border-spin{ position:relative; }
.btn-border-spin::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--border-spin-angle),
    transparent 0deg,
    transparent 285deg,
    var(--blue) 315deg,
    var(--ice) 340deg,
    #fff 350deg,
    var(--ice) 358deg,
    transparent 360deg
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0; transition:opacity .3s; pointer-events:none;
}
.btn-border-spin:hover::before{ opacity:1; animation:btn-border-spin 1.6s linear infinite; }
@keyframes btn-border-spin{ to{ --border-spin-angle:360deg; } }
.btn-ghost{
  background:transparent;
  border-color:var(--line-strong);
  color:var(--ink);
}
.btn-ghost:hover{ border-color:var(--blue); color:var(--ice); transform:translateY(-2px); }
.btn-tiktok{
  background:#000; color:#fff; border-color:#000;
  box-shadow:0 0 0 0 rgba(0,0,0,0);
}
.btn-tiktok:hover{
  transform:translateY(-2px);
  box-shadow:-3px 0 0 0 #25F4EE, 3px 0 0 0 #FE2C55;
}
.btn-block{ width:100%; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease-reveal), transform .9s var(--ease-reveal); }
.reveal.from-left{ transform:translateX(-56px); }
.reveal.from-right{ transform:translateX(56px); }
.reveal.in{ opacity:1; transform:none; }

@media (max-width: 720px){
  /* En una sola columna, que todo llegue desde abajo — de lado se ve raro con poco ancho */
  .reveal.from-left, .reveal.from-right{ transform:translateY(18px); }
}

/* ============ Nav ============ */
.nav{
  position:sticky; top:0; z-index:500;
  background:var(--nav-bg);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{ width:34px; height:34px; object-fit:contain; border-radius:9px; filter:drop-shadow(0 0 10px rgba(79,179,255,.35)); }
.brand-word{
  font-family:var(--font-head); font-weight:600; font-size:.86rem;
  letter-spacing:.06em; color:var(--ink);
}
.brand-word b{
  font-weight:700;
  background-image:linear-gradient(135deg, var(--ice), var(--blue) 60%, var(--blue-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
:root[data-theme="light"] .brand-word b{
  background-image:linear-gradient(90deg, #24323e 0%, #3f6d94 48%, #86cdf2 100%);
}

.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{
  font-size:.88rem; color:var(--ink-dim); font-weight:500;
  transition:color .2s;
}
.nav-links a:hover{ color:var(--ink); }
.nav-cta{
  color:var(--bg) !important;
  background:var(--blue);
  padding:9px 18px; border-radius:999px;
  font-weight:600 !important;
}
.nav-cta:hover{ background:var(--ice) !important; color:var(--bg) !important; }

.nav-right{ display:flex; align-items:center; gap:10px; }

.theme-toggle{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line-strong); background:transparent; color:var(--ink-dim);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:.2s; flex-shrink:0;
}
.theme-toggle:hover{ border-color:var(--blue); color:var(--blue); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .icon-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .icon-moon{ display:block; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{ width:22px; height:2px; background:var(--ink); display:block; transition:.25s; }

/* ============ Hero ============ */
.hero{
  position:relative;
  min-height:60vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding: 25px 24px 88px;
  overflow:hidden;
}
.hero-glow{
  position:absolute; inset:-20%;
  background:
    radial-gradient(45% 40% at 30% 20%, var(--glow-1), transparent 60%),
    radial-gradient(40% 35% at 75% 15%, var(--glow-2), transparent 60%),
    radial-gradient(60% 50% at 50% 100%, var(--glow-3), transparent 70%);
  filter:blur(10px);
  animation:drift 18s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes drift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(-2%, 2%) scale(1.05); }
}
.hero-inner{ position:relative; z-index:1; max-width:1080px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em;
  color:var(--ink-dim); text-transform:uppercase;
  border:1px solid var(--line-strong); border-radius:999px;
  padding:7px 16px; margin:0 0 14px;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); box-shadow:0 0 8px 2px rgba(79,179,255,.7); flex-shrink:0; }

.hero-logo{
  width:56px; height:56px; object-fit:contain; border-radius:14px; margin:0 auto 10px;
  filter:drop-shadow(0 0 24px rgba(79,179,255,.45));
}
.hero-title{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(2.6rem, 8vw, 4.6rem);
  line-height:1.02; letter-spacing:-.02em;
  margin:0 0 14px;
}
.hero-title span{
  background:linear-gradient(135deg, var(--ice), var(--blue) 60%, var(--blue-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
:root[data-theme="light"] .hero-title span{
  background-image:linear-gradient(90deg, #24323e 0%, #3f6d94 48%, #86cdf2 100%);
}
.hero-tagline{
  font-family:var(--font-head); font-size:clamp(1.1rem,2.4vw,1.5rem);
  color:var(--ice); margin:0 0 14px; font-weight:500;
}
.hero-sub{ color:var(--ink-dim); font-size:1.02rem; max-width:62ch; margin:0 auto 22px; }
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.scroll-cue{
  position:absolute;
  bottom:18px;
  left:50%;
  width:40px;
  height:40px;
  border:1.5px solid var(--line-strong);
  border-radius:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:8px 0 8px;
  z-index:1;
  animation:cueFloat 2.6s ease-in-out infinite;
}

.scroll-cue-bar{ width:4px; height:8px; border-radius:2px; background:var(--blue); animation:scrolldown 1.8s infinite; }
.scroll-cue-arrow{ width:12px; height:12px; color:var(--blue); margin-top:0; animation:scrolldown 1.8s infinite; }
@keyframes scrolldown{ 0%{ opacity:1; transform:translateY(0);} 100%{ opacity:0; transform:translateY(10px);} }
@keyframes cueFloat{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(6px); }
}

/* ============ Page hero (subpages) ============ */
.page-hero{
  position:relative; text-align:center; overflow:hidden;
  padding:64px 24px 56px;
}
.page-hero-inner{ position:relative; z-index:1; max-width:700px; margin:0 auto; }
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.86rem; color:var(--ink-dim); margin-bottom:28px;
  transition:color .2s;
}
.back-link:hover{ color:var(--blue); }
.status-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue); border:1px solid var(--line-strong); border-radius:999px;
  padding:7px 16px; margin:0 0 22px;
}
.status-badge .dot{ animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }
.beta-tag{
  display:inline-flex; align-items:center;
  font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#e8a33d; background:rgba(232,163,61,.14); border:1px solid rgba(232,163,61,.3);
  border-radius:999px; padding:6px 12px; margin:0 0 22px 8px;
}
:root[data-theme="light"] .beta-tag{ color:#9a6416; background:rgba(154,100,22,.1); border-color:rgba(154,100,22,.28); }
.page-hero h1{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(2rem, 5vw, 3.2rem); letter-spacing:-.01em;
  margin:0 0 16px;
}
.page-hero .lead{ color:var(--ink-dim); font-size:1.05rem; max-width:56ch; margin:0 auto; }

/* ============ Hub grid ============ */
.hub-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
}
.hub-card{
  grid-column:span 1;
  background:linear-gradient(180deg, var(--panel), var(--bg-1));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;
  position:relative;
  overflow:hidden;
  transition:opacity .9s var(--ease-reveal), transform .9s var(--ease-reveal),
    translate .3s var(--ease), border-color .3s, background .3s;
}
.hub-card-wide{ grid-column:span 2; }
.hub-card::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(160px 120px at 20% 0%, rgba(79,179,255,.16), transparent 70%);
  transition:opacity .3s;
}
.hub-card:hover{ border-color:var(--blue); translate:0 -4px; }
.hub-card:hover::before{ opacity:1; }
.hub-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:8px; position:relative;
}
.hub-icon{
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(79,179,255,.1); color:var(--blue);
}
.hub-icon svg{ width:20px; height:20px; }
.hub-card h3{ font-family:var(--font-head); font-size:1.12rem; margin:0; }
.hub-card p{ color:var(--ink-dim); font-size:.92rem; margin:0 0 18px; max-width:38ch; position:relative; }
.hub-go{ font-size:.84rem; font-weight:600; color:var(--blue); position:relative; }

/* Aparecen en cascada, una por una, en lugar de todas a la vez.
   El delay solo aplica a opacity/transform (la entrada) — translate,
   border-color y background (el hover) quedan en 0s para no sentirse
   lentos al pasar el mouse sobre las últimas tarjetas. */
.hub-card:nth-child(2){ transition-delay:.08s, .08s, 0s, 0s, 0s; }
.hub-card:nth-child(3){ transition-delay:.16s, .16s, 0s, 0s, 0s; }
.hub-card:nth-child(4){ transition-delay:.24s, .24s, 0s, 0s, 0s; }
.hub-card:nth-child(5){ transition-delay:.32s, .32s, 0s, 0s, 0s; }
.hub-card:nth-child(6){ transition-delay:.4s, .4s, 0s, 0s, 0s; }
.hub-card:nth-child(7){ transition-delay:.48s, .48s, 0s, 0s, 0s; }
.hub-card:nth-child(8){ transition-delay:.56s, .56s, 0s, 0s, 0s; }
.hub-card:nth-child(9){ transition-delay:.64s, .64s, 0s, 0s, 0s; }
.hub-card:nth-child(10){ transition-delay:.72s, .72s, 0s, 0s, 0s; }

/* ============ Category grid ============ */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.cat-card{ background:var(--bg); padding:32px 24px; transition:opacity .9s var(--ease-reveal), transform .9s var(--ease-reveal), background .3s; }
.cat-card:hover{ background:var(--panel); }
.cat-tag{ font-family:var(--font-mono); color:var(--blue); font-size:.78rem; letter-spacing:.1em; }
.cat-card h3{ font-family:var(--font-head); font-size:1.06rem; margin:14px 0 10px; }
.cat-card p{ color:var(--ink-dim); font-size:.88rem; margin:0; }

/* ============ Feature showcase (bento) ============ */
.feat-showcase{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.feat-item{
  grid-column:span 1;
  background:linear-gradient(180deg, var(--panel), var(--bg-1));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 24px;
  position:relative; overflow:hidden;
  transition:opacity .9s var(--ease-reveal), transform .9s var(--ease-reveal),
    translate .3s var(--ease), border-color .3s, background .3s;
}
.feat-item::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(180px 140px at 15% 0%, rgba(79,179,255,.18), transparent 70%);
  transition:opacity .3s;
}
.feat-item:hover{ border-color:var(--blue); translate:0 -4px; }
.feat-item:hover::before{ opacity:1; }
.feat-item-wide{
  grid-column:1 / -1;
  display:flex; align-items:flex-start; gap:24px;
}
.feat-item-wide .feat-icon{ margin-bottom:0; }
.feat-item-body{ flex:1; }
.feat-icon{
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(79,179,255,.2), rgba(79,179,255,.05));
  color:var(--blue); margin-bottom:18px; position:relative;
}
.feat-icon svg{ width:24px; height:24px; }
.feat-item h3{ font-family:var(--font-head); font-size:1.06rem; margin:0 0 8px; position:relative; }
.feat-item p{ color:var(--ink-dim); font-size:.88rem; margin:0; position:relative; }
.feat-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; position:relative; }
.feat-chips span{
  font-family:var(--font-mono); font-size:.72rem; color:var(--blue);
  background:rgba(79,179,255,.1); border:1px solid var(--line); border-radius:999px; padding:5px 12px;
}

/* ============ Catálogo: layout de dos columnas ============ */
.catalog-layout{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items:start;
}
.catalog-content{ display:contents; }
.catalog-layout .section-head{ grid-column:1; grid-row:1; }
.catalog-content .cat-grid{ grid-template-columns:repeat(2,1fr); grid-column:1; grid-row:2; }
.video-carousel{ grid-column:2; grid-row:1 / span 2; }

/* ============ Carrusel de videos (mismo estilo que .insta-carousel, ver CubeCarousel.astro) ============ */
.video-carousel{ display:flex; flex-direction:column; align-items:center; margin-top:50px; max-height: 90vh; }

@media (max-width:980px){
  .catalog-layout{ grid-template-columns:1fr; gap:56px; }
  .video-carousel{ grid-column:1; grid-row:3; margin-top:0; }
}

/* ============ Process ============ */
.process{
  display:grid; grid-template-columns:repeat(5,1fr); gap:20px; counter-reset:step;
}
.process li{
  border-top:2px solid var(--line-strong); padding-top:18px; position:relative;
}
.process-n{ font-family:var(--font-mono); color:var(--blue); font-size:.85rem; }
.process h3{ font-family:var(--font-head); font-size:1rem; margin:10px 0 8px; }
.process p{ color:var(--ink-dim); font-size:.86rem; margin:0; }

/* ============ Projects ============ */
.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
.filter-btn{
  font-size:.82rem; font-weight:600; color:var(--ink-dim);
  border:1px solid var(--line-strong); border-radius:999px; padding:8px 16px;
  background:transparent; cursor:pointer; transition:.2s;
}
.filter-btn:hover{ color:var(--ink); border-color:var(--blue); }
.filter-btn.active{ background:var(--blue); color:var(--bg); border-color:var(--blue); }

.project-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.project-card{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--panel); transition:transform .3s var(--ease), border-color .3s;
  display:flex; flex-direction:column;
}
.project-card:hover{ transform:translateY(-4px); border-color:var(--blue); }
.project-thumb{
  aspect-ratio:3/4; position:relative; overflow:hidden;
  background:
    linear-gradient(160deg, var(--bg-2), var(--bg-1)),
    repeating-linear-gradient(135deg, rgba(79,179,255,.06) 0 2px, transparent 2px 14px);
  display:flex; align-items:center; justify-content:center;
}
.project-thumb svg{ width:38px; height:38px; color:var(--blue); opacity:.55; }
.project-thumb img{ width:100%; height:100%; object-fit:cover; }
.project-thumb-label{
  position:absolute; bottom:10px; left:10px; right:10px;
  font-family:var(--font-mono); font-size:.68rem; color:var(--ink-faint);
  letter-spacing:.04em;
}
.project-body{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.project-cat{ font-family:var(--font-mono); font-size:.7rem; color:var(--blue); text-transform:uppercase; letter-spacing:.08em; }
.project-body h3{ font-family:var(--font-head); font-size:1.05rem; margin:0; }
.project-body p{ color:var(--ink-dim); font-size:.88rem; margin:0; flex:1; }
.project-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.project-meta span{
  font-size:.72rem; color:var(--ink-dim); border:1px solid var(--line);
  border-radius:6px; padding:3px 8px; font-family:var(--font-mono);
}

/* ============ Proyectos del home: imagen al lado, no arriba
   (las fotos se toman con celular y suelen ser verticales) ============ */
.projects-grid{ grid-template-columns:repeat(3,1fr); }
.projects-grid .project-card{ flex-direction:row; }
.projects-grid .project-thumb{
  aspect-ratio:auto; width:40%; flex-shrink:0; min-height:220px;
}
.projects-grid .project-body{ min-width:0; }

@media (max-width: 720px){
  .projects-grid .project-card{ flex-direction:column; }
  .projects-grid .project-thumb{ width:100%; aspect-ratio:3/4; min-height:0; }
}

/* ============ Recomendados (productos afiliados y no afiliados) ============ */
.reco-search{
  display:flex; align-items:center; gap:10px;
  max-width:420px; margin:0 auto 20px;
  border:1px solid var(--line-strong); border-radius:999px; padding:12px 18px;
  background:var(--panel);
}
.reco-search svg{ width:18px; height:18px; color:var(--ink-faint); flex-shrink:0; }
.reco-search input{
  flex:1; min-width:0; border:none; background:none; outline:none;
  color:var(--ink); font-family:var(--font-body); font-size:.94rem;
}
.reco-search input::placeholder{ color:var(--ink-faint); }
.reco-filter-group{ margin-bottom:18px; }
.reco-filter-group .filter-row{ margin-bottom:0; }
.reco-filter-label{
  display:block; font-family:var(--font-mono); font-size:.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:10px;
}
.reco-grid{ grid-template-columns:repeat(4,1fr); }
.reco-grid .project-thumb{ aspect-ratio:8/9; }
.reco-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.reco-store{ font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint); }
.reco-tag{ font-size:.68rem; font-weight:600; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.reco-tag-affiliate{ background:rgba(79,179,255,.12); color:var(--blue); }
.reco-tag-noaffiliate{ background:rgba(159,176,191,.14); color:var(--ink-faint); }
.reco-cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:11px; border-radius:10px;
  background:var(--blue); color:#fff; font-size:.86rem; font-weight:600;
  transition:opacity .2s;
}
.reco-cta:hover{ opacity:.88; }
.reco-cta svg{ width:14px; height:14px; }
.reco-empty{ grid-column:1/-1; text-align:center; color:var(--ink-dim); padding:48px 0; }
.reco-disclosure{ margin:28px auto 0; max-width:60ch; text-align:center; color:var(--ink-faint); font-size:.82rem; }

@media (max-width: 640px){
  .reco-search{ max-width:none; }
}

/* ============ Enlaces: layout de dos columnas ============ */
.enlaces-layout{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items:start;
}
.enlaces-content{ display:contents; }
.enlaces-layout .section-head{ grid-column:1; grid-row:1; }
.enlaces-content .link-list{ grid-column:1; grid-row:2; }
.insta-carousel{ grid-column:2; grid-row:1 / span 2; max-height: 67vh; }

@media (max-width:980px){
  .enlaces-layout{ grid-template-columns:1fr; gap:56px; }
  .insta-carousel{ grid-column:1; grid-row:3; }
}

/* ============ Carrusel de Instagram (cubo 3D, ver CubeCarousel.astro) ============ */
.insta-carousel{ display:flex; flex-direction:column; align-items:center; margin-top:150px; }

@media (max-width:980px){
  .insta-carousel{ margin-top:0; }
}

/* ============ Links / Linktree ============ */
.link-list{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; }
.link-item{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--panel), var(--bg-1));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px; transition:border-color .3s, transform .3s var(--ease), background .3s;
}
.link-item::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(160px 120px at 20% 0%, rgba(79,179,255,.16), transparent 70%);
  transition:opacity .3s;
}
.link-item:hover{ border-color:var(--blue); transform:translateY(-4px); }
.link-item:hover::before{ opacity:1; }
.link-icon{
  width:44px; height:44px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(79,179,255,.1); color:var(--blue);
  margin-bottom:18px; transition:background .25s, color .25s;
}
.link-icon svg{ width:21px; height:21px; }
.link-title{ display:block; font-family:var(--font-head); font-size:1.02rem; margin:0 0 6px; }
.link-sub{ display:block; color:var(--ink-dim); font-size:.86rem; }
.link-arrow{
  position:absolute; top:28px; right:24px; color:var(--ink-faint); font-size:1.1rem;
  transition:transform .25s, color .25s;
}
.link-item:hover .link-arrow{ color:var(--blue); transform:translateX(3px); }

.link-item[data-icon="tiktok"]:hover .link-icon{ background:linear-gradient(135deg,#25f4ee,#000 55%,#fe2c55); color:#fff; }
.link-item[data-icon="youtube"]:hover .link-icon{ background:#ff0000; color:#fff; }
.link-item[data-icon="whatsapp"]:hover .link-icon{ background:#25d366; color:#fff; }
.link-item[data-icon="cults"]:hover .link-icon{ background:#8b5cf6; color:#fff; }

/* ============ Shop ============ */
.shop-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:36px; }
.shop-card{ display:block; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); overflow:hidden; transition:.3s; }
.shop-card:hover{ border-color:var(--blue); transform:translateY(-4px); }
.shop-badge{
  position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%;
  background:#000; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
}
.shop-thumb .shop-badge svg{ width:14px; height:14px; color:#fff; opacity:1; }
.shop-thumb{
  position:relative;
  aspect-ratio:1/1;
  background:linear-gradient(150deg, var(--bg-2), var(--bg-1));
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.shop-thumb svg{ width:30px; height:30px; color:var(--blue); opacity:.5; }
.shop-thumb img{ width:100%; height:100%; object-fit:cover; }
.shop-info{ padding:16px; }
.shop-info h4{ margin:0 0 4px; font-family:var(--font-head); font-size:.94rem; }
.shop-price{ color:var(--blue); font-family:var(--font-mono); font-size:.86rem; }
.shop-cta{ text-align:center; }
.shop-note{ color:var(--ink-faint); font-size:.78rem; margin-top:12px; }
.shop-note code{ font-family:var(--font-mono); background:var(--panel); padding:2px 6px; border-radius:4px; }

/* ============ App section ============ */
.app-section{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;
}
.app-mock{
  position:relative; width:260px; margin:0 auto;
  aspect-ratio:9/18; border-radius:32px; border:1px solid var(--line-strong);
  background:linear-gradient(160deg, var(--bg-2), var(--panel));
  padding:24px 18px; box-shadow:0 30px 60px -20px var(--shadow), 0 0 60px -20px rgba(79,179,255,.25);
}
.app-mock-topbar{ display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.app-mock-logo{ width:30px; height:30px; border-radius:8px; opacity:.95; flex-shrink:0; }
.app-mock-title{ font-family:var(--font-head); font-weight:600; font-size:.86rem; color:var(--ink); }
.app-mock-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.app-mock-grid span{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  padding:14px 4px; border-radius:12px; background:rgba(79,179,255,.08); border:1px solid var(--line); color:var(--blue);
}
.app-mock-grid svg{ width:18px; height:18px; opacity:.85; }
.app-mock-grid small{ font-size:.56rem; font-weight:500; color:var(--ink-dim); letter-spacing:.01em; text-align:center; }

/* ============ Browser mock (web tools) ============ */
.browser-mock{
  width:100%; max-width:380px; margin:0 auto;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--panel); overflow:hidden;
  box-shadow:0 30px 60px -20px var(--shadow), 0 0 60px -20px rgba(79,179,255,.25);
}
.browser-mock-top{
  display:flex; align-items:center; gap:6px;
  padding:12px 14px; background:var(--bg-2); border-bottom:1px solid var(--line);
}
.browser-mock-dot{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); }
.browser-mock-search{
  margin-left:10px; flex:1; height:16px; border-radius:5px;
  background:var(--panel); border:1px solid var(--line);
}
.browser-mock-body{ padding:16px; display:grid; gap:10px; }
.browser-mock-row{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg-1);
}
.browser-mock-thumb{
  width:32px; height:32px; border-radius:8px; flex-shrink:0;
  background:rgba(79,179,255,.1); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
}
.browser-mock-thumb svg{ width:16px; height:16px; }
.browser-mock-lines{ flex:1; display:grid; gap:6px; }
.browser-mock-line{ height:7px; border-radius:4px; background:var(--line-strong); width:70%; }
.browser-mock-line.short{ width:40%; }
.browser-mock-pill{
  font-family:var(--font-mono); font-size:.6rem; color:var(--blue);
  border:1px solid var(--line-strong); border-radius:999px; padding:3px 8px; flex-shrink:0;
}

/* ============ Mockup del panel de Arctic Ledger ============ */
.ledger-mock{ --lm-ok:#22c55e; --lm-warn:#a855f7; --lm-danger:#e0524a; max-width:640px; text-align:left; }
:root[data-theme="light"] .ledger-mock{ --lm-ok:#16a34a; --lm-warn:#9333ea; --lm-danger:#c9372f; }

.ledger-mock-url{ margin-left:10px; flex:1; min-width:0; display:flex; align-items:center; gap:6px; height:22px; padding:0 10px;
  border-radius:6px; background:var(--panel); border:1px solid var(--line);
  font:400 .62rem var(--font-body); color:var(--ink-faint); white-space:nowrap; overflow:hidden; }
.ledger-mock-url svg{ width:10px; height:10px; flex-shrink:0; }

.ledger-mock-app{ background:var(--bg); }
.ledger-mock-nav{ display:flex; align-items:center; gap:14px; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--bg-1); }
.ledger-mock-brand{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.ledger-mock-brand img{ width:22px; height:22px; border-radius:6px; }
.ledger-mock-brand span{ font:600 .78rem var(--font-head); color:var(--ink); }
.ledger-mock-tabs{ display:flex; gap:2px; margin-left:auto; overflow:hidden; }
.ledger-mock-tabs span{ font:500 .6rem var(--font-body); color:var(--ink-faint); padding:5px 8px; border-radius:6px; white-space:nowrap; }
.ledger-mock-tabs span.is-active{ color:var(--blue); background:rgba(79,179,255,.12); }

.ledger-mock-body{ padding:16px; display:grid; gap:12px; }
.ledger-mock-kicker{ margin:0; font:500 .56rem var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--blue); }
.ledger-mock-title{ margin:2px 0 0; font:600 1.05rem var(--font-head); color:var(--ink); }

.ledger-mock-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.ledger-mock-card{ padding:10px 11px; border:1px solid var(--line); border-radius:10px; background:var(--panel); display:grid; gap:5px; align-content:start; }
.ledger-mock-label{ display:flex; align-items:center; gap:5px; font:500 .5rem var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.ledger-mock-label svg{ width:10px; height:10px; flex-shrink:0; }
.ledger-mock-value{ font:500 .92rem var(--font-mono); color:var(--ink); }
.ledger-mock-value.ok{ color:var(--lm-ok); }
.ledger-mock-value.danger{ color:var(--lm-danger); }
.ledger-mock-value.warn{ color:var(--lm-warn); }
.ledger-mock-detail{ font:400 .5rem var(--font-mono); color:var(--ink-faint); line-height:1.4; }

.ledger-mock-split{ display:grid; grid-template-columns:.8fr 1.2fr; gap:8px; }
.ledger-mock-orders{ display:grid; gap:7px; }
.ledger-mock-orders h4{ margin:0 0 2px; font:600 .66rem var(--font-head); color:var(--ink); }
.ledger-mock-order{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:7px; border-top:1px solid var(--line); }
.ledger-mock-order p{ margin:0; font:500 .58rem var(--font-body); color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ledger-mock-order p small{ font-weight:400; color:var(--ink-faint); }
.ledger-mock-tags{ display:flex; gap:4px; flex-shrink:0; }
.ledger-mock-tag{ font:500 .46rem var(--font-mono); letter-spacing:.06em; text-transform:uppercase; padding:3px 6px; border-radius:999px;
  border:1px solid var(--line-strong); color:var(--ink-dim); }
.ledger-mock-tag.danger{ color:var(--lm-danger); border-color:color-mix(in srgb, var(--lm-danger) 45%, transparent); background:color-mix(in srgb, var(--lm-danger) 10%, transparent); }
.ledger-mock-tag.accent{ color:var(--blue); border-color:color-mix(in srgb, var(--blue) 45%, transparent); }

@media (max-width:560px){
  .ledger-mock-kpis{ grid-template-columns:1fr 1fr; }
  .ledger-mock-split{ grid-template-columns:1fr; }
  .ledger-mock-tabs span:nth-child(n+4){ display:none; }
}

/* ===== StencilLab mockup (.slm) — autocontenido, toma los tokens del sitio ===== */
.slm{
  --slm-bg: var(--bg, #05070a);
  --slm-bg1: var(--bg-1, #0a0e14);
  --slm-bg2: var(--bg-2, #0d1219);
  --slm-panel: var(--panel, #0f151d);
  --slm-line: var(--line, rgba(160,200,230,.12));
  --slm-line-strong: var(--line-strong, rgba(160,200,230,.22));
  --slm-ink: var(--ink, #eef3f7);
  --slm-ink-dim: var(--ink-dim, #9fb0bf);
  --slm-ink-faint: var(--ink-faint, #6a7a89);
  --slm-blue: var(--blue, #4fb3ff);
  --slm-blue2: var(--blue-2, #1e8fe0);
  --slm-ok: #22c55e;
  --slm-paper: #eef3f7;
  --slm-sheet: #3b4f63;
  --slm-hatch: #9fb0bf;
  --slm-head: var(--font-head, "Space Grotesk", system-ui, sans-serif);
  --slm-body: var(--font-body, "Inter", system-ui, sans-serif);
  --slm-mono: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  --slm-radius: var(--radius, 14px);
  --slm-radius-sm: var(--radius-sm, 9px);
  max-width:1080px; margin:0 auto; box-sizing:border-box; text-align:left;
  font-family:var(--slm-body); color:var(--slm-ink); font-size:14px; line-height:1.45;
  background:var(--slm-bg); border:1px solid var(--slm-line-strong); border-radius:var(--slm-radius);
  overflow:hidden; box-shadow:0 30px 80px -40px rgba(0,0,0,.6);
}
:root[data-theme="light"] .slm{ --slm-ok:#16a34a; --slm-paper:#ffffff; --slm-sheet:#6a7f94; --slm-hatch:#a3b3c3; }
.slm *, .slm *::before, .slm *::after{ box-sizing:border-box; }
.slm-chrome{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:var(--slm-bg1); border-bottom:1px solid var(--slm-line); }
.slm-dot{ width:10px; height:10px; border-radius:50%; background:var(--slm-line-strong); }
.slm-url{ margin-left:10px; font-family:var(--slm-mono); font-size:11px; color:var(--slm-ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slm-header{ display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid var(--slm-line); background:var(--slm-bg); }
.slm-logo{ width:28px; height:28px; flex-shrink:0; }
.slm-brand{ display:grid; min-width:0; }
.slm-name{ font-family:var(--slm-head); font-weight:700; font-size:15px; letter-spacing:-.01em; white-space:nowrap; }
.slm-name b{ color:var(--slm-blue2); font-weight:700; }
.slm-by{ font-size:9px; font-weight:500; text-transform:uppercase; letter-spacing:.2em; color:var(--slm-ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slm-nav{ display:flex; gap:4px; margin-left:8px; }
.slm-nav span{ padding:5px 10px; border-radius:8px; font-size:13px; color:var(--slm-ink-dim); }
.slm-nav .is-on{ background:var(--slm-bg2); color:var(--slm-ink); }
.slm-user{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.slm-pro{ font-family:var(--slm-mono); font-size:10px; font-weight:500; letter-spacing:.08em; padding:2px 8px; border-radius:999px; background:rgba(79,179,255,.14); color:var(--slm-blue); }
.slm-avatar{ width:26px; height:26px; border-radius:50%; background:var(--slm-blue2); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:700; }
.slm-body{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:14px; padding:14px; background:var(--slm-bg); }
.slm-side{ background:var(--slm-panel); border:1px solid var(--slm-line); border-radius:var(--slm-radius); padding:14px; display:flex; flex-direction:column; gap:16px; }
.slm-kicker{ font-family:var(--slm-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--slm-blue); margin:0 0 8px; }
.slm-file{ display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--slm-line); border-radius:var(--slm-radius-sm); background:var(--slm-bg); }
.slm-file-badge{ width:34px; height:34px; border-radius:8px; background:var(--slm-bg2); display:grid; place-items:center; font-family:var(--slm-mono); font-size:10px; color:var(--slm-ink-dim); }
.slm-file small{ display:block; color:var(--slm-ink-faint); font-size:11px; }
.slm-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:var(--slm-ink-dim); margin-top:6px; }
.slm-num{ display:inline-flex; align-items:center; border:1px solid var(--slm-line-strong); border-radius:8px; background:var(--slm-bg); font-variant-numeric:tabular-nums; }
.slm-num i{ font-style:normal; width:22px; text-align:center; color:var(--slm-ink-faint); }
.slm-num b{ font-weight:500; color:var(--slm-ink); padding:3px 2px; }
.slm-num em{ font-style:normal; font-size:11px; color:var(--slm-ink-faint); padding-right:4px; }
.slm-layers{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.slm-layer{ display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--slm-line); border-radius:var(--slm-radius-sm); font-size:13px; }
.slm-layer.is-on{ border-color:var(--slm-blue); background:rgba(79,179,255,.06); }
.slm-layer .n{ font-family:var(--slm-mono); font-size:11px; color:var(--slm-ink-faint); width:12px; }
.slm-sw{ width:16px; height:16px; border-radius:4px; flex-shrink:0; border:1px solid var(--slm-line-strong); }
.slm-layer .z{ margin-left:auto; font-size:11px; color:var(--slm-ink-faint); }
.slm-seg{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:3px; border:1px solid var(--slm-line-strong); border-radius:10px; background:var(--slm-bg); }
.slm-seg span{ text-align:center; font-size:12px; padding:5px 4px; border-radius:7px; color:var(--slm-ink-dim); white-space:nowrap; }
.slm-seg .is-on{ background:var(--slm-bg2); color:var(--slm-ink); }
.slm-ok{ font-size:12px; color:var(--slm-ok); margin:8px 0 0; }
.slm-btn{ display:block; width:100%; text-align:center; padding:11px 16px; border-radius:999px; font-weight:600; font-size:13px; color:var(--slm-bg); background:linear-gradient(135deg, var(--slm-blue), var(--slm-blue2)); }
.slm-note{ text-align:center; font-size:11px; color:var(--slm-ink-faint); margin:6px 0 0; }
.slm-main{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.slm-tabs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.slm-chips{ display:flex; gap:6px; overflow:hidden; }
.slm-chip{ display:inline-flex; align-items:center; gap:6px; flex-shrink:0; padding:4px 10px; border:1px solid var(--slm-line-strong); border-radius:999px; font-size:11px; color:var(--slm-ink-dim); }
.slm-chip.is-on{ border-color:var(--slm-blue); color:var(--slm-ink); }
.slm-chip i{ width:9px; height:9px; border-radius:50%; }
.slm-tools{ display:flex; gap:4px; padding:4px; border:1px solid var(--slm-line); border-radius:10px; background:var(--slm-panel); overflow:hidden; }
.slm-tools span{ font-size:11px; padding:5px 9px; border-radius:7px; color:var(--slm-ink-dim); white-space:nowrap; }
.slm-tools .is-on{ background:var(--slm-bg2); color:var(--slm-ink); }
.slm-view{ position:relative; border-radius:var(--slm-radius); background:linear-gradient(to bottom, var(--slm-bg2), var(--slm-bg1)); border:1px solid var(--slm-line); padding:18px; display:grid; place-items:center; min-height:330px; }
.slm-view svg{ width:100%; max-width:560px; height:auto; display:block; }
.slm-size{ position:absolute; left:12px; bottom:12px; font-family:var(--slm-mono); font-size:10px; color:var(--slm-ink-dim); background:var(--slm-bg); border:1px solid var(--slm-line); border-radius:8px; padding:3px 8px; }
.slm-ms{ font-family:var(--slm-mono); font-size:10px; color:var(--slm-ink-faint); }
@media (max-width:560px){
  .slm-body{ grid-template-columns:1fr; }
  .slm-main{ order:-1; }
  .slm-nav{ display:none; }
  .slm-view{ min-height:220px; padding:10px; }
}

/* ===== LlaveroLab mockup interactivo (.llm) — autocontenido, toma los tokens del sitio ===== */
/* --- Mockup (todo bajo .llm, sin dependencias) --- */
.llm{
  --ok:#22c55e; font-size:14px; text-align:left;
  font-family:var(--font-body); color:var(--ink); background:var(--bg);
  border:1px solid var(--line-strong); border-radius:18px; overflow:hidden;
  box-shadow:0 30px 80px -30px var(--shadow); max-width:1100px; margin:0 auto; line-height:1.4;
}
.llm *{ box-sizing:border-box; }
.llm button{ font-family:inherit; cursor:pointer; }

/* Barra de ventana */
.llm-chrome{ display:flex; align-items:center; gap:6px; padding:10px 14px; background:var(--bg-1); border-bottom:1px solid var(--line); }
.llm-dot{ width:10px; height:10px; border-radius:50%; background:var(--line-strong); }
.llm-url{ margin-left:10px; font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }

/* Cabecera de la app */
.llm-head{ display:flex; align-items:center; gap:14px; padding:10px 18px; border-bottom:1px solid var(--line); }
.llm-lockup{ display:flex; flex-direction:column; min-width:0; }
.llm-name{ display:flex; align-items:center; gap:8px; font-weight:600; letter-spacing:-.01em; }
.llm-name b{ color:var(--blue-2); font-weight:600; }
.llm-ico{ width:26px; height:14px; border-radius:999px; background:#f59e0b; position:relative; }
.llm-ico::before{ content:""; position:absolute; left:3px; top:3px; width:8px; height:8px; border-radius:50%; background:var(--bg); }
.llm-by{ font-size:9px; font-weight:500; text-transform:uppercase; letter-spacing:.2em; color:var(--ink-faint); white-space:nowrap; }
.llm-nav{ display:flex; gap:4px; }
.llm-nav span{ font-size:13px; padding:6px 11px; border-radius:9px; color:var(--ink-dim); }
.llm-nav .is-on{ background:var(--bg-2); color:var(--ink); }
.llm-login{ margin-left:auto; font-size:13px; font-weight:600; padding:6px 12px; border-radius:9px; background:var(--ink); color:var(--bg); }

/* Isla de apartados (control segmentado) */
.llm-island{ display:flex; justify-content:center; padding:12px 0 2px; }
.llm-seg{ display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:999px; border:1px solid var(--line-strong); background:var(--panel); box-shadow:0 10px 30px -12px var(--shadow); }
.llm-seg button{ border:0; background:none; font-size:13px; font-weight:600; padding:6px 18px; border-radius:999px; color:var(--ink-dim); white-space:nowrap; }
.llm-seg .is-on{ background:linear-gradient(135deg,var(--blue),var(--blue-2)); color:var(--bg); box-shadow:0 6px 18px -6px var(--blue); }

/* Cuerpo: vista 3D + panel */
.llm-body{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; padding:14px 18px 18px; }
.llm-view{ position:relative; min-height:400px; border-radius:var(--radius); background:linear-gradient(180deg,var(--bg-2),var(--bg-1)); border:1px solid var(--line); display:grid; place-items:center; overflow:hidden; perspective:900px; padding:40px 16px; }
.llm-chip{ position:absolute; font-family:var(--font-mono); font-size:11px; padding:5px 10px; border-radius:8px; background:color-mix(in srgb,var(--bg) 80%,transparent); color:var(--ink-dim); }
.llm-size{ left:12px; bottom:12px; }
.llm-hint{ right:12px; bottom:12px; color:var(--ink-faint); }

/* El llavero: los colores son los del objeto impreso (los elige la usuaria) */
.llm-key{
  --base:#0f172a; --edge:#020617;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  max-width:100%; padding:18px 30px 18px 52px; border-radius:999px; background:var(--base);
  transform:rotateX(24deg) rotateZ(-3deg); transition:border-radius .3s, background .3s, padding .3s;
  box-shadow:0 3px 0 var(--edge),0 6px 0 var(--edge),0 26px 40px -12px rgba(0,0,0,.55);
}
.llm-key[data-style="plate"]{ border-radius:12px; }
.llm-key[data-ring="none"], .llm-key[data-ring="loop"]{ padding-left:30px; }
.llm-key[data-ring="loop"][data-side="top"]{ padding-left:30px; }
.llm-key::before{ /* agujero */
  content:""; position:absolute; left:17px; top:50%; width:16px; height:16px; margin-top:-8px; border-radius:50%;
  background:var(--bg-2); box-shadow:inset 0 2px 3px rgba(0,0,0,.45);
}
.llm-key[data-ring="none"]::before, .llm-key[data-ring="loop"]::before{ display:none; }
.llm-loop{ /* argolla externa */
  display:none; position:absolute; left:-26px; top:50%; width:34px; height:34px; margin-top:-17px; border-radius:50%;
  border:7px solid var(--base); box-shadow:0 3px 0 var(--edge);
}
.llm-key[data-ring="loop"] .llm-loop{ display:block; }
.llm-key[data-ring="loop"][data-side="top"] .llm-loop{ left:50%; top:-26px; margin:0 0 0 -17px; }
.llm-word{ font-family:var(--font-head); font-weight:700; font-size:46px; line-height:1.02; letter-spacing:-.01em; text-align:center; white-space:pre; }
.llm-word span{ text-shadow:0 3px 0 rgba(0,0,0,.35); }
/* Emoji de un solo color, como sale impreso: el glifo transparente y su sombra con el color elegido. */
.llm-word .llm-emo{ color:transparent !important; font-size:.82em; filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)); }

/* Panel lateral */
.llm-panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:14px; }
.llm-title{ display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:600; padding-bottom:10px; border-bottom:1px solid var(--line); }
.llm-reset{ border:0; background:none; font-size:11px; color:var(--ink-faint); }
.llm-reset:hover{ color:var(--blue); }
.llm-k{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin:0 0 7px; }
.llm-k small{ letter-spacing:0; text-transform:none; color:var(--ink-faint); font-size:10.5px; }
.llm-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.llm-pill{ position:relative; font-size:11.5px; text-align:center; padding:6px 4px; border-radius:var(--radius-sm); border:1px solid var(--line-strong); color:var(--ink-dim); background:var(--bg); white-space:nowrap; transition:border-color .2s,color .2s; }
.llm-pill:hover{ border-color:var(--blue); color:var(--ink); }
[data-group="tpl"] .llm-pill{ white-space:normal; line-height:1.15; padding:6px 3px; }
.llm-pill.is-on{ border-color:var(--blue); color:var(--ink); background:color-mix(in srgb,var(--blue) 12%,var(--bg)); }
.llm-pro{ position:absolute; top:-7px; right:-3px; font-style:normal; font-size:8.5px; font-weight:700; letter-spacing:.06em; padding:1px 5px; border-radius:999px; background:color-mix(in srgb,var(--blue) 18%,var(--panel)); color:var(--blue); }
.llm-text{ width:100%; resize:none; font:500 15px var(--font-body); padding:9px 11px; border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:var(--bg); color:var(--ink); outline:none; }
.llm-text:focus{ border-color:var(--blue); }
.llm-swatches{ display:flex; flex-wrap:wrap; gap:6px; }
.llm-sw{ width:22px; height:22px; border-radius:50%; border:2px solid var(--line-strong); padding:0; }
.llm-sw.is-on{ border-color:var(--blue); box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 35%,transparent); }
.llm-sub{ font-size:12px; color:var(--ink-dim); margin:0 0 5px; }
.llm-note{ font-size:11.5px; color:var(--blue); margin:0; }
.llm-note:empty{ display:none; }
.llm-limit{ margin-top:5px; }
.llm-steps{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; font-size:11.5px; color:var(--ink-dim); }
.llm-steps li{ display:flex; gap:7px; }
.llm-btn{ border:0; display:block; width:100%; text-align:center; font-weight:600; font-size:14px; padding:11px; border-radius:999px; background:linear-gradient(135deg,var(--blue),var(--blue-2)); color:var(--bg); transition:transform .25s; }
.llm-btn:hover{ transform:translateY(-2px); }
.llm-foot{ text-align:center; font-size:11px; color:var(--ink-faint); }

/* Apartados: Llaveros (por defecto) y QR y NFC */
.llm[data-mode="qr"] .llm-only-k, .llm:not([data-mode="qr"]) .llm-only-q{ display:none !important; }
.llm-seg button{ position:relative; }

/* Llavero con QR (base blanca y QR negro, lo que mejor leen los teléfonos) */
.llm-qinner{ display:flex; align-items:center; gap:16px; }
.llm-qkey[data-place="below"] .llm-qinner{ flex-direction:column; gap:10px; }
.llm-qkey .llm-word{ font-size:34px; }
.llm-qkey[data-nfc="1"]{ min-width:132px; min-height:132px; }
.llm-qsvg{ display:block; filter:drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.llm-ghost{ /* tag NFC escondido, se dibuja semitransparente */
  position:absolute; left:50%; top:50%; width:85px; height:85px; margin:-42.5px 0 0 -42.5px; border-radius:50%;
  background:rgba(34,211,238,.28); border:1px dashed rgba(34,211,238,.8); pointer-events:none;
}
.llm-qkey:not([data-nfc="1"]) .llm-ghost{ display:none; }
.llm-input{ width:100%; font:500 13px var(--font-body); padding:8px 11px; border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:var(--bg); color:var(--ink); outline:none; }
.llm-input:focus{ border-color:var(--blue); }
.llm-label{ display:block; font-size:11px; color:var(--ink-faint); margin:0 0 4px; }
.llm-fields{ display:flex; flex-direction:column; gap:8px; }
.llm-qstat{ font-size:12px; padding:8px 11px; border-radius:var(--radius-sm); font-weight:500; }
.llm-qstat.is-ok{ background:color-mix(in srgb,var(--ok) 14%,transparent); color:var(--ok); }
.llm-qstat.is-warn{ background:color-mix(in srgb,var(--blue) 12%,transparent); color:var(--blue); }
.llm-fix{ display:inline-block; margin-top:6px; border:0; border-radius:999px; padding:4px 10px; font-size:11.5px; font-weight:600; background:var(--blue); color:var(--bg); }
.llm-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:var(--ink-dim); }
.llm-num{ display:flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:12px; border-radius:var(--radius-sm); border:1px solid var(--line-strong); color:var(--ink); }
.llm-num button{ border:0; background:none; color:var(--ink-dim); width:28px; height:28px; font-size:15px; }
.llm-num button:hover{ color:var(--blue); }
.llm-num i{ font-style:normal; color:var(--ink-faint); }
.llm-nfcbtn{ position:relative; width:100%; text-align:left; font-size:12.5px; padding:10px 12px; border-radius:var(--radius-sm); border:1px dashed var(--line-strong); background:transparent; color:var(--ink-dim); }
.llm-nfcbtn:hover{ border-color:var(--blue); color:var(--ink); }
.llm-nfcbtn.is-on{ border-style:solid; border-color:var(--blue); color:var(--ink); background:color-mix(in srgb,var(--blue) 10%,var(--bg)); }
.llm-nfcbtn .llm-pro{ top:6px; right:8px; }

/* Móvil: columnas colapsadas */
@media (max-width:560px){
  .llm-body{ grid-template-columns:1fr; padding:12px; }
  .llm-view{ min-height:240px; }
  .llm-word{ font-size:32px; }
  .llm-qkey .llm-word{ font-size:24px; }
  .llm-nav, .llm-chrome .llm-url, .llm-hint{ display:none; }
  .llm-seg button{ padding:6px 12px; }
}
:root[data-theme="light"] .llm{ --ok:#16a34a; }

.app-copy h2{ font-family:var(--font-head); font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 14px; }
.app-copy > p{ color:var(--ink-dim); max-width:44ch; margin:0 0 22px; }
.app-badges{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.store-badge{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line-strong); border-radius:14px; background:var(--panel);
  padding:8px 18px 8px 8px;
  transition:border-color .25s, transform .25s var(--ease), background .25s;
}
.store-badge:hover{ border-color:var(--blue); transform:translateY(-2px); }
.store-badge-icon{
  width:42px; height:42px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(79,179,255,.22), rgba(79,179,255,.06));
  color:var(--blue);
}
.store-badge-icon svg{ width:18px; height:18px; }
.store-badge-text{ display:flex; flex-direction:column; font-weight:600; font-size:.9rem; color:var(--ink); }
.store-badge-text small{ font-weight:400; color:var(--ink-faint); font-size:.68rem; }

.privacy-note{ margin:18px 0 0; font-size:.84rem; }
.privacy-note a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.privacy-note a:hover{ color:var(--ice); }

/* ============ Legal document ============ */
.legal{ max-width:760px; margin:0 auto; padding:0 24px 96px; }
.legal .updated{ font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint); margin:0 0 36px; }
.legal h2{ font-family:var(--font-head); font-size:1.25rem; margin:40px 0 14px; }
.legal h2:first-of-type{ margin-top:0; }
.legal p{ color:var(--ink-dim); margin:0 0 14px; line-height:1.7; }
.legal ul{ margin:0 0 14px; padding:0; display:grid; gap:10px; }
.legal ul li{ color:var(--ink-dim); padding-left:20px; position:relative; line-height:1.6; }
.legal ul li::before{ content:"—"; color:var(--blue); position:absolute; left:0; }
.legal a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover{ color:var(--ice); }
.legal strong{ color:var(--ink); }

/* ============ Calculator ============ */
.calc{
  display:grid; grid-template-columns:1.2fr 1fr; gap:0;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.calc-inputs{ padding:32px; display:grid; grid-template-columns:1fr 1fr; gap:20px; background:var(--bg); }
.calc-inputs label{ display:flex; flex-direction:column; gap:8px; font-size:.82rem; color:var(--ink-dim); }
.calc-inputs input{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; color:var(--ink); font-family:var(--font-mono); font-size:.92rem;
}
.calc-inputs input:focus{ outline:none; border-color:var(--blue); }
.calc-output{ padding:32px; background:linear-gradient(160deg, var(--panel), var(--bg-2)); display:flex; flex-direction:column; gap:14px; justify-content:center; }
.calc-row{ display:flex; justify-content:space-between; align-items:baseline; font-size:.9rem; color:var(--ink-dim); }
.calc-row b{ color:var(--ink); font-family:var(--font-mono); font-weight:600; }
.calc-row-total{ border-top:1px solid var(--line); padding-top:14px; }
.calc-row-total b{ font-size:1.1rem; }
.calc-row-price{ background:rgba(79,179,255,.08); border-radius:10px; padding:14px 16px; }
.calc-row-price span{ color:var(--ice); font-weight:600; }
.calc-row-price b{ color:var(--blue); font-size:1.3rem; }
.calc-note{ font-size:.74rem; color:var(--ink-faint); margin:6px 0 0; }

.calc-explain{ margin-top:40px; display:grid; gap:10px; max-width:640px; }
.calc-explain li{ font-size:.9rem; color:var(--ink-dim); padding-left:22px; position:relative; }
.calc-explain li::before{ content:"—"; color:var(--blue); position:absolute; left:0; }
.calc-explain b{ color:var(--ink); }

.tool-cta{ margin-top:48px; text-align:center; }
.tool-cta p{ color:var(--ink-dim); margin:0 0 16px; font-size:.92rem; }

/* ============ About ============ */
.about{ text-align:center; }
.about-inner{ max-width:680px; margin:0 auto; }
.about-inner h2{ font-family:var(--font-head); font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 20px; }
.about-inner p{ color:var(--ink-dim); margin:0 0 16px; }

/* ============ Custom CTA ============ */
.custom-cta{ max-width:none; background:linear-gradient(180deg, transparent, rgba(79,179,255,.05)); text-align:center; }
.custom-inner{
  max-width:640px; margin:0 auto; padding:0 24px;
}
.custom-copy h2{ font-family:var(--font-head); font-size:clamp(1.6rem,3vw,2.2rem); margin:0 0 14px; }
.custom-copy > p{ color:var(--ink-dim); max-width:46ch; margin:0 auto 30px; }
.custom-checklist{
  display:inline-grid; grid-template-columns:1fr 1fr; gap:10px 24px;
  text-align:left; margin:0 auto 36px;
}
.custom-checklist li{ font-size:.88rem; color:var(--ink-dim); padding-left:20px; position:relative; }
.custom-checklist li::before{ content:"✓"; color:var(--blue); position:absolute; left:0; }

.cta-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cta-note{ font-size:.8rem; color:var(--ink-faint); margin:20px 0 0; }

/* ============ Botón que se traslada a flotante al hacer scroll ============ */
#cultsLibraryLink.is-floating{
  position:fixed; right:24px; bottom:24px; z-index:300;
  box-shadow:0 14px 32px -10px rgba(0,0,0,.5);
}

@media (max-width:640px){
  #cultsLibraryLink.is-floating{ right:16px; bottom:16px; padding:12px 18px; font-size:.82rem; }
}

/* ============ Footer ============ */
.footer{ border-top:1px solid var(--line); padding:20px 24px 32px; }
.footer-inner{ max-width:var(--maxw); margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.footer-tagline{ color:var(--ink-dim); font-size:.9rem; margin:0; }
.footer-social{ display:flex; gap:12px; padding-top:10px; border-top:1px solid var(--line); }
.footer-social a{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; color:var(--ink-dim); background:var(--panel);
  transition:transform .22s var(--ease), color .22s, border-color .22s, background .22s, box-shadow .22s;
}
.footer-social svg{ width:18px; height:18px; }
.footer-social a:hover{
  color:#fff; border-color:transparent; transform:translateY(-4px) scale(1.06);
  box-shadow:0 14px 26px -12px var(--shadow);
}
.footer-social a[aria-label="instagram"]:hover{ background:radial-gradient(circle at 30% 110%, #fdf497, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.footer-social a[aria-label="tiktok"]:hover{ background:linear-gradient(135deg,#25f4ee,#000 55%,#fe2c55); }
.footer-social a[aria-label="youtube"]:hover{ background:#ff0000; }
.footer-social a[aria-label="whatsapp"]:hover{ background:#25d366; }
.footer-social a[aria-label="cults"]:hover{ background:#8b5cf6; }
.footer-copy{ color:var(--ink-faint); font-size:.78rem; margin:12px 0 0; }

/* ============ Botón flotante "volver arriba" ============ */
.back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:40;
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line-strong); background:var(--panel); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 14px 28px -12px var(--shadow);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, background .2s, color .2s, border-color .2s;
}
.back-to-top svg{ width:19px; height:19px; }
.back-to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.back-to-top:hover{ background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-3px); }

@media (max-width: 640px){
  .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; }
}

/* ============ Responsive ============ */
@media (max-width: 980px){
  .hub-grid{ grid-template-columns:repeat(2,1fr); }
  .hub-card-wide{ grid-column:span 2; }
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .feat-showcase{ grid-template-columns:repeat(2,1fr); }
  .process{ grid-template-columns:repeat(2,1fr); }
  .project-grid{ grid-template-columns:repeat(2,1fr); }
  .shop-grid{ grid-template-columns:repeat(2,1fr); }
  .app-section{ grid-template-columns:1fr; text-align:center; }
  .app-copy > p{ margin-left:auto; margin-right:auto; }
  .app-badges{ justify-content:center; }
  .calc{ grid-template-columns:1fr; }
}

@media (max-width: 720px){
  .nav-links{
    position:fixed; inset:64px 16px auto 16px; flex-direction:column; align-items:stretch;
    background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius);
    padding:18px; gap:4px;
    max-height:calc(100vh - 84px); overflow-y:auto;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s;
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ padding:12px 10px; border-radius:8px; }
  .nav-links a:hover{ background:rgba(79,179,255,.08); }
  .nav-cta{ text-align:center; }
  .nav-toggle{ display:flex; }

  .hub-grid{ grid-template-columns:1fr; }
  .hub-card-wide{ grid-column:span 1; }
  .cat-grid{ grid-template-columns:1fr; }
  .catalog-content .cat-grid{ grid-template-columns:1fr; }
  .feat-showcase{ grid-template-columns:1fr; }
  .feat-item-wide{ flex-direction:column; }
  .process{ grid-template-columns:1fr; }
  .project-grid{ grid-template-columns:1fr; }
  .shop-grid{ grid-template-columns:repeat(2,1fr); }
  .link-list{ grid-template-columns:1fr; }
  .calc-inputs{ grid-template-columns:1fr; }
  .custom-checklist{ grid-template-columns:1fr; }
  .section{ padding:72px 20px; }
}

/* ============ Admin ============ */
.admin{ max-width:760px; }
.admin-card{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); padding:28px; margin-bottom:24px;
}
.admin-card h3{ font-family:var(--font-head); font-size:1.1rem; margin:0 0 16px; }
.admin-card > p{ color:var(--ink-dim); font-size:.9rem; margin:0 0 16px; }
.admin-card label{ display:flex; flex-direction:column; gap:8px; font-size:.82rem; color:var(--ink-dim); margin-bottom:16px; min-width:0; }
.admin-card input, .admin-card textarea, .admin-card select{
  width:100%; background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; color:var(--ink); font-family:var(--font-body); font-size:.92rem; resize:vertical;
}
.admin-card input:focus, .admin-card textarea:focus, .admin-card select:focus{ outline:none; border-color:var(--blue); }
.f-image-row{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:12px; margin-top:10px; }
.f-image-preview{ display:block; width:100%; max-width:220px; aspect-ratio:1/1; object-fit:cover; border-radius:10px; margin-top:0; border:1px solid var(--line); }
.btn-edit-image{ flex-shrink:0; padding:8px 14px; font-size:.82rem; }
.admin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.admin-error{ color:#e0524a; font-size:.84rem; margin:12px 0 0; min-height:1em; }
.admin-status{ color:var(--blue); font-size:.82rem; margin:10px 0 0; min-height:1em; }
.admin-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:12px; flex-wrap:wrap; }
.admin-user{ font-family:var(--font-mono); font-size:.84rem; color:var(--ink-dim); }
.admin-list{ display:flex; flex-direction:column; gap:14px; margin-bottom:16px; }

.store-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.store-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg);
  padding:10px 14px;
}
.store-row .f-store-name{ flex:1 1 140px; min-width:0; }
.store-row-actions{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.store-row label.store-affiliated{
  display:flex; flex-direction:row; align-items:center; gap:8px; margin:0;
  font-size:.84rem; color:var(--ink-dim); cursor:pointer;
}
.store-row .f-store-affiliated{ width:18px; height:18px; accent-color:var(--blue); cursor:pointer; }
.store-row .btn-delete-store{
  flex-shrink:0; width:36px; height:36px; padding:0; border-radius:8px; border:none;
  background:transparent; color:var(--ink-faint); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.store-row .btn-delete-store:hover{ color:#e0524a; background:rgba(224,82,74,.1); }
.store-row .btn-delete-store svg{ width:16px; height:16px; }
.admin-item{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg); overflow:hidden; }
.admin-item-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; padding:0 18px; min-width:0; }
.admin-item-full{ grid-column:1 / -1; }
.admin-item:not([data-collapsible]) .admin-item-grid{ padding:18px; }

/* Encabezado clicable de items colapsables (proyectos, tienda) */
.admin-item-header{
  width:100%; display:flex; align-items:center; gap:12px;
  padding:12px 18px; background:none; border:none; cursor:pointer;
  font:inherit; color:var(--ink); text-align:left;
}
.admin-item-thumb{
  flex-shrink:0; width:44px; height:44px; border-radius:8px; overflow:hidden;
  background:var(--panel); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ink-faint);
}
.admin-item-thumb img{ width:100%; height:100%; object-fit:cover; }
.admin-item-thumb svg{ width:20px; height:20px; }
.admin-item-heading{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.admin-item-name{ font-size:.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-item-sub{ font-size:.78rem; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-item-chevron{ flex-shrink:0; width:16px; height:16px; color:var(--ink-faint); transition:transform .2s ease; }
.admin-item.open .admin-item-chevron{ transform:rotate(180deg); }
.admin-item-body{ padding:0 0 18px; }
.admin-item.open .admin-item-body{ padding-top:6px; }
.admin-item-body .cta-row{ padding:0 18px; }
.admin-item-body .admin-status{ padding:0 18px; }
.admin-item[data-collapsible] .admin-item-body{ display:none; }
.admin-item[data-collapsible].open .admin-item-body{ display:block; }

.admin-count{ font-family:var(--font-mono); font-size:.72rem; font-weight:400; color:var(--ink-faint); }

/* Navegación rápida entre secciones del admin */
.admin-quicknav{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px;
  position:sticky; top:78px; z-index:40;
  background:var(--nav-bg); backdrop-filter:blur(10px);
  padding:10px; border:1px solid var(--line); border-radius:var(--radius-sm);
}
.admin-quicknav a{
  padding:7px 14px; border-radius:999px; font-size:.82rem; color:var(--ink-dim);
  border:1px solid var(--line); transition:.2s;
}
.admin-quicknav a:hover{ color:var(--ink); border-color:var(--blue); background:rgba(79,179,255,.08); }

/* ============ Seguimiento de proyectos (privado, mobile-first) ============ */
.tracker-quickadd{ display:flex; gap:10px; margin-bottom:16px; }
.tracker-quick-input{
  flex:1; min-width:0; background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:0 14px; height:52px; color:var(--ink); font-family:var(--font-body); font-size:1rem;
}
.tracker-quick-input:focus{ outline:none; border-color:var(--blue); }
.tracker-quick-btn{
  flex-shrink:0; width:52px; height:52px; padding:0; border-radius:10px;
  font-size:1.4rem; line-height:1;
}
.tracker-filters{ margin-bottom:16px; }
.tracker-list{ display:flex; flex-direction:column; gap:12px; }
.tracker-empty{ color:var(--ink-dim); text-align:center; padding:32px 0; }
.tracker-card{
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg);
  padding:14px; position:relative;
}
.tracker-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.tracker-status{
  border:none; border-radius:999px; padding:9px 16px; font-size:.84rem; font-weight:600;
  background:rgba(159,176,191,.15); color:#9fb0bf; min-height:40px; cursor:pointer; transition:.2s;
}
.tracker-status:active{ transform:scale(.96); }
.tracker-status[data-status="proceso"]{ background:rgba(79,179,255,.15); color:var(--blue); }
.tracker-status[data-status="postproceso"]{ background:rgba(168,85,247,.18); color:#a855f7; }
.tracker-status[data-status="listo"]{ background:rgba(34,197,94,.18); color:#22c55e; }
.tracker-status[data-status="entregado"]{ background:rgba(75,93,112,.2); color:var(--ink-faint); }
.tracker-delete{
  flex-shrink:0; width:40px; height:40px; border-radius:8px; border:none;
  background:transparent; color:var(--ink-faint); cursor:pointer; transition:.2s;
  display:flex; align-items:center; justify-content:center;
}
.tracker-delete:hover{ color:#e0524a; background:rgba(224,82,74,.1); }
.tracker-delete svg{ width:18px; height:18px; }
.tracker-card-body{
  width:100%; background:none; border:none; padding:4px 0; text-align:left; cursor:pointer;
  font:inherit; color:var(--ink); display:flex; flex-direction:column; gap:6px;
}
.tracker-title-display{ font-family:var(--font-head); font-size:1.08rem; margin:0; }
.tracker-meta{ display:flex; flex-wrap:wrap; gap:10px; font-size:.82rem; color:var(--ink-dim); }
.tracker-overdue{ color:#e0524a; font-weight:600; }
.tracker-details{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.tracker-details label{ margin-bottom:12px; }
.tracker-install-hint{
  margin-top:20px; padding:14px 16px; border-radius:var(--radius-sm);
  border:1px dashed var(--line-strong); color:var(--ink-dim); font-size:.84rem; line-height:1.6;
}
.tracker-install-btn{
  display:inline; border:none; background:none; color:var(--blue); font-weight:600;
  font-size:inherit; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px;
}

@media (max-width: 640px){
  .admin-grid, .admin-item-grid{ grid-template-columns:1fr; }
}

/* ============ Recorte de imagen (modal) ============ */
.crop-overlay{
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.7); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.crop-overlay[hidden]{ display:none; }
.crop-modal{
  width:100%; max-width:420px; max-height:90vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:24px; box-shadow:0 40px 80px rgba(0,0,0,.5);
}
.crop-modal h3{ font-family:var(--font-head); font-size:1.05rem; margin:0 0 8px; }
.crop-modal > p{ color:var(--ink-dim); font-size:.84rem; margin:0 0 16px; }
.crop-viewport{
  position:relative; width:100%; aspect-ratio:var(--crop-ratio, 1/1);
  overflow:hidden; border-radius:10px; border:1px solid var(--line-strong);
  background:#000; cursor:grab; touch-action:none;
}
.crop-viewport.dragging{ cursor:grabbing; }
.crop-image{ position:absolute; top:0; left:0; max-width:none; user-select:none; pointer-events:none; }
.crop-zoom{ width:100%; margin:14px 0 4px; accent-color:var(--blue); }
.crop-actions{ margin-top:14px; }
.crop-actions .btn{ flex:1; }

/* ============ Spec list (ficha rápida) ============ */
.spec-list{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  margin:32px 0 0; padding:24px; text-align:left;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
}
.spec-list li{ display:flex; flex-direction:column; gap:4px; }
.spec-label{ font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); }
.spec-value{ font-weight:600; font-size:.9rem; color:var(--ink); }

.feature-note{
  margin-top:24px; padding:18px 20px;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:rgba(79,179,255,.06);
  font-size:.9rem; color:var(--ink-dim);
}
.feature-note strong{ color:var(--ink); }
.feature-note a{ color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.feature-note a:hover{ color:var(--ice); }

@media (max-width: 720px){
  .spec-list{ grid-template-columns:repeat(2,1fr); }
}

/* ============ Cults Library Hub — tema de marca ============ */
body.theme-cults{
  --blue: #a855f7;
  --blue-2: #6366f1;
  --blue-deep: #3b0764;
  --ice: #c4b5fd;
  --panel: #14121e;
  --bg-2: #171526;
  --line: rgba(180,140,255,.14);
  --line-strong: rgba(180,140,255,.26);
  --glow-1: rgba(147,51,234,.20);
  --glow-2: rgba(99,102,241,.16);
  --glow-3: rgba(88,28,135,.55);
  --shadow: rgba(20,10,40,.65);
}
:root[data-theme="light"] body.theme-cults{
  --blue: #7c3aed;
  --blue-2: #4f46e5;
  --blue-deep: #ede9fe;
  --ice: #5b21b6;
  --panel: #f7f4fe;
  --bg-2: #efe9fc;
  --line: rgba(124,58,237,.12);
  --line-strong: rgba(124,58,237,.24);
  --glow-1: rgba(124,58,237,.10);
  --glow-2: rgba(199,180,255,.35);
  --glow-3: rgba(199,180,255,.55);
}
:root[data-theme="light"] body.theme-cults .hero-title span{
  background-image:none;
  background:linear-gradient(90deg, #3b0764 0%, #6d28d9 48%, #a78bfa 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* transición lenta al entrar: solo mientras dura el "morph" inicial */
body.color-morph,
body.color-morph *{
  transition:
    background-color 1.8s ease,
    border-color 1.8s ease,
    color 1.8s ease,
    box-shadow 1.8s ease,
    transform .25s var(--ease) !important;
}

/* ============ Mockup real de Cults Library Hub ============ */
.cults-mock-wrap{ perspective:1400px; }
.cults-mock{
  width:100%; max-width:480px; margin:0 auto;
  border-radius:20px; overflow:hidden;
  background:rgba(19,19,26,.95);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 80px rgba(0,0,0,.6), 0 0 40px rgba(147,51,234,.12);
  opacity:0;
  transform:translateX(40px) rotateX(10deg) rotateY(-15deg) rotateZ(2deg);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.cults-mock.in{
  opacity:1;
  transform:translateX(0) rotateX(12deg) rotateY(-16deg) rotateZ(2deg);
}
.cults-mock.in:hover{
  transform:rotateX(4deg) rotateY(-4deg) rotateZ(0deg) scale(1.02);
}

.cults-mock-top{
  display:flex; align-items:center; gap:8px;
  padding:12px 16px; background:#1a1a26; border-bottom:1px solid rgba(255,255,255,.05);
}
.cults-mock-dot{ width:11px; height:11px; border-radius:50%; flex-shrink:0; }
.cults-mock-url{
  margin:0 auto; padding:3px 40px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.05); border-radius:6px;
  font-size:10px; color:rgba(255,255,255,.4); font-family:var(--font-mono);
  max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.cults-mock-body{ padding:20px; font-family:var(--font-mono); font-size:11px; color:rgba(255,255,255,.8); }
.cults-mock-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:18px; }
.cults-mock-search{
  flex:1; display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:8px; padding:8px 12px; color:rgba(255,255,255,.4); overflow:hidden;
}
.cults-mock-search span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cults-mock-load{
  flex-shrink:0; padding:8px 12px; border-radius:8px; font-weight:600; font-size:10px;
  background:rgba(147,51,234,.2); border:1px solid rgba(147,51,234,.3); color:#d8b4fe;
  white-space:nowrap;
}

.cults-mock-table{ border:1px solid rgba(255,255,255,.1); border-radius:12px; overflow:hidden; background:rgba(255,255,255,.03); }
.cults-mock-thead{
  display:grid; grid-template-columns:.7fr 1.8fr 1.2fr 1.2fr; gap:8px;
  padding:10px 12px; background:rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05);
  font-weight:600; font-size:10px; color:rgba(255,255,255,.5);
}
.cults-mock-row{
  display:grid; grid-template-columns:.7fr 1.8fr 1.2fr 1.2fr; gap:8px; align-items:center;
  padding:12px; background:rgba(147,51,234,.05);
}
.cults-mock-id{ color:#c084fc; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cults-mock-design{ color:#fff; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cults-mock-author{ color:rgba(255,255,255,.6); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cults-mock-status{
  display:inline-flex; align-items:center; gap:4px; width:fit-content;
  padding:3px 8px; border-radius:5px; font-size:9px; font-weight:700; white-space:nowrap;
}
.cults-mock-status.queue{ background:rgba(249,115,22,.2); color:#fb923c; border:1px solid rgba(249,115,22,.4); }
.cults-mock-status.done{ background:rgba(34,197,94,.12); color:#4ade80; border:1px solid rgba(34,197,94,.3); }
.cults-mock-status.failed{ background:rgba(239,68,68,.12); color:#f87171; border:1px solid rgba(239,68,68,.3); }

.cults-mock-note{ padding:16px; background:#101017; border-top:1px solid rgba(147,51,234,.1); }
.cults-mock-note-label{ font-size:10px; color:#c084fc; font-weight:700; margin-bottom:8px; }
.cults-mock-note-text{
  padding:10px; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.05);
  color:rgba(255,255,255,.8); font-style:italic; font-size:10px; line-height:1.6;
}
.cults-mock-save{ margin-top:10px; display:flex; justify-content:flex-end; }
.cults-mock-save span{
  padding:4px 10px; font-size:9px; font-weight:700; border-radius:6px;
  background:#a855f7; color:#fff;
}

@media (max-width: 720px){
  .cults-mock, .cults-mock.in, .cults-mock.in:hover{ transform:none; }
  .cults-mock-thead, .cults-mock-row{ grid-template-columns:.6fr 1.6fr 1fr; }
  .cults-mock-author{ display:none; }
}

/* ============ Nav dropdown (Herramientas) ============ */
.nav-item-dropdown{ position:relative; }
.nav-dropdown-toggle{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:0;
  font-family:var(--font-body); font-size:.88rem; color:var(--ink-dim); font-weight:500;
  transition:color .2s;
}
.nav-dropdown-toggle:hover{ color:var(--ink); }
.nav-caret{ width:12px; height:12px; flex-shrink:0; transition:transform .2s ease; }
.nav-item-dropdown.open .nav-caret{ transform:rotate(180deg); }

.nav-dropdown-menu{
  position:absolute; top:calc(100% + 16px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:220px; padding:8px;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:0 24px 48px -12px rgba(0,0,0,.55);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:60;
}
.nav-item-dropdown.open .nav-dropdown-menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-dropdown-menu a{
  padding:10px 12px; border-radius:8px; font-size:.86rem;
  color:var(--ink-dim); transition:background .15s, color .15s;
}
.nav-dropdown-menu a:hover{ background:rgba(79,179,255,.08); color:var(--ink); }

@media (max-width: 720px){
  .nav-item-dropdown{ width:100%; }
  .nav-dropdown-toggle{
    width:100%; justify-content:space-between;
    padding:12px 10px; border-radius:8px;
  }
  .nav-dropdown-toggle:hover{ background:rgba(79,179,255,.08); }
  .nav-dropdown-menu{
    position:static; transform:none; visibility:visible; opacity:1; pointer-events:none;
    min-width:0; box-shadow:none; border:none; background:transparent; padding:0 0 0 12px;
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav-item-dropdown.open .nav-dropdown-menu{ max-height:440px; pointer-events:auto; padding:4px 0 4px 12px; transform:none; }
  .nav-dropdown-menu a{ padding:10px; }
}

/* ============ Selector de idioma ============ */
.lang-switcher{
  display:flex; align-items:center; gap:2px;
  border:1px solid var(--line-strong); border-radius:999px; padding:3px;
}
.lang-btn{
  background:none; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.02em;
  color:var(--ink-faint); padding:5px 8px; border-radius:999px;
  transition:background .2s, color .2s;
}
.lang-btn:hover{ color:var(--ink-dim); }
.lang-btn.active{ background:var(--blue); color:var(--bg); }

@media (max-width: 480px){
  .lang-btn{ padding:5px 6px; }
}

@media (max-width: 420px){
  .brand-word{ display:none; }
}

/* ============ 3D Budget teaser: problema, demo CTA, precios ============ */
.problem-box{
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--panel); padding:32px; margin:0 auto; max-width:720px;
  text-align:center;
}
.problem-box .kicker{ display:block; text-align:center; }
.problem-box h3{ font-family:var(--font-head); font-size:1.3rem; margin:0 0 14px; }
.problem-box p{ color:var(--ink-dim); margin:0; }
.problem-box .cta-row{ margin-top:20px; }

.demo-cta{
  margin-top:28px; padding:24px 28px; border-radius:var(--radius);
  border:1px solid var(--line-strong); background:rgba(79,179,255,.06);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
}
.demo-cta p{ margin:0; color:var(--ink-dim); font-size:.94rem; max-width:52ch; flex:1; min-width:220px; }

.pricing-table{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  max-width:760px; margin:0 auto;
}
.pricing-row{
  display:grid; grid-template-columns:2fr 1fr 1fr;
  border-top:1px solid var(--line);
}
.pricing-row:first-child{ border-top:none; }
.pricing-row > span{
  padding:14px 12px; font-size:.86rem; color:var(--ink-dim);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.pricing-row > span:first-child{ justify-content:flex-start; text-align:left; color:var(--ink); }
.pricing-head{ background:var(--panel); }
.pricing-head > span{ font-family:var(--font-head); font-weight:600; color:var(--ink); }
.pricing-col-premium{ background:rgba(79,179,255,.07); }
.pricing-check{ color:var(--blue); font-weight:700; font-size:1rem; }
.pricing-dash{ color:var(--ink-faint); }

@media (max-width: 640px){
  .pricing-row{ grid-template-columns:1.5fr 1fr 1fr; }
  .pricing-row > span{ padding:12px 8px; font-size:.78rem; }
  .demo-cta{ flex-direction:column; align-items:stretch; text-align:center; }
  .demo-cta p{ text-align:center; }
}