/* Página Software: Ray-B Launcher y descargas de cada programa (lee downloads/catalogo.json) */

/* ícono de programa: imagen del catálogo o, mientras no exista, cuadrado gris con iniciales */
.sw-icon { --c: #6B6D66; position: relative; flex: none; width: 64px; height: 64px; border-radius: 14px; overflow: hidden;
  display: grid; place-items: center; background: var(--c); color: #fff;
  font-weight: 800; font-size: 22px; letter-spacing: -.02em; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14); }
.sw-icon.is-temp { background: linear-gradient(145deg, #8A8C85, #5E605A); }
.sw-icon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sw-icon.has-img { background: none; box-shadow: none; }
.sw-icon.has-img img { object-fit: contain; }
.sw-icon.lg { width: 112px; height: 112px; border-radius: 24px; font-size: 38px; }
.sw-icon.sm { width: 36px; height: 36px; border-radius: 9px; font-size: 13px; }
/* sello 光美 cuadrado (Ray-B Launcher) mientras no esté su imagen */
.sw-icon.sw-seal { background: var(--hanko); font-family: var(--jp); font-weight: 900; line-height: 1.02; letter-spacing: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 19px; }
.sw-icon.sw-seal.lg { font-size: 36px; }
.sw-icon.sw-seal.sm { font-size: 11px; }

/* encabezado */
.sw-hero { padding-bottom: clamp(36px, 4vw, 56px); }
.sw-hero h1 em { font-style: normal; color: var(--hanko); }
/* En PC el encabezado es bajo, para que el bloque del launcher se vea completo al entrar */
@media (min-width: 901px) {
  .sw-hero { padding: clamp(28px, 3vw, 44px) 0 clamp(20px, 2vw, 28px); }
  .sw-hero h1 { display: flex; gap: .24em; font-size: clamp(44px, 4.8vw, 72px); }
  .sw-hero .sw-jump { margin-top: 18px; }
  .sw-launcher { padding: clamp(24px, 2.6vw, 40px) clamp(28px, 3.4vw, 52px); }
  .sw-launcher .sw-icon.lg { width: 88px; height: 88px; border-radius: 20px; }
  .sw-launcher .sw-l-lead { margin-top: 14px; font-size: 17px; line-height: 1.45; }
  .sw-launcher .sm-actions { margin-top: 18px; }
  .sw-launcher .sm-meta { margin-top: 10px; }
  .sw-launcher .sm-note { margin-top: 10px; font-size: 13px; }
  .sw-l-list li { padding: 6px 10px; }
}

/* bloque destacado del launcher */
.sw-launcher { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 4.4vw, 64px);
  border-radius: var(--radius-m); background: var(--sumi); color: var(--sumi-texto);
  box-shadow: 0 30px 80px -40px rgba(18, 19, 17, .6); }
.sw-launcher .bg-kanji { position: absolute; right: -1vw; bottom: -4vw; font-family: var(--jp); font-weight: 900;
  font-size: clamp(200px, 26vw, 400px); line-height: .85; color: rgba(230, 228, 222, .04); writing-mode: vertical-rl;
  pointer-events: none; user-select: none; }
.sw-launcher > * { position: relative; }
.sw-l-head { display: flex; gap: 22px; align-items: center; }
.sw-launcher .sm-tag { color: #ff4d64 !important; }
.sw-launcher h2 { margin-top: 6px; font-weight: 800; font-size: clamp(32px, 4vw, 56px); line-height: 1; letter-spacing: -.035em; color: #fff; }
.sw-l-lead { margin-top: 22px; font-family: var(--serif); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--sumi-tenue); max-width: 54ch; }
.sw-launcher .sm-actions { margin-top: 28px; }
.sw-launcher .sm-meta { color: var(--sumi-tenue); }
.sw-launcher .sm-meta b { color: var(--sumi-texto); }
.sw-launcher .sm-note { color: var(--sumi-tenue); }
.sw-launcher .sm-note b { color: var(--sumi-texto); }

/* lista de programas dentro del launcher (ilustración, se arma con el catálogo) */
.sw-l-list { list-style: none; margin: 0; padding: 10px; border: 1px solid var(--sumi-linea); border-radius: var(--radius-m);
  background: var(--sumi-2); display: grid; gap: 2px; }
.sw-l-list li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 6px; font-size: 14px; }
.sw-l-list li:nth-child(odd) { background: rgba(230, 228, 222, .03); }
.sw-l-list b { color: var(--sumi-texto); font-weight: 600; }
.sw-l-list small { display: block; color: var(--sumi-tenue); font-size: 12px; }
.sw-l-list .sw-chip { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 9px;
  border-radius: 99px; border: 1px solid var(--sumi-linea); color: var(--sumi-tenue); }
.sw-l-list .sw-chip.go { border-color: transparent; background: var(--hanko); color: #fff; }
@media (max-width: 900px) { .sw-launcher { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .sw-l-head { flex-direction: column; align-items: flex-start; gap: 16px; } .sw-icon.lg { width: 88px; height: 88px; border-radius: 20px; font-size: 30px; } }

.sw-l-after { margin-top: clamp(18px, 2vw, 24px); max-width: none; text-wrap: balance; }

/* acceso rápido con los íconos */
.sw-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.sw-jump a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px 6px 6px;
  border: 1px solid var(--linea); border-radius: 99px; text-decoration: none; font-size: 14px; font-weight: 600;
  transition: border-color .2s ease, background-color .2s ease, transform 160ms var(--ease-out); }
.sw-jump a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .sw-jump a:hover { border-color: var(--tinta); background: var(--washi); } }

/* tarjetas de programas */
.sw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .sw-grid { grid-template-columns: 1fr; } }
.sw-card { --c: var(--tinta); position: relative; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: calc(var(--header) + 16px);
  border: 1px solid var(--linea); border-radius: var(--radius-m); background: var(--washi); padding: clamp(22px, 2.6vw, 32px);
  overflow: hidden; }
.sw-card::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--c); }
.sw-card-head { display: flex; gap: 18px; align-items: center; }
.sw-num { margin-left: auto; align-self: flex-start; font-weight: 800; color: var(--hanko); font-variant-numeric: tabular-nums; font-size: 14px; }
.sw-card h3 { font-weight: 700; font-size: 23px; letter-spacing: -.02em; line-height: 1.1; }
.sw-card .sm-tag { margin-bottom: 4px; }
.sw-sum { font-weight: 600; font-size: 17px; line-height: 1.35; }
.sw-desc { margin-top: -6px; font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--grafito); }
.sw-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--grafito); }
.sw-facts dt { display: none; }
.sw-facts dd { margin: 0; }
.sw-facts dd b { color: var(--tinta); font-weight: 600; }
.sw-card .sm-actions { margin-top: 0; }
.btn.sw-soon { pointer-events: none; background: transparent; border-color: var(--linea); color: var(--grafito); }
.sw-launcher .btn.sw-soon { border-color: var(--sumi-linea); color: var(--sumi-tenue); }

/* entrada suave de las tarjetas (se crean con JavaScript) */
.sw-anim { opacity: 0; transform: translateY(18px); animation: sw-in .8s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes sw-in { to { opacity: 1; transform: none; } }

.sw-section-head { margin: clamp(64px, 8vw, 112px) 0 clamp(28px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px clamp(32px, 6vw, 96px); align-items: end; }
.sw-section-head h2 { font-weight: 800; font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.03em; line-height: 1.02; }
@media (max-width: 900px) { .sw-section-head { grid-template-columns: 1fr; } }
.sw-after { margin-top: clamp(56px, 7vw, 96px); }