/* KairSun Web — mock 1:1 de la pantalla SANTUARIO (escena viva + Mi Santuario + Crónica).
 * Evidencia y mapa 1:1: docs/screens/52_santuario.md.
 * Reglas: sin JS, sin estilos inline, sin !important, sin fuentes externas.
 * Unidad: --u = 1dp de la app (393dp de ancho). Todo el interior del teléfono
 * se mide en calc(N * var(--u)). */

body[data-screen="sanctuary"] .screen-wrap { max-width: 1180px; }

.sanct-view { display: grid; gap: 22px; justify-items: stretch; }
.sanct-view .ks-view__tabs { justify-self: center; }
.sanct-view .ks-view__panes { width: 100%; }
.sanct-view svg { fill: currentColor; }

.sanct-face-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 28px;
  align-items: start;
}

.phone-block { margin: 0; display: grid; gap: 10px; justify-items: center; }
.phone-block .phone { width: min(100%, min(380px, 92vw)); }
.phone-block .phone__caption { max-width: min(380px, 92vw); }

.sanct-view :focus-visible { outline: 2px solid var(--ks-gold); outline-offset: 2px; }
.sanct-btn { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.sanct-btn:focus-visible { outline: 2px solid var(--ks-gold); outline-offset: 2px; }

.sc-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.sc-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ── Escena viva ─────────────────────────────────────────────────────────── */

.sc-screen { position: relative; background: #080418; }

.sc-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #080418 0%, #1A0842 16%, #7B1248 40%, #B51C1C 65%, #E84E00 100%);
}

.sc-kairos {
  position: absolute; left: 0; right: 0; top: 0; bottom: calc(462 * var(--u));
  background: linear-gradient(to top,
    rgba(255, 181, 71, 0.45) 0%,
    rgba(255, 200, 112, 0.20) 42%,
    rgba(255, 217, 160, 0) 85%);
}

.sc-forest {
  position: absolute; left: 0; right: 0; bottom: calc(462 * var(--u));
  height: calc(84 * var(--u));
}
.sc-forest__svg { width: 100%; height: 100%; display: block; }
.sc-sil { fill: currentColor; }
.sc-sil--1 { color: #923100; }
.sc-sil--2 { color: #923100; }
.sc-sil--3 { color: #A23600; }
.sc-sil--4 { color: #A23600; }

.sc-halo {
  position: absolute; left: calc(207 * var(--u)); top: calc(179 * var(--u));
  width: calc(184 * var(--u)); height: calc(184 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(123, 0, 0, 0.32) 35%,
    rgba(123, 0, 0, 0.13) 70%,
    rgba(123, 0, 0, 0) 100%);
}

.sc-sun {
  position: absolute; left: calc(217 * var(--u)); top: calc(189 * var(--u));
  width: calc(163 * var(--u)); height: calc(163 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(123, 0, 0, 0.28) 0%,
    rgba(123, 0, 0, 0.10) 30%,
    rgba(123, 0, 0, 0) 70%);
}
.sc-sun i {
  position: absolute; left: 50%; top: 50%;
  width: calc(51 * var(--u)); height: calc(51 * var(--u));
  margin: calc(-25.5 * var(--u)) 0 0 calc(-25.5 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFFFFF 0%, rgba(255, 255, 255, 0.96) 8%, #D32F2F 45%, #7B0000 100%);
  box-shadow:
    0 0 calc(33 * var(--u)) calc(7 * var(--u)) rgba(123, 0, 0, 0.75),
    0 0 calc(66 * var(--u)) calc(9 * var(--u)) rgba(211, 47, 47, 0.30);
}

.sc-horizon {
  position: absolute; left: 0; right: 0; bottom: calc(453 * var(--u));
  height: calc(168 * var(--u));
  background: linear-gradient(to top,
    rgba(191, 54, 12, 0.48) 0%,
    rgba(191, 54, 12, 0.14) 45%,
    rgba(191, 54, 12, 0) 100%);
}

.sc-terrain {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: calc(503 * var(--u));
  object-fit: cover; object-position: top center;
}

.sc-tree {
  position: absolute; bottom: calc(352 * var(--u)); left: 50%;
  translate: -50% 0;
  height: calc(308 * var(--u)); width: auto;
}

.sc-beam {
  position: absolute; left: calc(298.6 * var(--u)); top: calc(270.6 * var(--u));
  width: calc(102 * var(--u)); height: calc(90 * var(--u));
  margin-top: calc(-45 * var(--u));
  transform-origin: 0 50%;
  transform: rotate(185.6deg);
  background: linear-gradient(to right, rgba(255, 215, 64, 0.30), rgba(255, 215, 64, 0) 85%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.sc-clouds { position: absolute; inset: 0; }
.sc-cloud {
  position: absolute;
  height: calc(12 * var(--u));
  border-radius: 999px;
  background: rgba(255, 241, 224, 0.82);
  box-shadow: 0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(176, 190, 197, 0.16);
  animation: sc-drift 30s ease-in-out infinite alternate;
}
.sc-cloud::before, .sc-cloud::after {
  content: ""; position: absolute; border-radius: 50%; background: inherit;
}
.sc-cloud::before { width: 56%; height: 190%; left: 12%; bottom: 45%; }
.sc-cloud::after { width: 40%; height: 150%; right: 14%; bottom: 40%; }
.sc-cloud--1 { left: 6%; top: 5%; width: 26%; animation-duration: 26s; }
.sc-cloud--2 { left: 38%; top: 13%; width: 34%; animation-duration: 34s; animation-delay: -8s; }
.sc-cloud--3 { left: 68%; top: 6%; width: 22%; animation-duration: 29s; animation-delay: -14s; }
.sc-cloud--4 { left: 14%; top: 23%; width: 30%; animation-duration: 38s; animation-delay: -4s; }
.sc-cloud--5 { left: 52%; top: 27%; width: 24%; animation-duration: 31s; animation-delay: -20s; }
.sc-cloud--6 { left: 80%; top: 19%; width: 18%; animation-duration: 24s; animation-delay: -11s; }

@keyframes sc-drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(14 * var(--u))); }
}

.sc-bugs { position: absolute; inset: 0; }
.sc-bug { position: absolute; animation: sc-buzz 7s ease-in-out infinite; }
.sc-bug--bee1 { left: 22%; top: 46%; }
.sc-bug--bee2 { left: 66%; top: 37%; animation-delay: -2.5s; }
.sc-bug--moth { left: 44%; top: 55%; animation-delay: -5s; }
.sc-bug--bee1::before, .sc-bug--bee2::before {
  content: ""; display: block;
  width: calc(9 * var(--u)); height: calc(6 * var(--u));
  border-radius: 50%;
  background: #FFD700;
  box-shadow: inset calc(-2 * var(--u)) 0 0 rgba(0, 0, 0, 0.45);
}
.sc-bug--bee1::after, .sc-bug--bee2::after {
  content: ""; position: absolute; left: 12%; top: calc(-4 * var(--u));
  width: calc(7 * var(--u)); height: calc(4.5 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
}
.sc-bug--moth::before, .sc-bug--moth::after {
  content: ""; position: absolute; top: 0;
  width: calc(6 * var(--u)); height: calc(5 * var(--u));
  border-radius: 50%;
  background: rgba(184, 95, 216, 0.9);
}
.sc-bug--moth::before { left: calc(-6 * var(--u)); }
.sc-bug--moth::after { left: calc(2 * var(--u)); }

@keyframes sc-buzz {
  0% { transform: translate(0, 0) rotate(-8deg); }
  50% { transform: translate(calc(7 * var(--u)), calc(-5 * var(--u))) rotate(10deg); }
  100% { transform: translate(0, 0) rotate(-8deg); }
}

.sc-house {
  position: absolute; left: calc(34 * var(--u)); bottom: calc(330 * var(--u));
  width: calc(112 * var(--u)); height: auto;
}

.sc-bowl {
  position: absolute; left: calc(256 * var(--u)); bottom: calc(178 * var(--u));
  width: calc(78 * var(--u));
}
.sc-bowl__dish { display: block; width: 100%; height: auto; }
.sc-bowl__water {
  position: absolute; left: 10.28%; top: 11.76%; width: 79.44%; height: 31.93%;
  transform-origin: bottom center;
  transform: scaleX(0.905) scaleY(0.62);
}
.sc-bowl__water img { display: block; width: 100%; height: 100%; }

.sc-ball {
  position: absolute; left: calc(222 * var(--u)); bottom: calc(168 * var(--u));
  width: calc(28 * var(--u)); height: auto;
  filter: drop-shadow(0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35));
}

.sc-pet-shadow {
  position: absolute; left: 50%; bottom: calc(172 * var(--u));
  translate: -50% 0;
  width: calc(72 * var(--u)); height: calc(12 * var(--u));
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 70%);
}

.sc-pet {
  position: absolute; left: 50%; bottom: calc(176 * var(--u));
  translate: -50% 0;
  height: calc(98 * var(--u)); width: auto;
}

.sc-bubble {
  position: absolute; left: 50%; bottom: calc(292 * var(--u));
  translate: -50% 0;
  max-width: calc(244 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  border-radius: calc(18 * var(--u));
  background: linear-gradient(135deg, #1D2029, #1A2430);
  border: 1px solid rgba(45, 212, 191, 0.22);
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.18);
  color: #F8FAFC;
  font-size: calc(15 * var(--u)); font-weight: 600; line-height: 1.3;
}
.sc-bubble p { margin: 0; }
.sc-bubble__tail {
  position: absolute; left: 50%; bottom: calc(-11 * var(--u));
  translate: -50% 0;
  width: calc(16 * var(--u)); height: calc(12 * var(--u));
  background: #1A2430;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.sc-hud {
  position: absolute; top: calc(72 * var(--u)); right: calc(15.7 * var(--u));
  width: calc(112 * var(--u));
  border-radius: calc(28 * var(--u));
  background: rgba(255, 255, 255, 0.35);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  -webkit-backdrop-filter: blur(calc(28 * var(--u)));
  backdrop-filter: blur(calc(28 * var(--u)));
  overflow: hidden;
  color: #1C1C1E;
}
.sc-hud__toggle {
  display: flex; align-items: center; justify-content: center;
  width: calc(48 * var(--u)); height: calc(48 * var(--u));
  margin-left: auto;
  color: #1C1C1E;
}
.sc-hud__toggle svg { width: calc(23 * var(--u)); height: calc(23 * var(--u)); }
.sc-hud__rule {
  display: block;
  height: 1px; width: calc(56 * var(--u));
  margin-right: calc(12 * var(--u));
  background: rgba(28, 28, 30, 0.14);
}
.sc-hud__row {
  display: flex; align-items: center; justify-content: flex-end;
  gap: calc(8 * var(--u));
  height: calc(44 * var(--u));
  padding: 0 calc(12 * var(--u));
  font-size: calc(15 * var(--u)); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sc-hud__row img { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.sc-hud__pad { display: block; height: calc(4 * var(--u)); }

.sc-rain {
  position: absolute; top: calc(72 * var(--u)); left: calc(15.7 * var(--u));
  display: flex; align-items: center; gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(18 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));
  border-radius: 999px;
  background: rgba(20, 22, 28, 0.42);
  border: 1.5px solid rgba(79, 195, 247, 0.55);
  box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(79, 195, 247, 0.22);
  color: #F8FAFC;
}
.sc-rain svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: #4FC3F7; flex: none; }
.sc-rain b { display: block; font-size: calc(14 * var(--u)); font-weight: 700; }
.sc-rain small { display: block; font-size: calc(11 * var(--u)); font-weight: 500; opacity: 0.65; }

/* ── Mi Santuario (hoja) ─────────────────────────────────────────────────── */

.sc-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }

.sc-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(653 * var(--u));
  display: flex; flex-direction: column;
  border-radius: calc(32 * var(--u)) calc(32 * var(--u)) 0 0;
  background: rgba(20, 22, 28, 0.80);
  -webkit-backdrop-filter: blur(calc(28 * var(--u)));
  backdrop-filter: blur(calc(28 * var(--u)));
  border-top: 1.5px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 calc(-20 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.45);
  color: #F8FAFC;
}
.sc-sheet__grip {
  width: calc(40 * var(--u)); height: calc(4 * var(--u));
  margin: calc(8 * var(--u)) auto 0;
  border-radius: 999px;
  background: rgba(139, 152, 178, 0.45);
}
.sc-sheet__head {
  display: flex; align-items: center;
  height: calc(48 * var(--u));
  padding: 0 calc(8 * var(--u)) 0 calc(20 * var(--u));
}
.sc-sheet__head h3 { margin: 0; flex: 1; font-size: calc(18 * var(--u)); font-weight: 700; }
.sc-sheet__close {
  display: flex; align-items: center; justify-content: center;
  width: calc(48 * var(--u)); height: calc(48 * var(--u));
  color: #8B98B2;
}
.sc-sheet__close svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.sc-sheet__body { flex: 1; padding: 0 calc(20 * var(--u)) calc(20 * var(--u)); }

.sc-hero {
  position: relative;
  height: calc(228 * var(--u));
  border-radius: calc(28 * var(--u));
  background: radial-gradient(ellipse at 50% 66%, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0) 70%);
  overflow: hidden;
}
.sc-hero__tree {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(196 * var(--u)); width: auto; margin: 0 auto;
}
.sc-hero__pet {
  position: absolute; right: 0; bottom: 0;
  height: calc(96 * var(--u)); width: auto;
}

.sc-vital { margin-top: calc(20 * var(--u)); }
.sc-vital__name { margin: 0; font-size: calc(15 * var(--u)); font-weight: 700; }
.sc-vital__row { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u)); }
.sc-vital__stage { font-size: calc(12 * var(--u)); color: #CBD5E1; }
.sc-chip {
  display: inline-flex; align-items: center; gap: calc(4 * var(--u));
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: 999px;
  font-size: calc(10 * var(--u)); font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sc-chip--ready { color: #22C55E; background: rgba(34, 197, 94, 0.14); border: 1px solid rgba(34, 197, 94, 0.45); }
.sc-chip--ready svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.sc-rail { display: flex; gap: calc(4 * var(--u)); height: calc(8 * var(--u)); margin-top: calc(8 * var(--u)); }
.sc-rail__seg { flex: 1; border-radius: 999px; background: rgba(34, 197, 94, 0.16); overflow: hidden; }
.sc-rail__seg i { display: block; height: 100%; width: 0; background: #22C55E; }
.sc-rail__seg--f i { width: 100%; }
.sc-rail__seg--p69 i { width: 69%; }
.sc-rail__seg--p9 i { width: 9%; }
.sc-rail--pet .sc-rail__seg { background: rgba(245, 158, 11, 0.16); }
.sc-rail--pet .sc-rail__seg i { background: #F59E0B; }
.sc-vital__gap { margin: calc(8 * var(--u)) 0 0; font-size: calc(12 * var(--u)); color: #CBD5E1; font-variant-numeric: tabular-nums; }

.sc-bond { position: relative; margin-top: calc(20 * var(--u)); }
.sc-bond__head { padding-right: calc(40 * var(--u)); }
.sc-bond__title { margin: 0; font-size: calc(15 * var(--u)); font-weight: 700; }
.sc-bond__hearts { display: flex; align-items: center; gap: calc(4 * var(--u)); margin-top: calc(8 * var(--u)); }
.sc-bond__level { margin-left: calc(4 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 800; color: #E8527A; }
.sc-heart { position: relative; width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.sc-heart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-heart--empty { color: rgba(248, 250, 252, 0.18); }
.sc-heart--full { color: #E8527A; }
.sc-heart__fill { position: absolute; left: 0; right: 0; bottom: 0; height: 20%; overflow: hidden; color: #E8527A; }
.sc-heart__fill svg { position: absolute; left: 0; right: auto; bottom: 0; top: auto; width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.sc-bond__next { margin: calc(8 * var(--u)) 0 0; font-size: calc(12 * var(--u)); color: rgba(248, 250, 252, 0.72); line-height: 1.35; }
.sc-bond__today { margin: calc(4 * var(--u)) 0 0; font-size: calc(12 * var(--u)); color: rgba(248, 250, 252, 0.6); }
.sc-bond__pencil {
  position: absolute; top: calc(-12 * var(--u)); right: calc(-2 * var(--u));
  display: flex; align-items: center; justify-content: center;
  width: calc(40 * var(--u)); height: calc(40 * var(--u));
  border-radius: 50%;
  color: rgba(248, 250, 252, 0.7);
}
.sc-bond__pencil svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

.sc-sheet__foot {
  margin: calc(20 * var(--u)) 0 0;
  text-align: center;
  font-size: calc(12 * var(--u)); color: #8B98B2;
  font-variant-numeric: tabular-nums;
}

/* ── Crónica ─────────────────────────────────────────────────────────────── */

.sc-chron { position: relative; background: #0A0C10; color: #F8FAFC; }
.sc-chron__glow {
  position: absolute; top: calc(-160 * var(--u)); left: calc(-80 * var(--u)); right: calc(-80 * var(--u));
  height: calc(340 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.10), rgba(255, 215, 0, 0) 70%);
}
.sc-back {
  position: absolute; top: calc(67 * var(--u)); left: calc(8 * var(--u)); z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: calc(48 * var(--u)); height: calc(48 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #F8FAFC;
}
.sc-back svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }

.sc-chron__stage {
  position: absolute; top: calc(59 * var(--u)); left: 0; right: 0;
  height: calc(176 * var(--u));
  overflow: hidden;
}
.sc-chron__stage--p3 { background: linear-gradient(180deg, #2E475F 0%, #151F29 70%, #0A0C10 100%); }
.sc-chron__stage--p5 { background: linear-gradient(180deg, #5D422D 0%, #241D19 70%, #0A0C10 100%); }
.sc-chron__stage--p7 { background: linear-gradient(180deg, #5B4B1C 0%, #2A220E 70%, #0A0C10 100%); }
.sc-chron__tree {
  position: absolute; left: 50%; bottom: calc(4 * var(--u));
  translate: -50% 0;
  height: calc(132 * var(--u)); width: auto;
  transform-origin: bottom center;
}
.sc-chron__tree--p3 { transform: scale(0.886); }
.sc-chron__tree--p5 { transform: scale(0.943); }
.sc-chron__tree--p7 { transform: scale(1); }

.sc-chron--p5 .sc-chron__counter { color: #ECBC94; }
.sc-chron--p5 .sc-secondary__line svg { color: #E59A5C; }
.sc-chron--p5 .sc-memory { border-color: rgba(229, 154, 92, 0.45); box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(229, 154, 92, 0.16); }
.sc-chron--p5 .sc-memory__ico { background: rgba(229, 154, 92, 0.22); color: #E59A5C; }

.sc-chron__scroll {
  position: absolute; top: calc(235 * var(--u)); left: 0; right: 0; bottom: 0;
  padding: 0 calc(20 * var(--u)) calc(56 * var(--u));
}
.sc-chron__counter {
  margin: calc(8 * var(--u)) 0 0;
  font-size: calc(11 * var(--u)); font-weight: 600; letter-spacing: 0.14em;
  color: #A1C5EA; font-variant-numeric: tabular-nums;
}
.sc-chron__name { margin: calc(2 * var(--u)) 0 0; font-size: calc(22 * var(--u)); font-weight: 700; line-height: 1.15; }
.sc-chron__dates { margin: calc(2 * var(--u)) 0 0; font-size: calc(12 * var(--u)); color: #CBD5E1; font-variant-numeric: tabular-nums; }

.sc-memory {
  margin-top: calc(14 * var(--u));
  padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  border-radius: calc(24 * var(--u));
  background: rgba(20, 22, 28, 0.86);
  border: 1px solid rgba(106, 168, 224, 0.45);
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(106, 168, 224, 0.16);
}
.sc-memory__head { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.sc-memory__ico {
  display: flex; align-items: center; justify-content: center;
  width: calc(32 * var(--u)); height: calc(32 * var(--u));
  border-radius: 50%;
  background: rgba(106, 168, 224, 0.22);
  color: #6AA8E0; flex: none;
}
.sc-memory__ico svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.sc-memory__intro { margin: 0; font-size: calc(12 * var(--u)); color: #CBD5E1; font-variant-numeric: tabular-nums; }
.sc-memory__quote {
  margin: calc(12 * var(--u)) 0 0;
  font-size: calc(22 * var(--u)); font-weight: 500; font-style: italic; line-height: 1.3;
}
.sc-memory__caption { margin: calc(8 * var(--u)) 0 0; font-size: calc(12 * var(--u)); color: #8B98B2; }

.sc-secondary { margin-top: calc(10 * var(--u)); }
.sc-secondary__line { display: flex; align-items: flex-start; gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); }
.sc-secondary__line svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #6AA8E0; flex: none; }
.sc-secondary__line p { margin: 0; font-size: calc(15 * var(--u)); line-height: 1.4; }

.sc-chips { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-top: calc(16 * var(--u)); }
.sc-chips span {
  padding: calc(5 * var(--u)) calc(10 * var(--u));
  border-radius: 999px;
  background: rgba(139, 152, 178, 0.10);
  color: #CBD5E1;
  font-size: calc(11 * var(--u)); font-weight: 600; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.sc-entries {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  width: 100%; min-height: calc(48 * var(--u));
  margin-top: calc(12 * var(--u));
  color: #F8FAFC; text-align: left;
}
.sc-entries svg:first-child { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #FFD700; }
.sc-entries b { flex: 1; font-size: calc(15 * var(--u)); font-weight: 700; }
.sc-entries svg:last-child { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: #FFD700; }

.sc-petcard {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(12 * var(--u));
  border-radius: calc(18 * var(--u));
  background: #1D2029;
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.sc-petcard__ico {
  display: flex; align-items: center; justify-content: center;
  width: calc(44 * var(--u)); height: calc(44 * var(--u));
  border-radius: 50%;
  background: rgba(139, 152, 178, 0.14);
  color: rgba(139, 152, 178, 0.7); flex: none;
}
.sc-petcard__ico svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.sc-petcard__title { margin: 0; font-size: calc(12 * var(--u)); color: #CBD5E1; }
.sc-petcard__value { margin: calc(2 * var(--u)) 0 0; font-size: calc(15 * var(--u)); font-weight: 700; }
.sc-petcard__body { margin: calc(2 * var(--u)) 0 0; font-size: calc(12 * var(--u)); color: #8B98B2; }

.sc-statrow { display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(48 * var(--u)); }
.sc-statrow svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: #FFD700; flex: none; }
.sc-statrow b { flex: 1; font-size: calc(15 * var(--u)); font-weight: 700; }
.sc-statrow span { font-size: calc(15 * var(--u)); font-variant-numeric: tabular-nums; }
.sc-statrow span.is-muted { color: #8B98B2; }

.sc-module {
  display: flex; align-items: center; gap: calc(12 * var(--u));
  min-height: calc(56 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  margin-bottom: calc(8 * var(--u));
  border-radius: calc(18 * var(--u));
  background: #1D2029;
  border: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%; text-align: left;
}
.sc-module svg:first-child { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: #FFD700; flex: none; }
.sc-module__txt { flex: 1; min-width: 0; }
.sc-module__txt b { display: block; font-size: calc(15 * var(--u)); font-weight: 700; }
.sc-module__txt small { display: block; margin-top: calc(2 * var(--u)); font-size: calc(12 * var(--u)); color: #CBD5E1; font-variant-numeric: tabular-nums; }
.sc-module svg:last-child { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: #FFD700; flex: none; }

.sc-analysis {
  margin-top: calc(20 * var(--u));
  padding: calc(14 * var(--u));
  border-radius: calc(20 * var(--u));
  background: #14161C;
  border: 1px solid rgba(255, 215, 0, 0.28);
}
.sc-analysis__head { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.sc-analysis__head svg:first-child { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: #FFD700; }
.sc-analysis__head h3 { margin: 0; flex: 1; font-size: calc(18 * var(--u)); font-weight: 700; }
.sc-analysis__head svg:last-child { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #8B98B2; }
.sc-analysis__body { margin: calc(6 * var(--u)) 0 0; font-size: calc(12 * var(--u)); color: #CBD5E1; line-height: 1.45; }
.sc-analysis__cta {
  display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u));
  width: 100%; min-height: calc(48 * var(--u));
  margin-top: calc(12 * var(--u));
  border-radius: calc(16 * var(--u));
  border: 1.5px solid rgba(255, 215, 0, 0.55);
  color: #FFD700; font-size: calc(14 * var(--u)); font-weight: 800;
}
.sc-analysis__cta svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }

.sc-rates { margin-top: calc(8 * var(--u)); }
.sc-rates__row { display: flex; align-items: flex-start; padding: calc(4 * var(--u)) 0; font-variant-numeric: tabular-nums; }
.sc-rates__row--head { color: #8B98B2; font-size: calc(11 * var(--u)); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.sc-rates__label { flex: 4; font-size: calc(12 * var(--u)); color: #CBD5E1; }
.sc-rates__this, .sc-rates__other { flex: 3; text-align: right; font-size: calc(12 * var(--u)); }
.sc-rates__row--head .sc-rates__label,
.sc-rates__row--head .sc-rates__this,
.sc-rates__row--head .sc-rates__other { color: #8B98B2; font-size: calc(11 * var(--u)); }

.sc-dots {
  position: absolute; left: 0; right: 0; bottom: calc(16 * var(--u));
  display: flex; justify-content: center; gap: calc(6 * var(--u));
  pointer-events: none;
}
.sc-dots i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: calc(3 * var(--u)); background: rgba(139, 152, 178, 0.4); }
.sc-dots i.is-on { width: calc(16 * var(--u)); background: #FFD700; }

/* ── Cosecha (recap) ─────────────────────────────────────────────────────── */

.sc-recap { position: relative; background: #030418; color: #F8FAFC; }
.sc-recap__cosmos {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 215, 0, 0.16), rgba(255, 215, 0, 0) 42%),
    radial-gradient(circle at 82% 26%, rgba(255, 215, 0, 0.10), rgba(255, 215, 0, 0) 38%),
    radial-gradient(circle at 50% 88%, rgba(93, 56, 168, 0.18), rgba(93, 56, 168, 0) 55%);
}
.sc-recap__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.55));
}
.sc-recap__sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: calc(800 * var(--u));
  border-radius: calc(28 * var(--u)) calc(28 * var(--u)) 0 0;
  background: #030418;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 calc(-18 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.55);
}
.sc-recap__grip {
  width: calc(32 * var(--u)); height: calc(4 * var(--u));
  margin: calc(12 * var(--u)) auto calc(8 * var(--u));
  border-radius: 999px;
  background: rgba(139, 152, 178, 0.4);
}
.sc-recap__body { padding: 0 calc(20 * var(--u)) calc(24 * var(--u)); }
.sc-recap__emoji { display: block; text-align: center; font-size: calc(56 * var(--u)); line-height: 1; }
.sc-recap__name { margin: calc(8 * var(--u)) 0 0; text-align: center; font-size: calc(22 * var(--u)); font-weight: 900; letter-spacing: 0.01em; }
.sc-recap__meta { margin: calc(4 * var(--u)) 0 0; text-align: center; font-size: calc(12 * var(--u)); font-weight: 600; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }
.sc-recap__reward {
  display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u));
  width: fit-content; margin: calc(12 * var(--u)) auto 0;
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  border-radius: 999px;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(255, 215, 0, 0.5);
  color: #FFD700; font-size: calc(12 * var(--u)); font-weight: 800; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.sc-recap__reward svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.sc-recap__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--u));
  margin-top: calc(20 * var(--u));
}
.sc-statcard {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  min-height: calc(64 * var(--u));
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  border-radius: calc(12 * var(--u));
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 215, 0, 0.22);
}
.sc-statcard em { font-size: calc(20 * var(--u)); font-style: normal; line-height: 1; }
.sc-statcard b { display: block; font-size: calc(9 * var(--u)); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.sc-statcard strong { display: block; font-size: calc(16 * var(--u)); font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sc-recap__note {
  margin-top: calc(24 * var(--u));
  padding: calc(16 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 215, 0, 0.25);
}
.sc-recap__note h4 { margin: 0; font-size: calc(10 * var(--u)); font-weight: 800; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.6); }
.sc-recap__note p { margin: calc(8 * var(--u)) 0 0; font-size: calc(14 * var(--u)); line-height: 1.5; }

/* ── Notes de página ─────────────────────────────────────────────────────── */

.sanct-notes-map { display: grid; gap: 10px; margin-top: 10px; }
.sanct-notes-map div { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 10px; }
.sanct-notes-map dt { color: var(--ks-text); font-weight: 700; font-size: 0.85rem; }
.sanct-notes-map dd { margin: 0; }
.sanct-notes-map code { color: var(--ks-gold-hi); }

@media (max-width: 520px) {
  .sanct-face-grid { gap: 20px; }
  .sanct-notes-map div { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-cloud, .sc-bug { animation: none; }
  .sc-scroll { scroll-behavior: auto; }
}