/* Ray-B Scene Manager: página del software, conectar PC, privacidad y 404 */
.sm-hero { padding: clamp(72px, 9vw, 128px) 0 clamp(40px, 5vw, 64px); }
.sm-hero h1 { font-weight: 800; font-size: clamp(40px, 6.4vw, 92px); line-height: .96; letter-spacing: -.04em; }
.sm-hero h1 em { font-style: normal; color: var(--hanko); }
.sm-hero .section-lead { margin-top: 22px; }
.sm-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }
.sm-meta { margin-top: 14px; font-size: 14px; color: var(--grafito); }
.sm-meta b { color: var(--tinta); font-weight: 600; }
.sm-shot { margin: 0 0 clamp(56px, 7vw, 96px); border-radius: var(--radius-m); overflow: hidden; background: var(--sumi);
  box-shadow: 0 30px 80px -40px rgba(18, 19, 17, .55); }
.sm-shot img { display: block; width: 100%; height: auto; }

.sm-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linea);
  border: 1px solid var(--linea); border-radius: var(--radius-m); overflow: hidden; margin-bottom: clamp(64px, 8vw, 112px); }
.sm-feature { background: var(--papel); padding: clamp(22px, 2.6vw, 34px); }
.sm-feature b { font-family: var(--jp); color: var(--hanko); font-size: 22px; font-weight: 700; }
.sm-feature h3 { margin-top: 10px; font-weight: 700; font-size: 19px; }
.sm-feature p { margin-top: 8px; font-family: var(--serif); font-size: 16px; color: var(--grafito); }
@media (max-width: 900px) { .sm-features { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sm-features { grid-template-columns: 1fr; } }

.sm-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px);
  padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--linea); align-items: start; }
@media (max-width: 900px) { .sm-split { grid-template-columns: 1fr; } }
.sm-split h2 { font-weight: 800; font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -.03em; line-height: 1.02; }
.sm-split .section-lead { margin-top: 16px; }

.sm-steps { counter-reset: s; display: grid; gap: 0; border-top: 2px solid var(--tinta); }
.sm-steps li { list-style: none; counter-increment: s; display: grid; grid-template-columns: 48px 1fr; gap: 12px;
  padding: 18px 0; border-bottom: 1px solid var(--linea); }
.sm-steps li::before { content: counter(s, decimal-leading-zero); font-weight: 800; color: var(--hanko); font-variant-numeric: tabular-nums; }
.sm-steps strong { display: block; font-weight: 600; }
.sm-steps span { display: block; margin-top: 2px; font-family: var(--serif); color: var(--grafito); font-size: 16px; }
.sm-note { margin-top: 18px; font-size: 14px; color: var(--grafito); max-width: 62ch; }
.sm-note b { color: var(--tinta); }

/* tarjeta de cuenta */
.sm-card { border: 1px solid var(--linea); border-radius: var(--radius-m); background: var(--washi);
  padding: clamp(22px, 3vw, 34px); }
.sm-card[hidden], .sm-state[hidden] { display: none; }
.sm-user { display: flex; gap: 16px; align-items: center; }
.sm-avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--hanko); color: #fff; display: grid;
  place-items: center; font-weight: 700; font-size: 20px; overflow: hidden; flex: none; }
.sm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sm-user strong { display: block; font-size: 20px; font-weight: 700; }
.sm-user small { display: block; color: var(--grafito); font-size: 14px; }
.sm-device { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); font-size: 15px; }
.sm-device dt { color: var(--grafito); font-size: 13px; }
.sm-device dd { margin: 2px 0 0; font-weight: 600; }
.sm-card .sm-actions { margin-top: 22px; }
.sm-google { min-height: 44px; margin-top: 20px; }
.sm-msg { margin-top: 14px; font-size: 14px; color: var(--grafito); }
.sm-msg.err { color: var(--hanko); font-weight: 500; }
.sm-legal { margin-top: 14px; font-size: 13px; color: var(--grafito); }
.sm-legal a { text-decoration: underline; text-underline-offset: 3px; }

/* conectar.html y 404: tarjeta centrada sobre fondo sumi */
.sm-center { min-height: calc(100svh - var(--header)); display: grid; place-items: center; padding: 48px var(--gutter);
  background: var(--sumi); color: var(--sumi-texto); position: relative; overflow: hidden; }
.sm-center .bg-kanji { position: absolute; inset: auto -2vw -6vw auto; font-family: var(--jp); font-weight: 900;
  font-size: clamp(220px, 34vw, 520px); line-height: .85; color: rgba(230, 228, 222, .045); pointer-events: none;
  writing-mode: vertical-rl; }
.sm-panel { position: relative; width: min(520px, 100%); background: #1A1B18; border: 1px solid var(--sumi-linea);
  border-radius: var(--radius-m); padding: clamp(26px, 4vw, 40px); }
.sm-panel .seal { width: 44px; height: 60px; font-size: 18px; }
.sm-panel h1 { margin-top: 22px; font-weight: 800; font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.sm-panel p { margin-top: 12px; font-family: var(--serif); font-size: 17px; color: var(--sumi-tenue); }
.sm-panel .sm-pc { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--sumi-linea); border-radius: var(--radius-s);
  font-size: 15px; color: var(--sumi-texto); }
.sm-panel .sm-pc b { color: #fff; }
.sm-panel .sm-msg { color: var(--sumi-tenue); }
.sm-panel .sm-msg.err { color: #ff8a8a; }
.sm-panel .sm-actions { margin-top: 24px; }
.sm-panel .sm-legal { color: var(--sumi-tenue); }
.sm-panel .sm-big { margin: 0; font-family: var(--sans, inherit); font-weight: 800; font-size: clamp(96px, 16vw, 180px); line-height: .9; letter-spacing: -.06em; color: #fff; }
.sm-panel .sm-big span { color: var(--hanko); }

/* pie de página: enlace del software */
.site-footer a.footer-sm { color: #ff4d64; font-weight: 600; }
.site-footer a.footer-sm::after { content: "→"; margin-left: 6px; transition: transform .3s var(--ease-out, ease); }
@media (hover: hover) { .site-footer a.footer-sm:hover::after { transform: translateX(3px); } }

/* privacidad */
.sm-legal-page { padding: 0 0 clamp(80px, 9vw, 120px); max-width: 76ch; }
.sm-legal-page h2 { margin-top: 40px; font-weight: 700; font-size: 22px; }
.sm-legal-page p, .sm-legal-page li { margin-top: 10px; font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--grafito); }
.sm-legal-page ul { padding-left: 20px; }
.sm-legal-page a { text-decoration: underline; text-underline-offset: 3px; color: var(--tinta); }

/* dos formas de instalar */
.sm-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .sm-options { grid-template-columns: 1fr; } }
.sm-option { border: 1px solid var(--linea); border-radius: var(--radius-m); background: var(--washi);
  padding: clamp(20px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 12px; }
.sm-option h3 { font-weight: 700; font-size: 21px; }
.sm-option > p { font-family: var(--serif); font-size: 16px; color: var(--grafito); }
.sm-option .sm-steps { margin: 6px 0 4px; }
.sm-option .btn { align-self: flex-start; }
.sm-tag { font-family: var(--sans, inherit) !important; font-size: 12px !important; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--hanko) !important; }
.sm-split.sm-wide { grid-template-columns: 1fr; gap: 28px; }
.sm-split.sm-wide .section-lead { max-width: 70ch; }
.sm-steps { padding: 0; margin: 0; }
.sm-option .sm-steps li { grid-template-columns: 40px 1fr; }