/*
 * se7en beatlab — Design system 2026 v2 "la casa de los personajes" (plan F6).
 * ADN extraído de los plugins reales (wrappers/common/Se7enSupercell.h + landing del dueño):
 * azul marino profundo #090d13, acción dorada #f3cd4f, física de tinta
 * (borde negro + sombra dura desplazada que se comprime al presionar), texto acero.
 * Cada plugin conserva su LED. Los veredictos (ok/warn/error/info) son SEMÁNTICA, no marca.
 * Scope: .s7-scope. Display Bricolage Grotesque + Inter body + JetBrains Mono datos.
 */

.s7-scope {
  --s7-bg: #090d13;              /* carbón azulado: oscuro sin caer en negro puro */
  --s7-bg-2: #0e141d;
  --s7-surface: #141b25;
  --s7-surface-2: #1a2431;
  --s7-line: rgba(226,232,240,.10);
  --s7-line-2: rgba(226,232,240,.19);
  --s7-text: #f1eee8;            /* marfil suave: menos fatiga que blanco azulado */
  --s7-text-dim: #b5bfcc;
  --s7-text-mute: #818c9d;

  --s7-accent: #f3cd4f;          /* oro cálido, reservado para acción y señal */
  --s7-accent-2: #d9aa2f;
  --s7-accent-dim: rgba(243,205,79,.46);
  --s7-accent-ink: #18140a;
  --s7-glow: 0 0 0 1px rgba(243,205,79,0), 0 0 30px rgba(243,205,79,.10);
  --s7-ink-line: 1px solid rgba(0,0,0,.72);
  --s7-plate: 0 1px 0 rgba(255,255,255,.03), 0 14px 32px -22px rgba(0,0,0,.72);
  --s7-plate-press: 0 8px 18px -16px rgba(0,0,0,.68);

  /* — Semántica de veredicto (BL-10, color-blind safe) — no es paleta de marca. — */
  --s7-lime: var(--s7-accent);   /* alias de compatibilidad: no usar para nueva UI */
  --s7-lime-acid: var(--s7-accent-2); /* alias de compatibilidad: no usar para nueva UI */
  --s7-ink: #000000;             /* tinta de contorno de los aparatos */
  --s7-ok: #3ddc97;              /* PASA — verde-azulado color-blind safe. El lima NUNCA es "pasa". */
  --s7-warn: #ffc857;            /* REVISAR — ámbar cálido */
  --s7-error: #ff8080;           /* NO PASA */
  --s7-info: #7db5ff;
  --s7-sig-button: #3ad4ff;      /* LED EUBULUS */
  --s7-sig-gain: #ff8a3d;        /* LED Sailor LUFS — ámbar, igual que en el panel del Audio Server */
  --s7-sig-chorus: #9b5cff;      /* LED Chorus Horus (alias legado del nombre viejo) */
  --s7-sig-horus: #9b5cff;       /* LED Chorus Horus */
  --s7-sig-make-way: #ff3d8a;          /* LED Make Way (magenta propuesto — pendiente OK dueño) */
  --s7-r-plugin: 26px;           /* radio de caja de plugin */
  --s7-dur-micro: 160ms; --s7-dur-ui: 280ms; --s7-dur-max: 500ms;
  --s7-ease-out: cubic-bezier(.25,.1,.25,1);
  --s7-ease-back: cubic-bezier(.34,1.56,.64,1); /* overshoot del press */

  --s7-cream: #f3eee6;           /* superficie "papel" opcional para lectura larga */
  --s7-cream-ink: #1a1c1f;

  --s7-radius: 6px;
  --s7-radius-lg: 14px;
  --s7-radius-xl: 22px;
  --s7-border: 1px solid var(--s7-line);

  --s7-1:4px; --s7-2:8px; --s7-3:12px; --s7-4:16px; --s7-5:20px;
  --s7-6:24px; --s7-8:32px; --s7-10:40px; --s7-12:48px; --s7-16:64px; --s7-20:80px; --s7-24:96px; --s7-32:128px;

  --s7-font-display: "Bricolage Grotesque", "Inter", system-ui, -apple-system, sans-serif;
  --s7-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --s7-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  color: var(--s7-text);
  background-color: var(--s7-bg);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(243,205,79,.05), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(85,167,255,.06), transparent 55%);
  font-family: var(--s7-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.s7-scope *, .s7-scope *::before, .s7-scope *::after { box-sizing: border-box; }
.s7-scope[style*="display:contents"], .s7-scope[style*="display: contents"] { background: none; }

@media (prefers-reduced-motion: reduce) {
  .s7-scope *, .s7-scope *::before, .s7-scope *::after {
    animation-duration:.001ms !important; transition-duration:.001ms !important;
  }
}

/* ---------- Tipografía ---------- */
.s7-scope h1,.s7-scope h2,.s7-scope h3,.s7-scope .s7-display{
  font-family:var(--s7-font-display); color:#f7f4ef; font-weight:750;
  letter-spacing:-.018em; line-height:1.08; margin:0 0 var(--s7-4);
}
.s7-scope h1,.s7-scope .s7-h1{ font-size:clamp(2.35rem,4.8vw,4.25rem); letter-spacing:-.035em; font-weight:760; }
.s7-scope h2,.s7-scope .s7-h2{ font-size:clamp(1.6rem,3vw,2.4rem); }
.s7-scope h3,.s7-scope .s7-h3{ font-size:clamp(1.1rem,1.8vw,1.4rem); letter-spacing:0; }
.s7-scope p,.s7-scope li{ font-size:1rem; line-height:1.65; color:var(--s7-text); }
.s7-scope .s7-lead{ font-size:clamp(1.03rem,1.35vw,1.16rem); color:var(--s7-text-dim); line-height:1.58; }
.s7-scope .s7-dim{ color:var(--s7-text-dim); }
.s7-scope .s7-mono{ font-family:var(--s7-font-mono); letter-spacing:0; font-variant-numeric:tabular-nums; }
.s7-scope a{ color:var(--s7-accent); text-decoration:none; }
.s7-scope a:hover{ color:#fff; }
.s7-scope strong{ color:#fff; }

.s7-scope .s7-eyebrow{
  font-family:var(--s7-font-mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.2em; color:var(--s7-accent); margin:0 0 var(--s7-4);
  display:inline-flex; align-items:center; gap:var(--s7-2);
}
.s7-scope .s7-eyebrow::before{ content:""; width:22px; height:1px; background:var(--s7-accent); display:inline-block; }
.s7-scope .s7-brand{ text-transform:none; letter-spacing:0; }

/* ---------- Layout ---------- */
.s7-scope .s7-wrap{ max-width:1120px; margin-inline:auto; padding-inline:clamp(20px,3vw,32px); }
.s7-scope .s7-wrap--narrow{ max-width:740px; }
.s7-scope .s7-section{ padding-block:clamp(52px,6.5vw,76px); position:relative; }
@media (max-width:640px){ .s7-scope .s7-section{ padding-block:44px; } }
.s7-scope .s7-grid{ display:grid; gap:var(--s7-6); }
@media (min-width:720px){ .s7-scope .s7-grid-2{ grid-template-columns:repeat(2,1fr); } .s7-scope .s7-grid-3{ grid-template-columns:repeat(3,1fr); } }
.s7-scope .s7-divider{ height:1px; background:linear-gradient(90deg,transparent,var(--s7-line-2),transparent); border:0; margin:0; }

/* ---------- Hero ---------- */
.s7-scope .s7-hero{ padding-block:clamp(56px,7vw,80px) clamp(48px,6vw,68px); position:relative; overflow:hidden; }
.s7-scope .s7-hero__grid{ display:grid; gap:clamp(28px,4vw,48px); align-items:center; }
@media (min-width:900px){ .s7-scope .s7-hero__grid{ grid-template-columns:1.1fr .9fr; } }

/* ---------- Cards / panels (objeto "equipo") ---------- */
.s7-scope .s7-card{
  background:linear-gradient(180deg,var(--s7-surface),var(--s7-bg-2));
  border:var(--s7-border); border-radius:var(--s7-radius-lg);
  padding:var(--s7-5); position:relative; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 12px 28px -24px rgba(0,0,0,.8);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.s7-scope a.s7-card:hover, .s7-scope .s7-card.is-hover:hover{
  border-color:var(--s7-line-2); transform:translateY(-2px);
  box-shadow:0 18px 38px -28px rgba(0,0,0,.88);
}
.s7-scope a.s7-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent; transition:box-shadow .2s ease;
}
.s7-scope a.s7-card:hover::after{ box-shadow:inset 0 0 0 1px rgba(255,215,0,.35); }
.s7-scope .s7-card__line{ font-family:var(--s7-font-mono); font-size:.72rem; color:var(--s7-text-mute); text-transform:uppercase; letter-spacing:.16em; }
.s7-scope .s7-card__name{ font-family:var(--s7-font-display); font-weight:800; letter-spacing:0; font-size:1.3rem; color:#fff; margin-top:var(--s7-2); }

.s7-scope .s7-badge{ display:inline-block; font-family:var(--s7-font-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.14em; padding:3px 9px; border:1px solid var(--s7-line-2); border-radius:999px; color:var(--s7-text-dim); }
.s7-scope .s7-badge--live{ color:var(--s7-accent-ink); background:var(--s7-accent); border:1px solid #000; font-weight:700; }

/* ---------- Botones ---------- */
.s7-scope .s7-btn{
  display:inline-flex; align-items:center; gap:var(--s7-2);
  min-height:44px;
  font-family:var(--s7-font-display); font-size:.88rem; font-weight:750;
  letter-spacing:.01em; line-height:1.2;
  padding:11px 20px; border-radius:10px; border:1px solid rgba(0,0,0,.72);
  background:linear-gradient(180deg,#f8db72,var(--s7-accent));
  color:var(--s7-accent-ink); cursor:pointer; text-decoration:none;
  box-shadow:0 8px 18px -14px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.35);
}
.s7-scope .s7-btn:hover{ filter:brightness(1.05); color:var(--s7-accent-ink); }
.s7-scope .s7-btn--ghost{ background:rgba(20,27,37,.78); color:var(--s7-text); border:1px solid var(--s7-line-2); box-shadow:none; }
.s7-scope .s7-btn--ghost:hover{ color:var(--s7-accent); filter:brightness(1.08); }
.s7-scope .s7-btn--lg{ padding:13px 23px; font-size:.9rem; }
.s7-scope :where(a,button,input,select,summary).s7-focusable:focus-visible,
.s7-scope .s7-btn:focus-visible,.s7-scope .s7-hero-button:focus-visible{ outline:2px solid var(--s7-accent); outline-offset:3px; }

/* ---------- Tabla specs / comparativa ---------- */
.s7-scope .s7-table{ width:100%; border-collapse:collapse; font-size:.98rem; }
.s7-scope .s7-table th,.s7-scope .s7-table td{ text-align:left; padding:var(--s7-4); border-bottom:var(--s7-border); background:transparent; color:var(--s7-text); }
.s7-scope .s7-table th{ font-family:var(--s7-font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; color:var(--s7-text-mute); }
.s7-scope .s7-table tr:last-child td{ border-bottom:0; }
.s7-scope .s7-table .s7-num{ font-family:var(--s7-font-mono); color:var(--s7-accent); font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- BPM figure ---------- */
.s7-scope .s7-bpm-figure{ display:flex; align-items:flex-start; gap:var(--s7-4); }
.s7-scope .s7-bpm-figure .s7-bpm-val{ font-family:var(--s7-font-mono); font-weight:700; font-size:clamp(4rem,16vw,9rem); color:var(--s7-accent); line-height:.86; letter-spacing:-.03em; text-shadow:0 0 50px rgba(255,215,0,.22); }
.s7-scope .s7-bpm-figure .s7-bpm-unit{ font-family:var(--s7-font-mono); font-size:.9rem; color:var(--s7-text-dim); text-transform:uppercase; letter-spacing:.2em; padding-top:.7em; }
.s7-scope .s7-bpm-range{ font-family:var(--s7-font-mono); color:var(--s7-text-dim); }

/* ---------- FAQ ---------- */
.s7-scope .s7-faq details{ border-bottom:var(--s7-border); padding:var(--s7-5) 0; }
.s7-scope .s7-faq summary{ font-family:var(--s7-font-display); font-weight:700; letter-spacing:0; font-size:1.05rem; color:#fff; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--s7-4); align-items:center; }
.s7-scope .s7-faq summary::-webkit-details-marker{ display:none; }
.s7-scope .s7-faq summary::after{ content:"+"; font-family:var(--s7-font-mono); color:var(--s7-accent); font-size:1.3rem; transition:transform .2s ease; }
.s7-scope .s7-faq details[open] summary::after{ content:"–"; }
.s7-scope .s7-faq details>div{ padding-top:var(--s7-3); color:var(--s7-text-dim); max-width:70ch; }

/* ---------- Email capture ---------- */
.s7-scope .s7-capture{ background:linear-gradient(180deg,var(--s7-surface),var(--s7-bg-2)); border:var(--s7-border); border-radius:var(--s7-radius-lg); padding:var(--s7-6); position:relative; overflow:hidden; }
.s7-scope .s7-capture::before{ content:""; position:absolute; top:-40%; right:-10%; width:50%; height:160%; background:radial-gradient(circle,rgba(255,215,0,.10),transparent 70%); pointer-events:none; }
.s7-scope .s7-capture form{ display:flex; gap:var(--s7-3); flex-wrap:wrap; margin-top:var(--s7-4); position:relative; }
.s7-scope .s7-capture input[type="email"]{ flex:1 1 240px; background:var(--s7-bg); color:var(--s7-text); border:var(--s7-border); border-radius:999px; padding:14px 20px; font-family:var(--s7-font-mono); font-size:.95rem; }
.s7-scope .s7-capture input[type="email"]:focus{ outline:2px solid var(--s7-accent); outline-offset:1px; border-color:var(--s7-accent); }
.s7-scope .s7-capture__msg{ font-family:var(--s7-font-mono); font-size:.85rem; margin-top:var(--s7-3); }
.s7-scope .s7-capture__msg.is-ok{ color:var(--s7-accent); }
.s7-scope .s7-capture__msg.is-err{ color:#ff6b6b; }

/* ---------- Filtro BPM hub ---------- */
.s7-scope .s7-filter{ display:flex; gap:var(--s7-3); flex-wrap:wrap; align-items:center; margin-bottom:var(--s7-8); }
.s7-scope .s7-filter input[type="search"]{ flex:1 1 280px; background:var(--s7-surface); color:var(--s7-text); border:var(--s7-border); border-radius:999px; padding:13px 20px; font-family:var(--s7-font-mono); }
.s7-scope .s7-filter input[type="search"]:focus{ outline:2px solid var(--s7-accent); outline-offset:1px; }
.s7-scope .s7-chip{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; font-family:var(--s7-font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; padding:8px 15px; border:var(--s7-border); border-radius:999px; background:transparent; color:var(--s7-text-dim); cursor:pointer; transition:all .15s ease; }
.s7-scope .s7-chip:hover{ border-color:var(--s7-line-2); color:#fff; }
.s7-scope .s7-chip[aria-pressed="true"]{ color:var(--s7-accent-ink); background:var(--s7-accent); border:1px solid #000; font-weight:700; box-shadow:0 2px 0 rgba(0,0,0,.45); }
.s7-scope .s7-genre-card.is-hidden{ display:none; }
.s7-scope .s7-genre-card{ display:flex; flex-direction:column; gap:var(--s7-1); }
.s7-scope .s7-genre-card .s7-genre-bpm{ font-family:var(--s7-font-mono); color:var(--s7-accent); font-size:1.7rem; font-weight:700; margin-top:var(--s7-2); font-variant-numeric:tabular-nums; }

/* reveal sutil al cargar */
.s7-scope .s7-reveal{ opacity:0; transform:translateY(14px); animation:s7-rise .6s cubic-bezier(.2,.8,.2,1) forwards; }
.s7-scope .s7-reveal:nth-child(2){ animation-delay:.06s; }
.s7-scope .s7-reveal:nth-child(3){ animation-delay:.12s; }
@keyframes s7-rise{ to{ opacity:1; transform:none; } }

/* ---------- Prosa de artículo (contenido clásico de posts / track stories) ---------- */
.s7-scope .s7-article{ max-width:720px; margin-inline:auto; }
.s7-scope .s7-article > *{ margin-block:0 var(--s7-5); }
.s7-scope .s7-article h2{ font-size:clamp(1.5rem,3vw,2rem); margin-top:var(--s7-12); }
.s7-scope .s7-article h3{ font-size:clamp(1.2rem,2.4vw,1.5rem); margin-top:var(--s7-8); }
.s7-scope .s7-article h4{ font-family:var(--s7-font-display); font-weight:700; color:#fff; font-size:1.1rem; margin-top:var(--s7-6); }
.s7-scope .s7-article p,.s7-scope .s7-article li{ font-size:1.025rem; line-height:1.72; color:#d3d7dd; }
.s7-scope .s7-article a{ color:var(--s7-accent); text-decoration:underline; text-underline-offset:3px; }
.s7-scope .s7-article a:hover{ color:#fff; }
.s7-scope .s7-article img,.s7-scope .s7-article iframe,.s7-scope .s7-article video{ max-width:100%; height:auto; border-radius:var(--s7-radius-lg); display:block; }
.s7-scope .s7-article iframe{ width:100%; aspect-ratio:16/9; }
.s7-scope .s7-article figure{ margin:var(--s7-8) 0; }
.s7-scope .s7-article figcaption{ font-family:var(--s7-font-mono); font-size:.8rem; color:var(--s7-text-mute); margin-top:var(--s7-2); }
.s7-scope .s7-article ul,.s7-scope .s7-article ol{ padding-left:1.4em; }
.s7-scope .s7-article blockquote{ border-left:3px solid var(--s7-accent); margin:var(--s7-8) 0; padding:var(--s7-2) 0 var(--s7-2) var(--s7-6); color:#fff; font-size:1.2rem; font-style:italic; }
.s7-scope .s7-article code{ font-family:var(--s7-font-mono); background:var(--s7-surface); padding:2px 6px; border-radius:4px; font-size:.9em; }
.s7-scope .s7-article pre{ background:var(--s7-surface); border:var(--s7-border); border-radius:var(--s7-radius-lg); padding:var(--s7-5); overflow:auto; }
.s7-scope .s7-meta{ font-family:var(--s7-font-mono); font-size:.78rem; color:var(--s7-text-mute); text-transform:uppercase; letter-spacing:.12em; display:flex; gap:var(--s7-3); flex-wrap:wrap; }
.s7-scope .s7-meta a{ color:var(--s7-text-dim); }

/* ---------- Continuidad editorial ---------- */
.s7-scope .s7-editorial-toc{
  margin:0 0 var(--s7-10); padding:var(--s7-5) var(--s7-6);
  border:var(--s7-border); border-left:3px solid var(--s7-accent);
  border-radius:var(--s7-radius-lg); background:var(--s7-surface);
}
.s7-scope .s7-editorial-toc .s7-eyebrow{ margin-bottom:var(--s7-3); }
.s7-scope .s7-editorial-toc .s7-list{ margin:0; display:grid; gap:8px; }
.s7-scope .s7-editorial-toc__item{ color:var(--s7-text-dim); }
.s7-scope .s7-editorial-toc__item--level-3{ margin-left:var(--s7-4); font-size:.94em; }
.s7-scope .s7-editorial-byline{ border-left:3px solid var(--s7-line-2); }
.s7-scope .s7-editorial-continuity [hidden]{ display:none !important; }
.s7-scope .s7-editorial-choice-set{ align-items:stretch; }
.s7-scope .s7-editorial-choice{
  min-width:0; height:100%; display:flex; flex-direction:column; align-items:flex-start;
}
.s7-scope .s7-editorial-choice .s7-card__name{ margin-bottom:var(--s7-5); }
.s7-scope .s7-editorial-choice .s7-btn{ margin-top:auto; }
.s7-scope .s7-editorial-next-step__image{
  flex:0 0 180px; width:180px; max-width:100%; aspect-ratio:16/10;
  object-fit:contain; border-radius:12px; border:var(--s7-ink-line); background:#050910;
}
.s7-scope .s7-editorial-related-card{ display:flex; flex-direction:column; color:inherit; }
.s7-scope .s7-editorial-related-card__image{ display:block; border-bottom:var(--s7-ink-line); background:#050910; }
.s7-scope .s7-editorial-related-card__body{ color:#fff; font-family:var(--s7-font-display); font-weight:750; line-height:1.25; }
.s7-scope .s7-product-visual figure{ margin:0; }
.s7-scope .s7-product-visual figcaption{ margin-top:var(--s7-4); font-size:.76rem; }
.s7-scope .s7-product-fit .s7-card__name{ font-size:1.12rem; line-height:1.25; }
@media(max-width:620px){
  .s7-scope .s7-editorial-next-step__image{ flex-basis:100%; width:100%; }
  .s7-scope .s7-editorial-toc{ padding:var(--s7-4); }
}

/* ---------- Fallback: ocultar título-H1 del theme en landings con H1 propio ---------- */
body.s7-hide-page-title .entry-title,
body.s7-hide-page-title h1.entry-title,
body.s7-hide-page-title .page-header{ display:none !important; }

/* ---------- Grano táctil (plan visual §10.1 / F4): micro-ruido SVG al 4% ----------
 * Quita la planitud del hex puro en superficies; data-URI, cero requests.
 * >0.1 lee "suciedad" — mantener 0.03–0.05. */
/* ::before (NO ::after — a.s7-card::after ya dibuja el anillo de hover) */
.s7-scope .s7-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  opacity:.04; 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'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Instrumento táctil (plan visual §5.2/§6.3/§7): física, no piel ----------
 * El sitio es la sala (plano); el plugin es el APARATO montado en ella: chunky (26px),
 * 4 sombras apiladas ("una sombra parece plana; cuatro parecen fresadas"), y la
 * signature entra como LUZ que emite el objeto (LED superior con glow), nunca superficie. */
.s7-scope .s7-plugin-card{
  position: relative; overflow: hidden;    /* aloja la screenshot a sangre (s7-plugin-card__shot) */
  border-radius: 16px;
  background:
    radial-gradient(130% 80% at 50% 0%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(180deg, var(--s7-surface-2) 0%, var(--s7-surface) 55%, var(--s7-bg-2) 100%);
  border: var(--s7-ink-line);              /* tinta: el aparato es un sticker recortado */
  box-shadow: var(--s7-plate), inset 0 1px 0 rgba(255,255,255,.10);
}
.s7-scope .s7-plugin-card::after{           /* LED de signature (los div no usan ::after) */
  content:""; position:absolute; top:0; left:26px; right:26px; height:3px; z-index:2; /* sobre la imagen */
  border-radius:0 0 6px 6px; background:var(--sig, var(--s7-accent));
  box-shadow: 0 0 14px var(--sig, var(--s7-accent)), 0 2px 22px var(--sig, var(--s7-accent));
  opacity:.85; transition:opacity var(--s7-dur-micro) var(--s7-ease-out);
}
.s7-scope .s7-plugin-card:hover{ transform:translateY(-3px); box-shadow:
  0 7px 0 rgba(0,0,0,.55), 0 22px 44px -12px rgba(0,0,0,.65),
  inset 0 1px 0 rgba(255,255,255,.12); }
.s7-scope .s7-plugin-card:hover::after{ opacity:1; }
.s7-scope .s7-plugin-card .s7-card__name{ font-size:1.55rem; letter-spacing:0; font-weight:800; }

/* Vidriera: la UI real del plugin es el héroe de la tarjeta (2026-07-18) */
.s7-scope .s7-plugin-card__shot{
  display: block;
  width: calc(100% + 2 * var(--s7-6));               /* sangra el padding del .s7-card (var(--s7-6), 24px) */
  margin: calc(-1 * var(--s7-6)) calc(-1 * var(--s7-6)) var(--s7-4) calc(-1 * var(--s7-6));
  aspect-ratio: 16/10;
  object-fit: cover;
  border-bottom: var(--s7-ink-line);
  transition: filter var(--s7-dur-ui) var(--s7-ease-out);
  /* el radio superior lo da el overflow:hidden del card — no duplicar border-radius acá */
}
.s7-scope .s7-plugin-card:hover .s7-plugin-card__shot{ filter: brightness(1.06); }

/* Press físico (Se7enSupercell::drawButtonBackground): el botón BAJA y su sombra
 * dura se comprime — el mismo gesto que en los plugins. Vuelve con back-out. */
.s7-scope .s7-btn{ transition: transform .16s var(--s7-ease-back), box-shadow .16s var(--s7-ease-back), filter .15s ease; }
.s7-scope .s7-btn:active{ transform: translateY(3px); box-shadow:var(--s7-plate-press), inset 0 1px 0 rgba(255,255,255,.25); transition-duration:.07s; }
.s7-scope .s7-btn--ghost:active{ box-shadow:var(--s7-plate-press), inset 0 1px 0 rgba(255,255,255,.06); }

/* ---------- Componentes de consola (F6: familia de los plugins) ---------- */
/* Barra de XP (Se7enSupercell::Meter): track hundido + tinta + relleno con brillo. */
.s7-scope .s7-xpbar{ position:relative; }
.s7-scope .s7-xpbar__head{ display:flex; justify-content:space-between; font-family:var(--s7-font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--s7-text-dim); margin-bottom:5px; }
.s7-scope .s7-xpbar__head b{ color:var(--s7-accent); font-weight:700; }
.s7-scope .s7-xpbar__track{ height:16px; border-radius:8px; background:#08080e; border:2px solid #000; position:relative; overflow:hidden; }
.s7-scope .s7-xpbar__fill{ position:absolute; inset:2px auto 2px 2px; width:var(--fill,50%); border-radius:5px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bar, var(--s7-accent)) 80%, #fff) 0%, var(--bar, var(--s7-accent)) 40%, color-mix(in srgb, var(--bar, var(--s7-accent)) 62%, #000) 100%); }
.s7-scope .s7-xpbar__fill::after{ content:""; position:absolute; top:1px; left:3px; right:3px; height:3px; border-radius:2px; background:rgba(255,255,255,.30); }

/* Píldora de estado (StatusPill): punto de color + texto mono. */
.s7-scope .s7-pill{ display:inline-flex; align-items:center; gap:8px; padding:5px 14px 5px 8px; border-radius:999px;
  background:var(--s7-bg-2); border:2px solid #000; font-family:var(--s7-font-mono); font-size:.72rem; letter-spacing:.08em; color:#fff; box-shadow:0 2px 0 rgba(0,0,0,.4); }
.s7-scope .s7-pill::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--dot,#55A7FF); box-shadow:0 0 8px var(--dot,#55A7FF); }

/* Coach line (CoachLine): tira hundida con consejo — el aparato te habla. */
.s7-scope .s7-coach{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px;
  background:#08080e; border:2px solid #000; color:rgba(255,255,255,.88); font-size:.92rem; }
.s7-scope .s7-coach::before{ content:""; flex:0 0 9px; width:9px; height:9px; border-radius:50%; background:var(--dot,#55A7FF); box-shadow:0 0 8px var(--dot,#55A7FF); }

@media (prefers-reduced-motion: reduce){
  .s7-scope .s7-plugin-card:hover{ transform:none; }
  .s7-scope .s7-btn:active{ transform:none; }
}


/* ============================================================
   HOME V3 — storefront visible + tres puertas de entrada
   2026-08-23. Todo scopeado a .s7-scope.s7-home.
   ============================================================ */
.s7-scope.s7-home{ overflow:clip; }
.s7-scope.s7-home .s7-home-hero{ padding-block:clamp(52px,6vw,72px); min-height:0; display:flex; align-items:center; }
.s7-scope.s7-home .s7-home-hero::before{ content:""; position:absolute; inset:-30% -8% auto 48%; height:620px; background:radial-gradient(circle,rgba(78,151,186,.09),rgba(121,92,155,.045) 38%,transparent 68%); pointer-events:none; }
.s7-scope.s7-home .s7-home-hero__copy .s7-h1{ font-size:clamp(3rem,4.5vw,4.45rem); max-width:11ch; line-height:.98; letter-spacing:-.045em; margin-bottom:20px; }
.s7-scope.s7-home .s7-home-hero__copy .s7-lead{ max-width:48ch; font-size:clamp(1.02rem,1.25vw,1.12rem); }
.s7-scope.s7-home .s7-home-hero__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.s7-scope.s7-home .s7-home-hero__facts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.s7-scope.s7-home .s7-home-hero__facts span{ font:600 .68rem/1 var(--s7-font-mono); letter-spacing:.08em; text-transform:uppercase; padding:8px 11px; border:1px solid var(--s7-line-2); border-radius:999px; color:var(--s7-text-dim); background:rgba(8,14,28,.72); }
@media(max-width:620px){ .s7-scope.s7-home .s7-home-hero{ min-height:auto; padding-top:32px; } .s7-scope.s7-home .s7-home-hero__copy{ min-width:0; width:100%; } .s7-scope.s7-home .s7-home-hero__copy .s7-h1{ font-size:clamp(2.35rem,10.2vw,2.8rem); max-width:11ch; letter-spacing:-.04em; } .s7-scope.s7-home .s7-home-hero__copy .s7-lead{ max-width:100%; } .s7-scope.s7-home .s7-home-hero__actions .s7-btn{ flex:1 1 150px; justify-content:center; padding-inline:12px; } }

.s7-scope.s7-home .s7-home-sectionhead{ display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:24px; }
.s7-scope.s7-home .s7-home-sectionhead .s7-h2{ margin-bottom:0; max-width:15ch; }
.s7-scope.s7-home .s7-home-product-grid{ display:grid; gap:14px; }
@media(min-width:760px){ .s7-scope.s7-home .s7-home-product-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.s7-scope.s7-home .s7-home-product{ display:grid; grid-template-columns:1fr; min-height:0; border:1px solid rgba(0,0,0,.74); border-radius:16px; overflow:hidden; background:linear-gradient(180deg,var(--s7-surface-2),var(--s7-bg-2)); box-shadow:var(--s7-plate); color:inherit; position:relative; transition:transform .2s var(--s7-ease-out),box-shadow .2s ease; }
.s7-scope.s7-home .s7-home-product::after{ content:""; position:absolute; left:22px; right:22px; top:0; height:3px; background:var(--device-sig); box-shadow:0 0 16px var(--device-sig); }
.s7-scope.s7-home .s7-home-product:hover{ transform:translateY(-2px); box-shadow:0 24px 44px -30px var(--device-sig); color:inherit; }

.s7-scope.s7-home .s7-home-product__media{ min-width:0; aspect-ratio:16/9; background:#070b11; border-bottom:1px solid rgba(0,0,0,.78); }
.s7-scope.s7-home .s7-home-product__media img{ width:100%; height:100%; object-fit:contain; display:block; transition:transform .35s ease,filter .25s ease; }
.s7-scope.s7-home .s7-home-product:hover .s7-home-product__media img{ transform:scale(1.025); filter:brightness(1.07); }
.s7-scope.s7-home .s7-home-product__body{ padding:20px; display:flex; flex-direction:column; justify-content:center; }
.s7-scope.s7-home .s7-home-product__name{ font:750 clamp(1.3rem,1.8vw,1.72rem)/1.05 var(--s7-font-display); color:#f7f4ef; margin:7px 0 9px; }
.s7-scope.s7-home .s7-home-product__body p{ margin:0; color:var(--s7-text-dim); font-size:.96rem; line-height:1.55; }
.s7-scope.s7-home .s7-home-product__meta{ margin-top:18px; color:var(--device-sig); font:600 .68rem/1.45 var(--s7-font-mono); letter-spacing:.05em; text-transform:uppercase; }
@media(max-width:560px){ .s7-scope.s7-home .s7-home-sectionhead{ align-items:flex-start; flex-direction:column; } }

.s7-scope.s7-home .s7-home-paths{ padding-block:clamp(44px,5.5vw,64px); }
.s7-scope.s7-home .s7-home-path-grid{ display:grid; gap:12px; }
@media(min-width:760px){ .s7-scope.s7-home .s7-home-path-grid{ grid-template-columns:repeat(3,1fr); } }
.s7-scope.s7-home .s7-home-path{ min-height:150px; padding:20px; border:1px solid var(--s7-line); border-radius:14px; background:rgba(20,27,37,.72); display:flex; flex-direction:column; color:inherit; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.s7-scope.s7-home .s7-home-path:hover{ transform:translateY(-2px); border-color:var(--s7-line-2); background:rgba(26,36,49,.9); color:inherit; }
.s7-scope.s7-home .s7-home-path b{ font:700 .72rem/1 var(--s7-font-mono); color:var(--s7-accent); letter-spacing:.12em; }
.s7-scope.s7-home .s7-home-path span{ font:750 clamp(1.25rem,1.8vw,1.65rem)/1.05 var(--s7-font-display); color:#f7f4ef; margin-top:auto; }
.s7-scope.s7-home .s7-home-path small{ color:var(--s7-text-dim); font-size:.9rem; line-height:1.45; margin-top:9px; max-width:28ch; }

@media(prefers-reduced-motion:reduce){ .s7-scope.s7-home .s7-home-product:hover,.s7-scope.s7-home .s7-home-path:hover{ transform:none; } }