/* Brújula vocacional y mapa de personalidad (js/sinapsis-brujula.js).
   Vive dentro de la cinemática de Sinaí: verde profundo, dorado y crema. */
.sbr {
  --sbr-oro: #E8B84A;
  --sbr-oro-claro: #F5D062;
  --sbr-crema: #F4F2EC;
  --sbr-texto: #EEF2EC;
  --sbr-suave: #B7C9BC;
  --sbr-tenue: #8FA898;
  --sbr-card: rgba(9, 22, 15, 0.78);
  --sbr-card-2: rgba(255, 255, 255, 0.045);
  --sbr-borde: rgba(232, 184, 74, 0.22);
  --sbr-borde-fuerte: rgba(232, 184, 74, 0.55);
  --sbr-salvia: #A9C2A0;
  --sbr-terracota: #D9895A;
  color: var(--sbr-texto);
  font-family: var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.55;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}
.sbr-entra { animation: sbrEntra 0.38s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes sbrEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sbr-ico { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* ── Modo examen: la genia se vuelve un avatar y el examen ocupa el escenario ── */
.sinai-emergence-stage.sbr-modo { max-width: 880px; gap: 14px; padding-top: 8px; }
.sbr-modo .sinai-emergence-main-row { gap: 14px; justify-content: flex-start; align-items: center; }
.sbr-modo .sinai-genie-character-wrapper { flex: 0 0 72px; max-width: 72px; animation: none; }
.sbr-modo .sinai-genie-character-img { width: 72px; max-height: 92px; animation: none; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(245, 208, 98, 0.35)); }
.sbr-modo .sinai-genie-aura-bloom, .sbr-modo .sinai-genie-voice-beacon, .sbr-modo .sinai-genie-smoke-burst { display: none; }
.sbr-modo .sinai-emergence-dialog-col { padding: 10px 12px; border-radius: 16px; gap: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.sbr-modo .sinai-emergence-speech-box { padding: 10px 16px; min-height: 0; border-left-width: 3px; cursor: default; }
.sbr-modo .sinai-emergence-speech-text { font-size: 17px; line-height: 1.45; text-shadow: none; }
.sbr-modo .sinai-speech-click-hint { display: none; }
.sbr-modo .sinai-emergence-bottom-area { max-width: 880px; }

/* ── Tipografía y cabeceras ── */
.sbr-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sbr-oro); }
.sbr-titulo { margin: 6px 0 0; font-family: var(--font-serif, "Newsreader", Georgia, serif); font-weight: 500; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; color: var(--sbr-crema); }
.sbr-titulo.chico { font-size: clamp(24px, 3vw, 30px); }
.sbr-titulo em { color: var(--sbr-oro-claro); font-style: italic; }
.sbr-lead { margin: 10px 0 0; color: var(--sbr-suave); font-size: 16.5px; max-width: 64ch; }
.sbr-cab { display: flex; flex-direction: column; }
.sbr-h2 { margin: 18px 0 0; font-family: var(--font-serif, "Newsreader", Georgia, serif); font-weight: 500; font-size: 26px; color: var(--sbr-crema); }
.sbr-h3 { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 15px; font-weight: 600; color: var(--sbr-crema); }
.sbr-sub { margin: -8px 0 0; color: var(--sbr-tenue); font-size: 14.5px; }
.sbr-nota, .sbr-pista { margin: 0; color: var(--sbr-tenue); font-size: 13.5px; }
.sbr-pista { text-align: center; }
@media (hover: none) { .sbr-pista { display: none; } }

/* ── Botones ── */
.sbr-acciones, .sbr-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sbr-nav { justify-content: space-between; }
.sbr-nav .sbr-btn.ter { margin-left: auto; }
.sbr-acciones.fin { justify-content: center; margin-top: 4px; }
.sbr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 15.5px; cursor: pointer; border: 1.5px solid transparent; transition: background-color 0.18s, border-color 0.18s, color 0.18s, opacity 0.18s, transform 0.12s; }
.sbr-btn:active:not(:disabled) { transform: scale(0.98); }
.sbr-btn:focus-visible, .sbr-op:focus-visible, .sbr-bola:focus-visible, .sbr-seg button:focus-visible, .sbr-chip:focus-visible, .sbr-det summary:focus-visible, .sbr-mas summary:focus-visible { outline: 3px solid var(--sbr-oro-claro); outline-offset: 2px; }
.sbr-btn.pri { background: var(--sbr-crema); color: #14301F; }
.sbr-btn.pri:hover:not(:disabled) { background: #fff; }
.sbr-btn.pri.dorado { background: linear-gradient(135deg, #F5D062, #E8B84A); color: #1A2C12; box-shadow: 0 8px 26px rgba(232, 184, 74, 0.28); }
.sbr-btn.sec { background: transparent; color: var(--sbr-crema); border-color: rgba(244, 242, 236, 0.35); }
.sbr-btn.sec:hover:not(:disabled) { border-color: var(--sbr-crema); background: rgba(244, 242, 236, 0.06); }
.sbr-btn.ter { background: transparent; color: var(--sbr-suave); padding: 0 12px; text-decoration: underline; text-underline-offset: 3px; }
.sbr-btn:disabled { opacity: 0.42; cursor: not-allowed; }

/* ── Intro ── */
.sbr-partes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sbr-parte { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 16px; background: var(--sbr-card); border: 1px solid var(--sbr-borde); }
.sbr-parte > b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(232, 184, 74, 0.16); color: var(--sbr-oro-claro); font-family: var(--font-serif, Georgia, serif); font-size: 17px; flex-shrink: 0; }
.sbr-parte h3 { margin: 2px 0 2px; font-size: 15.5px; color: var(--sbr-crema); }
.sbr-parte p { margin: 0; font-size: 13.5px; color: var(--sbr-suave); }
.sbr-cargando, .sbr-revelando { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 0; color: var(--sbr-oro-claro); text-align: center; }
.sbr-revelando p { margin: 6px 0 0; font-family: var(--font-serif, Georgia, serif); font-size: 24px; color: var(--sbr-crema); }
.sbr-revelando small { color: var(--sbr-tenue); font-size: 14px; }
.sbr-aguja { width: 120px; height: 120px; }
.sbr-aguja circle { fill: none; stroke: rgba(232, 184, 74, 0.5); stroke-width: 2; }
.sbr-aguja circle.fino { stroke: rgba(232, 184, 74, 0.2); stroke-dasharray: 3 5; }
.sbr-aguja circle.centro { fill: var(--sbr-oro-claro); stroke: none; }
.sbr-aguja path { fill: var(--sbr-oro); }
.sbr-aguja path.sur { fill: rgba(244, 242, 236, 0.5); }
.sbr-aguja .gira { transform-origin: 60px 60px; animation: sbrAguja 1.9s cubic-bezier(0.5, 0, 0.2, 1) both; }
@keyframes sbrAguja { 0% { transform: rotate(-160deg); } 55% { transform: rotate(40deg); } 75% { transform: rotate(10deg); } 100% { transform: rotate(25deg); } }
.sbr-revelando > .sbr-ico { animation: sbrLatido 1.4s ease-in-out infinite; }
@keyframes sbrLatido { 50% { transform: scale(1.08); opacity: 0.8; } }

/* ── Pasos y progreso ── */
.sbr-pasos { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sbr-pasos li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); color: var(--sbr-tenue); font-size: 13px; font-weight: 600; min-width: 0; }
.sbr-pasos li.actual { background: rgba(232, 184, 74, 0.12); color: var(--sbr-crema); box-shadow: inset 0 0 0 1px var(--sbr-borde-fuerte); }
.sbr-pasos li.hecho { color: var(--sbr-salvia); }
.sbr-paso-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); font-size: 12px; flex-shrink: 0; }
.sbr-pasos li.actual .sbr-paso-num { background: var(--sbr-oro); color: #1A2C12; }
.sbr-pasos li.hecho .sbr-paso-num { background: rgba(169, 194, 160, 0.25); }
.sbr-paso-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbr-progreso { display: flex; flex-direction: column; gap: 6px; }
.sbr-progreso-txt { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--sbr-suave); }
.sbr-progreso-txt b { color: var(--sbr-oro-claro); font-variant-numeric: tabular-nums; }
.sbr-barra { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.sbr-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6FA287, var(--sbr-oro)); transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.sbr-instruccion { margin: 0; font-size: 15px; color: var(--sbr-suave); }
.sbr-instruccion b { color: var(--sbr-crema); }

/* ── Preguntas ── */
.sbr-items { display: flex; flex-direction: column; gap: 12px; }
.sbr-item { margin: 0; padding: 18px 18px 16px; border-radius: 18px; background: var(--sbr-card); border: 1px solid rgba(255, 255, 255, 0.07); min-width: 0; transition: border-color 0.2s, background-color 0.2s; }
.sbr-item.listo { border-color: rgba(169, 194, 160, 0.3); }
.sbr-item.guardando { opacity: 0.92; }
.sbr-item > legend { float: left; width: 100%; }
.sbr-escala5, .sbr-escala7 { clear: both; }
.sbr-preg { display: flex; gap: 12px; align-items: baseline; padding: 0; margin: 0 0 14px; font-size: 18px; line-height: 1.4; color: var(--sbr-crema); font-weight: 500; }
.sbr-num { flex-shrink: 0; min-width: 28px; font-size: 13px; font-weight: 700; color: var(--sbr-oro); font-variant-numeric: tabular-nums; }
.sbr-escala5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sbr-op { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; padding: 8px 4px; border-radius: 14px; background: var(--sbr-card-2); border: 1.5px solid rgba(255, 255, 255, 0.1); color: var(--sbr-suave); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background-color 0.16s, border-color 0.16s, color 0.16s; }
.sbr-op:hover { border-color: rgba(232, 184, 74, 0.5); color: var(--sbr-crema); }
.sbr-op-punto { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; transition: background-color 0.16s, transform 0.16s; }
.sbr-op.v1 .sbr-op-punto { width: 10px; height: 10px; }
.sbr-op.v2 .sbr-op-punto { width: 12px; height: 12px; }
.sbr-op.v4 .sbr-op-punto { width: 16px; height: 16px; }
.sbr-op.v5 .sbr-op-punto { width: 19px; height: 19px; }
.sbr-op.activo { background: rgba(232, 184, 74, 0.16); border-color: var(--sbr-oro); color: var(--sbr-crema); }
.sbr-op.activo .sbr-op-punto { background: var(--sbr-oro); border-color: var(--sbr-oro); transform: scale(1.15); }
.sbr-escala7 { display: flex; justify-content: space-between; align-items: center; gap: 4px; padding: 0 2px; }
.sbr-bola { position: relative; width: 48px; height: 48px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; padding: 0; display: grid; place-items: center; }
.sbr-bola::before { content: ""; border-radius: 50%; border: 2px solid rgba(169, 194, 160, 0.65); transition: background-color 0.16s, border-color 0.16s, transform 0.16s; }
.sbr-bola.b1::before, .sbr-bola.b7::before { width: 40px; height: 40px; }
.sbr-bola.b2::before, .sbr-bola.b6::before { width: 32px; height: 32px; }
.sbr-bola.b3::before, .sbr-bola.b5::before { width: 25px; height: 25px; }
.sbr-bola.b4::before { width: 19px; height: 19px; border-color: rgba(183, 201, 188, 0.5); }
.sbr-bola.b1::before, .sbr-bola.b2::before, .sbr-bola.b3::before { border-color: rgba(217, 137, 90, 0.75); }
.sbr-bola:hover::before { transform: scale(1.08); }
.sbr-bola.activo.b1::before, .sbr-bola.activo.b2::before, .sbr-bola.activo.b3::before { background: var(--sbr-terracota); border-color: var(--sbr-terracota); }
.sbr-bola.activo.b4::before { background: var(--sbr-suave); border-color: var(--sbr-suave); }
.sbr-bola.activo.b5::before, .sbr-bola.activo.b6::before, .sbr-bola.activo.b7::before { background: var(--sbr-salvia); border-color: var(--sbr-salvia); }
.sbr-extremos { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: var(--sbr-tenue); }
.sbr-extremos span:first-child { color: #E3A47F; }
.sbr-extremos span:last-child { color: var(--sbr-salvia); }
.sbr-tiembla { animation: sbrTiembla 0.42s ease; border-color: var(--sbr-terracota) !important; }
@keyframes sbrTiembla { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ── Hitos ── */
.sbr-hito { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 26px 18px; border-radius: 24px; background: radial-gradient(circle at 50% 0%, rgba(232, 184, 74, 0.16), transparent 60%), var(--sbr-card); border: 1px solid var(--sbr-borde); }
.sbr-hito .sbr-lead { margin-left: auto; margin-right: auto; }
.sbr-hito .sbr-acciones { justify-content: center; margin-top: 14px; }
.sbr-hito-sello { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; margin-bottom: 8px; background: linear-gradient(135deg, #F5D062, #E8B84A); color: #1A2C12; box-shadow: 0 0 0 8px rgba(232, 184, 74, 0.12); animation: sbrSello 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes sbrSello { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }
.sbr-pistas { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sbr-pistas li { display: flex; gap: 10px; justify-content: center; font-size: 16px; }
.sbr-pistas span { color: var(--sbr-tenue); }
.sbr-pistas b { color: var(--sbr-oro-claro); font-weight: 600; }

/* ── Mundos del futuro ── */
.sbr-mundos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sbr-mundo { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: var(--sbr-card); border: 1px solid rgba(255, 255, 255, 0.07); transition: border-color 0.2s, background-color 0.2s; }
.sbr-mundo.listo { border-color: rgba(169, 194, 160, 0.3); }
.sbr-mundo.encanta { border-color: var(--sbr-oro); background: linear-gradient(180deg, rgba(232, 184, 74, 0.1), transparent 70%), var(--sbr-card); }
.sbr-mundo-cab { display: flex; gap: 12px; align-items: flex-start; }
.sbr-mundo-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(232, 184, 74, 0.12); color: var(--sbr-oro-claro); flex-shrink: 0; }
.sbr-mundo h3 { margin: 0; font-size: 16px; color: var(--sbr-crema); line-height: 1.3; }
.sbr-mundo p { margin: 3px 0 0; font-size: 13.5px; color: var(--sbr-suave); line-height: 1.45; }
.sbr-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); gap: 3px; }
.sbr-seg button { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--sbr-suave); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background-color 0.16s, color 0.16s; }
.sbr-seg button:hover { color: var(--sbr-crema); }
.sbr-seg button.activo { background: rgba(244, 242, 236, 0.14); color: var(--sbr-crema); }
.sbr-seg button[data-v="2"].activo { background: var(--sbr-oro); color: #1A2C12; }
.sbr-seg button[data-v="0"].activo { background: rgba(217, 137, 90, 0.25); color: #F1C3A6; }
.sbr-contador { margin: 0; text-align: center; color: var(--sbr-suave); font-size: 14.5px; }

/* ── Contexto ── */
.sbr-grupo { margin: 0; padding: 16px; border-radius: 18px; background: var(--sbr-card); border: 1px solid rgba(255, 255, 255, 0.07); }
.sbr-grupo legend { display: flex; gap: 10px; align-items: baseline; float: left; width: 100%; padding: 0; margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--sbr-crema); }
.sbr-grupo legend span { font-size: 12.5px; font-weight: 500; color: var(--sbr-tenue); }
.sbr-grupo .sbr-chips { clear: both; }
.sbr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sbr-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--sbr-card-2); border: 1.5px solid rgba(255, 255, 255, 0.12); color: var(--sbr-suave); font: inherit; font-size: 14.5px; cursor: pointer; transition: background-color 0.16s, border-color 0.16s, color 0.16s; }
.sbr-chip:hover { border-color: rgba(232, 184, 74, 0.5); color: var(--sbr-crema); }
.sbr-chip.activo { background: rgba(232, 184, 74, 0.16); border-color: var(--sbr-oro); color: var(--sbr-crema); }
.sbr-chips.estatico .sbr-chip { cursor: default; min-height: 36px; font-size: 14px; color: var(--sbr-crema); }
.sbr-mas { border-radius: 18px; background: var(--sbr-card); border: 1px solid rgba(255, 255, 255, 0.07); padding: 0 16px; }
.sbr-mas summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; font-weight: 600; color: var(--sbr-crema); list-style-position: inside; }
.sbr-texto { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 14.5px; color: var(--sbr-suave); }
.sbr-texto textarea { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, 0.14); background: rgba(0, 0, 0, 0.25); color: var(--sbr-crema); font: inherit; font-size: 16px; padding: 10px 12px; resize: vertical; }
.sbr-texto textarea:focus { outline: none; border-color: var(--sbr-oro); }
.sbr-error { margin: 0; color: #F1A98A; font-size: 14px; min-height: 1px; }

/* ── Informe ── */
.sbr-informe { display: flex; flex-direction: column; gap: 18px; }
.sbr-res-cab { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 18px 22px; border-radius: 24px; background: radial-gradient(circle at 50% 0%, rgba(232, 184, 74, 0.2), transparent 65%), var(--sbr-card); border: 1px solid var(--sbr-borde-fuerte); }
.sbr-res-cab .sbr-lead { margin: 4px auto 0; }
.sbr-codigo { display: flex; gap: 14px; justify-content: center; margin-top: 6px; }
.sbr-codigo span { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: sbrLetra 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation-delay: calc(var(--i) * 0.18s + 0.1s); }
.sbr-codigo b { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 20px; font-family: var(--font-serif, Georgia, serif); font-size: 44px; font-weight: 500; color: #12251A; background: var(--c); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.sbr-codigo small { font-size: 13px; color: var(--sbr-suave); font-weight: 600; }
@keyframes sbrLetra { from { opacity: 0; transform: translateY(14px) scale(0.7); } to { opacity: 1; transform: none; } }
.sbr-res-hex { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px; border-radius: 22px; background: var(--sbr-card); border: 1px solid rgba(255, 255, 255, 0.07); }
.sbr-radar { width: 100%; max-width: 320px; margin: 0 auto; display: block; overflow: visible; }
.sbr-radar .rejilla { fill: none; stroke: rgba(255, 255, 255, 0.1); }
.sbr-radar .eje { stroke: rgba(255, 255, 255, 0.08); }
.sbr-radar .forma { fill: rgba(232, 184, 74, 0.28); stroke: var(--sbr-oro); stroke-width: 2.5; stroke-linejoin: round; }
.sbr-radar text { fill: var(--sbr-suave); font-size: 12px; font-weight: 600; font-family: inherit; }
.sbr-radar.velado .forma { filter: blur(3px); }
.sbr-hito .sbr-radar { max-width: 240px; margin: 14px auto 0; }
.sbr-radar.animado .forma { transform-origin: 130px 120px; animation: sbrForma 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
@keyframes sbrForma { from { transform: scale(0.05); opacity: 0; } to { transform: none; opacity: 1; } }
.sbr-dims { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sbr-dims li { display: grid; grid-template-columns: 28px 112px 1fr 32px; align-items: center; gap: 8px; font-size: 14px; }
.sbr-dim-l { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--c); color: #12251A; font-weight: 700; font-size: 13px; }
.sbr-dim-n { color: var(--sbr-crema); }
.sbr-dim-b { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.sbr-dim-b i { display: block; height: 100%; border-radius: inherit; background: var(--c); animation: sbrBarra 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; transform-origin: left; }
@keyframes sbrBarra { from { transform: scaleX(0); } to { transform: none; } }
.sbr-dims b { text-align: right; color: var(--sbr-crema); font-variant-numeric: tabular-nums; }

.sbr-top { display: flex; flex-direction: column; gap: 12px; }
.sbr-carrera { padding: 18px; border-radius: 20px; background: var(--sbr-card); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 10px; animation: sbrEntra 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--i) * 0.12s + 0.8s); }
.sbr-carrera.primera { border-color: var(--sbr-oro); background: linear-gradient(180deg, rgba(232, 184, 74, 0.12), transparent 55%), var(--sbr-card); }
.sbr-carrera-cab { display: flex; gap: 14px; align-items: flex-start; }
.sbr-rank { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: rgba(232, 184, 74, 0.16); color: var(--sbr-oro-claro); font-family: var(--font-serif, Georgia, serif); font-size: 19px; }
.sbr-carrera.primera .sbr-rank { background: var(--sbr-oro); color: #1A2C12; }
.sbr-carrera-tit { flex: 1; min-width: 0; }
.sbr-carrera h3 { margin: 0 0 6px; font-family: var(--font-serif, Georgia, serif); font-weight: 500; font-size: 21px; line-height: 1.2; color: var(--sbr-crema); }
.sbr-afin { position: relative; display: grid; place-items: center; width: 62px; height: 62px; flex-shrink: 0; border-radius: 50%; background: conic-gradient(var(--sbr-oro) calc(var(--v) * 1%), rgba(255, 255, 255, 0.08) 0); }
.sbr-afin::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #0D1E15; }
.sbr-afin b, .sbr-afin small { position: relative; }
.sbr-afin b { font-size: 19px; color: var(--sbr-crema); line-height: 1; margin-top: 4px; }
.sbr-afin small { font-size: 10px; color: var(--sbr-tenue); margin-top: -14px; }
.sbr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sbr-tags.centro { justify-content: center; }
.sbr-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, 0.07); color: var(--sbr-suave); }
.sbr-tag.p-alta { background: rgba(169, 194, 160, 0.2); color: #CFE3C7; }
.sbr-tag.p-emergente { background: rgba(232, 184, 74, 0.18); color: var(--sbr-oro-claro); }
.sbr-tag.p-crece { background: rgba(157, 180, 200, 0.18); color: #CADAE7; }
.sbr-tag.p-transforma { background: rgba(217, 137, 90, 0.2); color: #F1C3A6; }
.sbr-futuro { margin: 0; font-size: 15px; color: var(--sbr-suave); }
.sbr-razones { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sbr-razones span { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; color: var(--sbr-crema); }
.sbr-razones .sbr-ico { color: var(--sbr-salvia); }
.sbr-det { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 4px; }
.sbr-det summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 14.5px; font-weight: 600; color: var(--sbr-oro-claro); }
.sbr-det p, .sbr-det li { font-size: 14.5px; color: var(--sbr-suave); }
.sbr-det h4 { margin: 12px 0 4px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sbr-tenue); }
.sbr-det ul { margin: 0; padding-left: 20px; }
.sbr-det .sbr-paso-1 { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(232, 184, 74, 0.1); color: var(--sbr-crema); }
.sbr-filas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sbr-fila { padding: 14px 16px; border-radius: 16px; background: var(--sbr-card); border: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; gap: 8px; }
.sbr-fila-cab { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.sbr-fila h3 { margin: 0; font-size: 16px; color: var(--sbr-crema); }
.sbr-fila-afin { white-space: nowrap; font-weight: 700; color: var(--sbr-oro-claro); font-variant-numeric: tabular-nums; }
.sbr-cuidado { padding: 16px; border-radius: 18px; background: rgba(217, 137, 90, 0.08); border: 1px solid rgba(217, 137, 90, 0.3); }
.sbr-cuidado p { margin: 8px 0 0; font-size: 14.5px; color: var(--sbr-suave); }
.sbr-cuidado b { color: var(--sbr-crema); }
.sbr-plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; counter-reset: plan; }
.sbr-plan li { position: relative; padding: 0 0 18px 34px; }
.sbr-plan li::before { content: ""; position: absolute; left: 8px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--sbr-oro); box-shadow: 0 0 0 4px rgba(232, 184, 74, 0.18); }
.sbr-plan li::after { content: ""; position: absolute; left: 13px; top: 22px; bottom: 0; width: 2px; background: rgba(232, 184, 74, 0.25); }
.sbr-plan li:last-child::after { display: none; }
.sbr-plan b { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sbr-oro); }
.sbr-plan p { margin: 2px 0 0; color: var(--sbr-crema); font-size: 15.5px; }
.sbr-sello { display: flex; gap: 14px; align-items: center; justify-content: center; padding: 16px; border-radius: 18px; border: 1px dashed var(--sbr-borde-fuerte); background: rgba(232, 184, 74, 0.06); }
.sbr-sello-ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #F5D062, #E8B84A); color: #1A2C12; flex-shrink: 0; }
.sbr-sello b { display: block; font-family: var(--font-serif, Georgia, serif); font-weight: 500; font-size: 20px; color: var(--sbr-crema); }
.sbr-sello small { color: var(--sbr-suave); font-size: 13.5px; }
.sbr-aviso { margin: 0; text-align: center; font-size: 12.5px; color: var(--sbr-tenue); }
.sbr-aviso a { color: var(--sbr-suave); }

/* Personalidad */
.sbr-tipo { display: flex; flex-direction: column; align-items: center; gap: 2px; animation: sbrLetra 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; }
.sbr-tipo b { font-family: var(--font-serif, Georgia, serif); font-weight: 500; font-size: clamp(46px, 8vw, 64px); letter-spacing: 0.06em; color: var(--sbr-oro-claro); line-height: 1.05; }
.sbr-tipo span { font-family: var(--font-serif, Georgia, serif); font-style: italic; font-size: 24px; color: var(--sbr-crema); }
.sbr-espectros { list-style: none; margin: 0; padding: 18px; border-radius: 22px; background: var(--sbr-card); border: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; gap: 16px; }
.sbr-esp-nom { display: block; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sbr-tenue); margin-bottom: 6px; text-align: center; }
.sbr-esp-fila { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; align-items: center; font-size: 14px; }
.sbr-esp-fila .pa { text-align: right; }
.sbr-esp-fila .pa, .sbr-esp-fila .pb { color: var(--sbr-tenue); }
.sbr-esp.gana-a .pa, .sbr-esp.gana-b .pb { color: var(--sbr-crema); font-weight: 600; }
.sbr-esp-barra { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(232, 184, 74, 0.55), rgba(255, 255, 255, 0.08) 50%, rgba(169, 194, 160, 0.55)); }
.sbr-esp-barra i { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--sbr-crema); box-shadow: 0 0 0 4px rgba(244, 242, 236, 0.18); animation: sbrMarca 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }
@keyframes sbrMarca { from { left: 50% !important; opacity: 0; } to { opacity: 1; } }
.sbr-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sbr-caja { padding: 16px; border-radius: 18px; background: var(--sbr-card); border: 1px solid rgba(255, 255, 255, 0.07); }
.sbr-caja h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15.5px; color: var(--sbr-crema); }
.sbr-caja h3 .sbr-ico { color: var(--sbr-oro); }
.sbr-caja p { margin: 0 0 6px; color: var(--sbr-suave); font-size: 15px; }
.sbr-caja.estudio { border-color: var(--sbr-borde-fuerte); background: linear-gradient(180deg, rgba(232, 184, 74, 0.1), transparent 70%), var(--sbr-card); }
.sbr-conclusion { margin: 0; padding: 0 4px; font-family: var(--font-serif, Georgia, serif); font-size: 18px; line-height: 1.55; color: var(--sbr-crema); }

/* Entradas en el panel de Sinaí */
.sina-explora { display: flex; flex-direction: column; gap: 4px; }
.sina-explora-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.sina-explora-btn:hover { background: rgba(31, 58, 44, 0.08); }
.sina-explora-btn .sbr-ico { color: #A8541F; }
.sina-explora-btn small { display: block; font-size: 12px; opacity: 0.7; }

/* Resultados e historial: las mismas superficies, sin desplazar el chat. */
.sina-resultados-resumen { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 14px; flex-shrink: 0; }
.sina-resultados-resumen:empty { display: none; }
.sina-resultado-btn { flex: 1 1 120px; min-width: 0; min-height: 44px; display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: baseline; border: 1px solid currentColor; border-radius: 12px; padding: 8px 10px; background: transparent; color: inherit; font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: transform 140ms cubic-bezier(.23,1,.32,1); }
.sina-resultado-btn small { flex-basis: 100%; opacity: .7; overflow-wrap: anywhere; }
.sina-resultado-btn:active { transform: scale(.98); }
.sina-resultado-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.sbr-historial { min-width: 0; }
.sbr-historial select { max-width: 100%; width: 100%; min-height: 44px; padding: 8px; border: 1px solid var(--sbr-borde-fuerte); border-radius: 10px; background: var(--sbr-card); color: var(--sbr-crema); font: inherit; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .sina-resultado-btn { transition: none; } .sina-resultado-btn:active { transform: none; } }

/* ── Móvil ── */
@media (max-width: 760px) {
  .sbr { font-size: 15.5px; gap: 14px; }
  .sbr-partes, .sbr-mundos, .sbr-filas, .sbr-dos { grid-template-columns: 1fr; }
  .sbr-res-hex { grid-template-columns: 1fr; padding: 14px; }
  .sbr-dims li { grid-template-columns: 26px 100px 1fr 30px; }
  .sbr-pasos li { justify-content: center; padding: 8px 6px; }
  .sbr-pasos li:not(.actual) .sbr-paso-txt { display: none; }
  .sbr-preg { font-size: 17px; }
  .sbr-item { padding: 14px 12px; }
  .sbr-escala5 { gap: 5px; }
  .sbr-op { min-height: 60px; font-size: 12px; padding: 6px 2px; border-radius: 12px; }
  .sbr-bola { width: 44px; height: 44px; }
  .sbr-bola.b1::before, .sbr-bola.b7::before { width: 36px; height: 36px; }
  .sbr-bola.b2::before, .sbr-bola.b6::before { width: 29px; height: 29px; }
  .sbr-bola.b3::before, .sbr-bola.b5::before { width: 23px; height: 23px; }
  .sbr-bola.b4::before { width: 17px; height: 17px; }
  .sbr-nav { gap: 8px; }
  .sbr-nav .sbr-btn.pri { flex: 1 1 100%; order: -1; }
  .sbr-nav .sbr-btn.ter { margin-left: 0; }
  .sbr-acciones .sbr-btn { flex: 1 1 100%; }
  .sbr-codigo b { width: 62px; height: 62px; font-size: 36px; }
  .sbr-carrera-cab { gap: 10px; }
  .sbr-carrera h3 { font-size: 19px; }
  .sbr-afin { width: 54px; height: 54px; }
  .sbr-esp-fila { grid-template-columns: 1fr; gap: 6px; }
  .sbr-esp-fila .pa, .sbr-esp-fila .pb { text-align: center; }
  .sbr-modo .sinai-genie-character-wrapper { flex-basis: 52px; max-width: 52px; }
  .sbr-modo .sinai-genie-character-img { width: 52px; max-height: 68px; }
  .sbr-modo .sinai-emergence-speech-text { font-size: 15.5px; }
  .sbr-modo .sinai-emergence-main-row { flex-direction: row; }
  .sinai-emergence-stage.sbr-modo { padding-top: 52px; }
  .sbr-pasos li.actual { flex: 2.4; }
}
@media (prefers-reduced-motion: reduce) {
  .sbr-entra, .sbr-codigo span, .sbr-carrera, .sbr-hito-sello, .sbr-tipo, .sbr-radar.animado .forma, .sbr-dim-b i, .sbr-esp-barra i, .sbr-aguja .gira, .sbr-revelando > .sbr-ico { animation: none !important; }
  .sbr-barra i { transition: none; }
}