/*
 * Se7en Plugins — Design tokens + base component styles
 * Scope: SOLO secciones nuevas (BPM Index + páginas de producto del plugin).
 * NO pisa el Elementor global. Todo cuelga de la clase raíz .s7-scope.
 * Fuente de verdad: docs/03-sistema-diseno.md
 * Concepto: "hardware de estudio" — dark-first, grilla precisa, un acento eléctrico.
 */

.s7-scope {
  /* Base (hereda del sitio: negro existente) */
  --s7-bg: #000000;
  --s7-surface: #0c0d0f;     /* paneles, cards */
  --s7-surface-2: #15171a;   /* hover / elevado */
  --s7-line: #23262b;        /* hairlines */
  --s7-text: #f5f6f7;        /* texto principal */
  --s7-text-dim: #9aa0a6;    /* secundario / specs */

  /* Acento eléctrico — UN solo color (D3 default: lima/verde señal) */
  --s7-accent: #c8ff00;
  --s7-accent-ink: #0a0c00;  /* texto sobre acento */
  --s7-accent-dim: #94bd00;  /* acento atenuado para hover de links */

  /* Radios y bordes: mínimos, técnicos */
  --s7-radius: 4px;
  --s7-radius-lg: 8px;
  --s7-border: 1px solid var(--s7-line);

  /* Sombras: nítidas/duras, no difusas */
  --s7-shadow: 0 0 0 1px var(--s7-line), 0 8px 24px rgba(0, 0, 0, .5);

  /* Espaciado (escala) */
  --s7-1: 4px; --s7-2: 8px; --s7-3: 12px; --s7-4: 16px;
  --s7-6: 24px; --s7-8: 32px; --s7-12: 48px; --s7-16: 64px;

  /* Tipografía (self-host; fallbacks seguros si las fuentes aún no están) */
  --s7-font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --s7-font-mono: "JetBrains Mono", "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --s7-font-body: "Newsreader", Georgia, "Times New Roman", serif;

  color: var(--s7-text);
  background-color: var(--s7-bg); /* el scope fija su propio fondo oscuro (no depende del theme) */
  font-family: var(--s7-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* display:contents wrappers no pintan fondo; evita herencia rara */
.s7-scope[style*="display:contents"], .s7-scope[style*="display: contents"] { background: transparent; }

/* Respeta preferencia de movimiento reducido en TODO el scope */
@media (prefers-reduced-motion: reduce) {
  .s7-scope * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Tipografía ---- */
.s7-scope h1, .s7-scope h2, .s7-scope h3,
.s7-scope .s7-display {
  font-family: var(--s7-font-display);
  color: var(--s7-text);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 var(--s7-4);
}
.s7-scope h1, .s7-scope .s7-h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 800; }
.s7-scope h2, .s7-scope .s7-h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; }
.s7-scope h3, .s7-scope .s7-h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); font-weight: 700; }
.s7-scope p, .s7-scope li { font-size: 1.0625rem; line-height: 1.7; color: var(--s7-text); }
.s7-scope .s7-dim { color: var(--s7-text-dim); }
.s7-scope .s7-mono { font-family: var(--s7-font-mono); letter-spacing: 0; }
.s7-scope .s7-eyebrow {
  font-family: var(--s7-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--s7-accent);
  margin: 0 0 var(--s7-3);
}
.s7-scope a { color: var(--s7-accent); text-decoration: none; }
.s7-scope a:hover { color: var(--s7-accent-dim); text-decoration: underline; }

/* ---- Layout helpers ---- */
.s7-scope .s7-wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--s7-6); }
.s7-scope .s7-section { padding-block: var(--s7-16); }
.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); }
}

/* ---- Card / panel (objeto "equipo") ---- */
.s7-scope .s7-card {
  background: var(--s7-surface);
  border: var(--s7-border);
  border-radius: var(--s7-radius-lg);
  padding: var(--s7-6);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.s7-scope .s7-card:hover {
  background: var(--s7-surface-2);
  border-color: var(--s7-accent);
  transform: translateY(-2px);
}
.s7-scope .s7-card__name { font-family: var(--s7-font-display); font-weight: 800; font-size: 1.35rem; }
.s7-scope .s7-card__line { font-family: var(--s7-font-mono); font-size: 0.8rem; color: var(--s7-text-dim); text-transform: uppercase; letter-spacing: 0.1em; }
.s7-scope .s7-badge {
  display: inline-block;
  font-family: var(--s7-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 2px 8px;
  border: 1px solid var(--s7-line);
  border-radius: 999px;
  color: var(--s7-text-dim);
}
.s7-scope .s7-badge--soon { color: var(--s7-text-dim); }
.s7-scope .s7-badge--live { color: var(--s7-accent-ink); background: var(--s7-accent); border-color: var(--s7-accent); }

/* ---- Botones ---- */
.s7-scope .s7-btn {
  display: inline-flex; align-items: center; gap: var(--s7-2);
  font-family: var(--s7-font-mono);
  font-size: 0.9rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 12px 22px;
  border-radius: var(--s7-radius);
  border: 1px solid var(--s7-accent);
  background: var(--s7-accent);
  color: var(--s7-accent-ink);
  cursor: pointer;
  text-decoration: none;
  transition: filter .15s ease, transform .1s ease;
}
.s7-scope .s7-btn:hover { filter: brightness(1.08); text-decoration: none; }
.s7-scope .s7-btn:active { transform: translateY(1px); }
.s7-scope .s7-btn--ghost { background: transparent; color: var(--s7-text); border-color: var(--s7-line); }
.s7-scope .s7-btn--ghost:hover { border-color: var(--s7-accent); color: var(--s7-accent); }
.s7-scope :where(a, button, input, select).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 de specs / comparativa ---- */
.s7-scope .s7-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.s7-scope .s7-table th, .s7-scope .s7-table td { text-align: left; padding: var(--s7-3) 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: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--s7-text-dim); }
.s7-scope .s7-table .s7-num { font-family: var(--s7-font-mono); color: var(--s7-accent); }

/* ---- BPM big number ---- */
.s7-scope .s7-bpm-figure { display: flex; align-items: baseline; gap: var(--s7-3); }
.s7-scope .s7-bpm-figure .s7-bpm-val { font-family: var(--s7-font-mono); font-weight: 700; font-size: clamp(3rem, 12vw, 6rem); color: var(--s7-accent); line-height: 1; }
.s7-scope .s7-bpm-figure .s7-bpm-unit { font-family: var(--s7-font-mono); font-size: 1rem; color: var(--s7-text-dim); text-transform: uppercase; letter-spacing: 0.15em; }
.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-4) 0; }
.s7-scope .s7-faq summary { font-family: var(--s7-font-display); font-weight: 700; font-size: 1.1rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--s7-4); }
.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); }
.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); }

/* ---- Email capture ---- */
.s7-scope .s7-capture { background: var(--s7-surface); border: var(--s7-border); border-radius: var(--s7-radius-lg); padding: var(--s7-8); }
.s7-scope .s7-capture form { display: flex; gap: var(--s7-3); flex-wrap: wrap; }
.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: var(--s7-radius);
  padding: 12px 14px; font-family: var(--s7-font-mono); font-size: 0.95rem;
}
.s7-scope .s7-capture input[type="email"]:focus { outline: 2px solid var(--s7-accent); outline-offset: 1px; }
.s7-scope .s7-capture .s7-capture__msg { font-family: var(--s7-font-mono); font-size: 0.85rem; margin-top: var(--s7-3); }
.s7-scope .s7-capture .s7-capture__msg.is-ok { color: var(--s7-accent); }
.s7-scope .s7-capture .s7-capture__msg.is-err { color: #ff5a5a; }

/* ---- 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 260px;
  background: var(--s7-surface); color: var(--s7-text);
  border: var(--s7-border); border-radius: var(--s7-radius);
  padding: 10px 14px; 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 {
  font-family: var(--s7-font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 6px 12px; border: var(--s7-border); border-radius: 999px; background: transparent; color: var(--s7-text-dim); cursor: pointer;
}
.s7-scope .s7-chip[aria-pressed="true"] { color: var(--s7-accent-ink); background: var(--s7-accent); border-color: var(--s7-accent); }
.s7-scope .s7-genre-card.is-hidden { display: none; }

/* Fallback (no scopeado): ocultar el título-H1 del theme en landings con H1 propio.
   El método primario es el filtro hello_elementor_page_title (quita el H1 del DOM). */
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; }
.s7-scope .s7-genre-card .s7-genre-bpm { font-family: var(--s7-font-mono); color: var(--s7-accent); font-size: 1.4rem; }