/* ──────────────────────────────────────────────────────────────
   F2 · TOKENS DEL SISTEMA — rancocamp.cl
   Dirección A "Fogata monumental" + Par 1 tipográfico (aprobados F1).
   REGLA DE PARIDAD: estos tokens están PREFIJADOS con --tk- y NO se
   aplican al sitio todavía (el original usa sus propios valores).
   F3 los consume desde los componentes nuevos, sin tocar el legacy.
   ────────────────────────────────────────────────────────────── */
:root {
  /* ── Paleta aprobada (dirección A) ── */
  --tk-void: #040404;          /* fondo madre */
  --tk-noche: #080808;         /* superficie elevada */
  --tk-carbon: #0f0f0f;        /* superficie interactiva */
  --tk-ember: #FF5E00;         /* fogata — acento primario */
  --tk-ember-soft: rgba(255, 94, 0, 0.20);
  --tk-fern: #2EBD59;          /* bosque nativo — acento de estado/éxito */
  --tk-lago: #0E2A3F;          /* azul profundo de lago — reserva narrativa (F3 decide uso) */
  --tk-hueso: #f5f5f4;         /* papel/bitácora — texto principal */

  /* ── Tintas AA (corrigen los grises que fallaron en F0) ──
     Sobre --tk-void: tinta-2 = 10.9:1 · tinta-3 = 5.7:1 (mínimo AA texto chico).
     tinta-4 SOLO para texto ≥24px (3.2:1, umbral AA de texto grande). */
  --tk-tinta-1: #f5f5f4;
  --tk-tinta-2: #d6d3d0;
  --tk-tinta-3: #918e8b;
  --tk-tinta-4: #6e6c6a;

  /* ── Tipografía Par 1 (OFL, autoalojadas en /fonts/) ── */
  --tk-font-display: 'Anton', sans-serif;          /* titulares monumentales */
  --tk-font-text: 'Space Grotesk', sans-serif;     /* cuerpo (F3: reemplaza a Inter) */
  --tk-font-meta: 'Space Mono', monospace;         /* metadatos: BPM, tonos, FREQ //, contadores */

  /* ── Escala fluida ── */
  --tk-text-hero: clamp(44px, 11vw, 104px);
  --tk-text-h2: clamp(30px, 6vw, 56px);
  --tk-text-lead: clamp(17px, 2.2vw, 20px);
  --tk-text-body: 16px;
  --tk-text-meta: 11px;
  --tk-track-meta: 0.25em;

  /* ── Motion con firma (M1–M4) ── */
  --tk-ease-cine: cubic-bezier(0.22, 1, 0.36, 1);
  --tk-ease-switch: cubic-bezier(0.6, 0, 0.2, 1);
  --tk-dur-rapida: 0.35s;
  --tk-dur-media: 0.8s;
  --tk-dur-larga: 1.4s;

  /* ── Superficie ── */
  --tk-grain-opacity: 0.05;
  --tk-borde: rgba(245, 245, 244, 0.12);
}

/* ── Sonido de UI (micro de estudio aprobado): APAGADO POR DEFECTO.
   El toggle discreto (F3) activa html.ui-sonido y estos data-attrs
   dejan de silenciarse. Los sonidos nunca suenan sin gesto previo. ── */
:root:not(.ui-sonido) [data-ui-sonido] { /* silenciado: el JS de F3 consulta este estado */ }

/* ── Accesibilidad de motion: M1–M4 y micro-interacciones se desactivan
   con preferencia del sistema. F3 conecta aquí los gates JS (hoy el
   sitio legacy no respeta reduced-motion: corrección pendiente F3). ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tk-dur-rapida: 0s;
    --tk-dur-media: 0s;
    --tk-dur-larga: 0s;
  }
}

/* ══════════════════════════════════════════════════════════════
   ACTIVACIÓN F3 · ACTO 0/I (aprobado en checkpoint, 27-09-2026)
   Desde aquí los tokens SÍ gobiernan el sitio vivo.
   ══════════════════════════════════════════════════════════════ */

/* ── Par 1 tipográfico: Space Grotesk (cuerpo) + Space Mono (metadatos).
   Los nombres de clase legacy (.font-inter, .font-elite, .font-caveat)
   se conservan para no tocar cientos de marcas: cambia la familia. ── */
body { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; }
.font-inter { font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; }
.font-elite { font-family: 'Space Mono', ui-monospace, monospace; }
.font-caveat { font-family: 'Space Grotesk', sans-serif; font-style: italic; }

/* ── AA: los grises chicos (blanco 25–45 % sobre void = 2,5–4,4:1)
   suben a tinta-3 #918e8b (5,7:1). Desde /50 el original ya cumplía. ── */
.text-white\/25,
.text-white\/30,
.text-white\/35,
.text-white\/40,
.text-white\/45 { color: var(--tk-tinta-3); }

/* ── Reduced-motion: ninguna animación/transición CSS (bounce, ping,
   reveals de Tailwind). El JS además desarma preloader, Lenis y films. ── */
html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html.reduce-motion #preloader { display: none; }

/* ── F3 · SALIDA DEL PRELOADER 100% CSS: la animación se agenda con el
   primer recálculo de estilos y la ejecuta el COMPOSITOR — el telón cae
   a los ~1,5 s aunque el hilo principal siga parseando JS (medido:
   antes quedaba rehén del parseo en gama media). legacy-main.js luego
   remueve el nodo y arranca Lenis. ── */
@keyframes tk-pre-out { to { opacity: 0; visibility: hidden; } }
#preloader { animation: tk-pre-out 0.4s ease-in-out 1.1s forwards; }
@keyframes tk-pre-in { to { opacity: 1; visibility: visible; } }
/* acto0-l1 NO va aquí: nace visible (tras él está el LCP) y una animación
   con visibility lo obligaría al hilo principal, retrasando su pintura. */
#act-marker,
#scroll-cue,
#saltar-intro { animation: tk-pre-in 0.25s ease-out 1.3s forwards; }
html.reduce-motion #preloader { display: none; }

/* ── F3/Acto II · La Prueba: consola, scope y fader (CSS propio — el
   Tailwind de ranco.css es precompilado y no tiene utilidades nuevas) ── */
.prueba-consola { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.prueba-scope {
  position: relative; width: 100%; height: 176px; flex: 0 0 auto;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(245, 245, 244, 0.1); background: #020202;
  box-shadow: inset 0 4px 30px rgba(0, 0, 0, 0.9);
}
#vu-meter { position: absolute; top: 12px; right: 12px; width: 96px; z-index: 10; pointer-events: none; }
.vu-cara {
  border-radius: 8px; border: 1px solid rgba(245, 245, 244, 0.1);
  background: rgba(10, 10, 10, 0.9); padding: 8px 8px 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
#vu-fader {
  position: relative; width: 80px; height: 176px; touch-action: none;
  background: linear-gradient(180deg, #101010, #090909);
  border: 1px solid rgba(245, 245, 244, 0.12);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.5);
}
#vu-fader:hover { border-color: rgba(255, 94, 0, 0.35); }
#vu-fader:focus-visible { outline: 2px solid #FF5E00; outline-offset: 3px; }
#vu-fader-track {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: 16px; bottom: 16px; width: 6px; border-radius: 999px; background: #000;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(245, 245, 244, 0.08);
}
#vu-fader-track::before {
  content: '';
  position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: 20px;
  background: repeating-linear-gradient(180deg, rgba(245, 245, 244, 0.14) 0 1px, transparent 1px 14px);
}
#vu-fader-cap {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 48px; height: 28px; top: 0;
  background: linear-gradient(180deg, #eceae7 0%, #9a9896 42%, #454442 100%);
  border-radius: 4px; border-top: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.85), 0 0 18px rgba(255, 94, 0, 0.18);
  cursor: grab;
}
#vu-fader-cap:active { cursor: grabbing; }
#vu-fader-cap::after {
  content: '';
  position: absolute; left: 12%; right: 12%; top: 50%; height: 3px;
  transform: translateY(-50%); border-radius: 2px; background: #040404;
}
@media (min-width: 768px) {
  .prueba-consola { flex-direction: row; gap: 32px; }
  .prueba-scope { height: 240px; flex: 1 1 0%; }
  #vu-meter { width: 128px; }
  #vu-fader { width: 96px; height: 240px; }
  #vu-fader-cap { width: 56px; height: 32px; }
}

/* ── F3/Acto II · Puente "Escucha La Frecuencia" ── */
.puente-frecuencia {
  position: relative; padding: 80px 24px; text-align: center;
  border-top: 1px solid rgba(245, 245, 244, 0.05);
}
@media (min-width: 768px) { .puente-frecuencia { padding: 112px 24px; } }

/* ── F3/Acto III · M4 revelado fotográfico: negativo → color.
   La transición conserva transform/opacity para no romper los
   hovers y parallax que ya existían en las mismas fotos. ── */
.foto-negativa {
  filter: grayscale(1) brightness(0.8) contrast(1.08);
  transition-property: filter, transform, opacity;
  transition-duration: 1.15s, 0.7s, 0.7s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.foto-negativa.foto-revelada { filter: grayscale(0) brightness(1) contrast(1); }

/* ══════════════════════════════════════════════════════════════
   F4 · LA FRECUENCIA — catálogo /beats y páginas [slug]
   ══════════════════════════════════════════════════════════════ */
.freq-catalogo { min-height: 100vh; }
.freq-controles { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.freq-buscador {
  flex: 1; min-width: 220px; padding: 13px 18px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(245, 245, 244, 0.14);
  border-radius: 999px; color: var(--tk-hueso, #f5f5f4);
  font-family: 'Space Grotesk', sans-serif; font-size: 15px; outline: none;
}
.freq-buscador:focus { border-color: rgba(255, 94, 0, 0.6); }
.freq-orden-label { display: flex; align-items: center; gap: 10px; }
.freq-orden {
  padding: 11px 14px; background: rgba(255, 255, 255, 0.04); color: #f5f5f4;
  border: 1px solid rgba(245, 245, 244, 0.14); border-radius: 10px;
  font-family: 'Space Mono', monospace; font-size: 12px; outline: none;
}
.freq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip-filtro {
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(245, 245, 244, 0.75);
  border: 1px solid rgba(245, 245, 244, 0.2); background: transparent;
  border-radius: 999px; padding: 7px 16px; cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.chip-filtro small { opacity: 0.9; letter-spacing: 0; }
.chip-filtro:hover { color: #f5f5f4; border-color: rgba(255, 94, 0, 0.5); }
.chip-filtro.on { background: #FF5E00; border-color: #FF5E00; color: #040404; }
.chip-filtro.on small { opacity: 0.8; }

.freq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.beat-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid rgba(245, 245, 244, 0.1); border-radius: 16px; overflow: hidden;
  background: #080808; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s;
}
.beat-card:hover { transform: translateY(-4px); border-color: rgba(255, 94, 0, 0.45); }
.beat-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.beat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.beat-sello {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: rgba(4, 4, 4, 0.8); border: 1px solid rgba(245, 245, 244, 0.25);
}
.sello-verde { color: #2EBD59; border-color: rgba(46, 189, 89, 0.55) !important; }
.sello-ember { color: #FF5E00; border-color: rgba(255, 94, 0, 0.6) !important; }
.sello-gris { color: rgba(245, 245, 244, 0.55); }
.beat-info { padding: 16px 18px 18px; }
.beat-fila { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.beat-frec, .beat-precio { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.2em; color: #918e8b; }
.beat-precio { color: #FF5E00; }
.beat-titulo {
  font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: 20px; line-height: 1.1; margin: 0 0 6px; color: #f5f5f4;
}
.beat-sub { font-size: 13px; color: rgba(245, 245, 244, 0.65); margin: 0 0 10px; }
.beat-meta { font-family: 'Space Mono', monospace; font-size: 11px; color: #918e8b; }
.beat-genero { color: rgba(255, 94, 0, 0.85); }
.freq-vacio { text-align: center; padding: 60px 0; color: rgba(245, 245, 244, 0.5); font-family: 'Space Mono', monospace; }

/* ── F4 · página [slug] ── */
.freq-detalle { min-height: 100vh; }
.detalle-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 900px) { .detalle-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.facade { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(245, 245, 244, 0.12); background: #020202; }
.facade-boton { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #020202; cursor: pointer; }
.facade-boton.facade-fija { cursor: default; }
.facade-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.facade-btn {
  position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%;
  background: rgba(255, 94, 0, 0.92); color: #040404; display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s;
}
.facade-boton:hover .facade-btn { transform: scale(1.08); background: #FF5E00; }
.facade-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sello-beat {
  position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;
  font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase;
  color: #f5f5f4; background: rgba(4, 4, 4, 0.75); border: 1px solid rgba(245, 245, 244, 0.3);
  border-radius: 999px; padding: 12px 26px;
}
.licencias { border: 1px solid rgba(245, 245, 244, 0.12); background: #080808; border-radius: 16px; padding: 22px; }
.licencia-fila { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(245, 245, 244, 0.07); }
.licencia-fila:first-of-type { border-top: 0; }
.licencia-nombre { font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: 0.08em; color: #f5f5f4; margin: 0 0 4px; }
.licencia-desc { font-size: 12.5px; color: rgba(245, 245, 244, 0.6); margin: 0; line-height: 1.5; }
.licencia-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.licencia-precio { font-family: 'Space Mono', monospace; font-size: 13px; color: #FF5E00; }
.boton-licencia {
  font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #040404; background: #f5f5f4; border-radius: 999px; padding: 9px 18px; text-decoration: none;
}
.boton-licencia:hover { background: #FF5E00; }
.licencia-exclusiva { border-top: 1px dashed rgba(255, 94, 0, 0.4); }
.relacionados { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.relacionado-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: #f5f5f4;
  border: 1px solid rgba(245, 245, 244, 0.1); border-radius: 12px; padding: 16px;
  transition: border-color 0.3s, transform 0.3s;
}
.relacionado-card:hover { border-color: rgba(255, 94, 0, 0.5); transform: translateY(-3px); }
.relacionado-card .font-anton { font-size: 17px; }

.beat-card[hidden]{display:none}

/* ══════════════════════════════════════════════════════════════
   F5 · GYM 808 + SELLO + SERVICIOS
   ══════════════════════════════════════════════════════════════ */
.boton-ember {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase;
  color: #040404; background: #FF5E00; border-radius: 999px; padding: 14px 28px; text-decoration: none; border: 0; cursor: pointer;
}
.boton-ember:hover { background: #f5f5f4; }
.boton-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245, 245, 244, 0.75); border: 1px solid rgba(245, 245, 244, 0.25); border-radius: 999px; padding: 13px 24px; text-decoration: none;
}
.boton-ghost:hover { color: #FF5E00; border-color: rgba(255, 94, 0, 0.6); }

/* ── GYM 808 ── */
.gym-demo-card {
  border: 1px solid rgba(255, 94, 0, 0.35); border-radius: 20px; padding: 28px;
  background: linear-gradient(180deg, #0c0806, #070707);
  box-shadow: 0 0 60px rgba(255, 94, 0, 0.12);
}
.gym-estado { font-size: 13px; color: #918e8b; min-height: 20px; }
.gym-botones { display: flex; gap: 12px; margin: 18px 0 22px; flex-wrap: wrap; }
.gym-respuestas { display: flex; gap: 12px; flex-wrap: wrap; }
.gym-resp {
  flex: 1; min-width: 120px; padding: 14px 12px; border-radius: 12px; cursor: pointer;
  font-family: 'Space Mono', monospace; font-size: 13px; color: #f5f5f4;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(245, 245, 244, 0.2);
  transition: border-color 0.2s, background 0.2s;
}
.gym-resp small { display: block; font-size: 10px; color: #918e8b; margin-top: 4px; }
.gym-resp:hover:not(:disabled) { border-color: #FF5E00; background: rgba(255, 94, 0, 0.08); }
.gym-resp:disabled { opacity: 0.45; cursor: wait; }
.gym-feedback { min-height: 22px; margin: 16px 0 8px; font-size: 13px; color: #f5f5f4; }
.gym-racha { font-size: 11px; color: #918e8b; border-top: 1px dashed rgba(245, 245, 244, 0.15); padding-top: 12px; }
.gym-modulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.gym-modulo { border: 1px solid rgba(245, 245, 244, 0.1); border-radius: 16px; padding: 22px; background: #080808; }
.gym-num { font-size: 11px; color: #FF5E00; letter-spacing: 0.3em; margin-bottom: 10px; }
.gym-form-card { border: 1px solid rgba(245, 245, 244, 0.14); border-radius: 20px; padding: 30px; background: #090909; }
.gym-label { display: block; font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: #918e8b; margin: 16px 0 6px; }
.gym-input {
  width: 100%; padding: 13px 16px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(245, 245, 244, 0.18);
  color: #f5f5f4; font-family: 'Space Grotesk', sans-serif; font-size: 15px; outline: none;
}
.gym-input:focus { border-color: #FF5E00; }
.gym-submit { width: 100%; margin-top: 22px; }
.gym-ok { border: 1px solid rgba(46, 189, 89, 0.5); border-radius: 12px; padding: 18px; background: rgba(46, 189, 89, 0.06); }
.gym-error { color: #FF5E00; margin-top: 12px; font-size: 12px; }
.gym-lista li { margin-bottom: 8px; }

/* ── SELLO ── */
.sello-destacado { border: 1px solid rgba(245, 245, 244, 0.12); border-radius: 20px; overflow: hidden; background: #070707; }
.sello-destacado .facade { border: 0; border-radius: 0; }
.sello-destacado .facade-yt { aspect-ratio: 16 / 8; }
.sello-destacado-info { padding: 22px 26px 26px; }
.sello-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.sello-card { border: 1px solid rgba(245, 245, 244, 0.1); border-radius: 14px; overflow: hidden; background: #080808; padding-bottom: 12px; }
.sello-grid-bts { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #020202; cursor: pointer; }
.facade-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.facade-btn {
  position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%;
  background: rgba(255, 94, 0, 0.92); color: #040404; display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s;
}
.facade-yt:hover .facade-btn { transform: scale(1.08); background: #FF5E00; }
.facade-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.facade-titulo {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 10px 14px;
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: #f5f5f4;
  background: linear-gradient(transparent, rgba(4, 4, 4, 0.92));
}
.sello-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.sello-fila .facade-fila {
  display: flex; justify-content: space-between; gap: 14px; text-decoration: none;
  font-size: 12px; color: rgba(245, 245, 244, 0.75);
  border: 1px solid rgba(245, 245, 244, 0.1); border-radius: 10px; padding: 12px 16px;
  transition: border-color 0.25s, color 0.25s;
}
.sello-fila .facade-fila:hover { border-color: rgba(255, 94, 0, 0.5); color: #f5f5f4; }

/* ── SERVICIOS ── */
.arsenal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.arsenal-modulo { border: 1px solid rgba(245, 245, 244, 0.1); border-radius: 16px; padding: 24px; background: #080808; display: flex; flex-direction: column; }
.arsenal-num { font-size: 11px; color: #FF5E00; letter-spacing: 0.3em; margin-bottom: 10px; }
.arsenal-cta { margin-top: auto; padding-top: 16px; font-size: 11px; color: #FF5E00; text-decoration: none; letter-spacing: 0.08em; }
.arsenal-cta:hover { text-decoration: underline; }
.arsenal-combo { border: 1px dashed rgba(255, 94, 0, 0.4); border-radius: 20px; padding: 40px 24px; background: rgba(255, 94, 0, 0.04); }

/* ── F6 · accesibilidad y navegación de páginas internas ── */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: #FF5E00; color: #040404; padding: 12px 20px; font-family: 'Space Mono', monospace; font-size: 12px; text-decoration: none; }
.skip-link:focus { left: 0; }
.mini-nav { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 18px; background: rgba(4,4,4,0.82); border: 1px solid rgba(245,245,244,0.12); border-radius: 999px; padding: 10px 20px; backdrop-filter: blur(10px); }
.mini-nav-marca { font-family: Anton, sans-serif; font-size: 15px; letter-spacing: 0.05em; color: #f5f5f4; text-decoration: none; }
.mini-nav-links { display: flex; gap: 14px; }
.mini-nav-links a { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,245,244,0.65); text-decoration: none; }
.mini-nav-links a:hover { color: #FF5E00; }
.mini-footer { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: center; padding: 28px 24px; border-top: 1px solid rgba(245,245,244,0.08); background: #040404; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: #918e8b; }
.mini-footer a { color: #c9c6c3; text-decoration: none; }
.mini-footer a:hover { color: #FF5E00; }
.mini-footer-marca { font-family: Anton, sans-serif; font-size: 14px; letter-spacing: 0.05em; color: #f5f5f4; }

/* F6-patch · opción destacada (personalizada 100%) */
.licencia-destacada { border-top: 1px dashed rgba(255, 94, 0, 0.45); background: rgba(255, 94, 0, 0.04); border-radius: 10px; padding-left: 12px; padding-right: 12px; }