/* Yo en el Planeta · Sistema solar */
.yp .yp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.yp-solar.yp-hero { background: #04060c; padding-bottom: 0; }
.yp-solar .yp-nav { padding-bottom: 14px; }
.ss-stage { position: relative; height: min(84svh, 860px); min-height: 520px; overflow: hidden; background: radial-gradient(70% 60% at 50% 45%, #0b1430 0%, #04060c 70%); touch-action: none; }
.ss-stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; outline: none; cursor: grab; }
.ss-stage canvas:active { cursor: grabbing; }
.ss-labels { position: absolute; inset: 0; pointer-events: none; }
.ss-label[hidden] { display: none; }
.ss-label { position: absolute; left: 0; top: 0; pointer-events: auto; padding: 3px 9px; border: 0; border-radius: 999px; background: rgba(8, 12, 24, .55); color: rgba(255,255,255,.88); font: 600 12.5px/1.3 var(--yp-body); letter-spacing: .02em; cursor: pointer; white-space: nowrap; backdrop-filter: blur(4px); }
.ss-label:hover, .ss-label.is-sel { background: var(--yp-sun); color: #221a0c; }
.ss-label.is-earth { color: #BFE0FF; }
.ss-label.is-earth.is-sel, .ss-label.is-earth:hover { color: #221a0c; }

.ss-head { position: absolute; left: max(20px, calc(50% - 580px)); top: 18px; z-index: 2; max-width: 430px; pointer-events: none; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.ss-head a { pointer-events: auto; }
.yp .ss-head h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.05; margin-top: 6px; max-width: 460px; }
.ss-head h1 em { font-style: italic; color: var(--yp-sun); }
.ss-date { margin-top: 10px !important; display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(232,194,122,.16); border: 1px solid rgba(232,194,122,.45); color: var(--yp-sun); font-weight: 700; font-size: 14.5px; text-shadow: none; }
.ss-hint { margin-top: 10px !important; font-size: 14.5px; color: rgba(255,255,255,.75); }

.ss-ctrl { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border-radius: 18px; background: rgba(8, 12, 24, .72); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); max-width: calc(100% - 24px); }
.ss-btn { height: 38px; padding: 0 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.06); color: #fff; font: 600 14px/1 var(--yp-body); cursor: pointer; white-space: nowrap; }
.ss-btn:hover { background: rgba(255,255,255,.14); }
.ss-btn:disabled { opacity: .45; cursor: default; }
.ss-play { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; background: var(--yp-sun); color: #221a0c; border-color: var(--yp-sun); }
.ss-play:hover { background: #f1d08f; }
.ss-play svg { width: 20px; height: 20px; }
.ss-play .i-pause, .ss-play.is-play .i-play { display: none; }
.ss-play.is-play .i-pause { display: block; }
.ss-sel select, .ss-sel input { height: 38px; padding: 0 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.06); color: #fff; font: 600 14px var(--yp-body); color-scheme: dark; }
.ss-sel select option { color: #111; }
.ss-sep { width: 1px; height: 26px; background: rgba(255,255,255,.18); }
.ss-ghost { border-color: transparent; background: transparent; color: rgba(255,255,255,.85); }
.ss-note { position: absolute; right: 18px; top: 18px; z-index: 2; max-width: 260px; font-size: 12.5px; color: rgba(255,255,255,.55); text-align: right; }

.ss-info { padding-block: 0; }
.ss-info:has(.ss-card:not([hidden])) { padding-block: 20px 28px; }
.ss-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4px 32px; padding: 22px 24px 24px; border-radius: 20px; background: rgba(250, 247, 238, .98); color: var(--yp-ink); box-shadow: 0 24px 60px -30px rgba(0,0,0,.8); scroll-margin-bottom: 16px; }
.ss-card[hidden] { display: none; }
.ss-card .ss-type, .ss-card h2, .ss-card .ss-fact, .ss-card .ss-more { grid-column: 1; }
.ss-card dl { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
.ss-tip { position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 4; margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(232,194,122,.95); color: #221a0c; font-weight: 700; font-size: 14px; white-space: nowrap; box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
.ss-tip[hidden] { display: none; }
.ss-card h2 { font-size: 30px; margin: 2px 0 10px; }
.ss-type { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--yp-muted); }
.ss-type i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.ss-card dl { margin: 0; display: grid; }
.ss-card dl div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 8px 0; border-top: 1px solid var(--yp-paper-2); font-size: 14.5px; }
.ss-card dt { color: var(--yp-muted); }
.ss-card dd { margin: 0; font-weight: 700; text-align: right; }
.ss-card dl div.live dd { color: var(--yp-forest); }
.ss-fact { margin-top: 12px !important; padding: 12px 14px; border-radius: 14px; background: #EDE7D4; font-size: 15px; }
.ss-more { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--yp-forest) !important; }
.ss-x { position: absolute; right: 10px; top: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 26px; line-height: 1; color: var(--yp-muted); cursor: pointer; }
.ss-x:hover { background: var(--yp-paper-2); }
.ss-fallback[hidden] { display: none !important; }
.ss-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: rgba(255,255,255,.85); font-size: 17px; }
.ss-no3d .ss-ctrl, .ss-no3d .ss-note, .ss-no3d .ss-hint { display: none; }

/* Lista de planetas */
.ss-list { padding-block: 56px 20px; }
.ss-list h2, .ss-earth h2, .ss-cta h2 { font-size: clamp(28px, 3.6vw, 42px); }
.ss-list > p { margin-top: 8px; color: var(--yp-muted); max-width: 40rem; }
.ss-chips { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 46%), 1fr)); gap: 10px; }
.ss-chip { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 10px; align-items: center; text-align: left; padding: 12px 14px; border: 1.5px solid var(--yp-paper-2); border-radius: 14px; background: #FBF8EF; color: var(--yp-ink); cursor: pointer; font: inherit; }
.ss-chip:hover, .ss-chip[aria-pressed="true"] { border-color: var(--yp-leaf); background: #fff; }
.ss-chip i { grid-row: span 2; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.ss-chip b { font-size: 16px; }
.ss-chip small { font-size: 13px; color: var(--yp-muted); }

/* Por qué la Tierra es única */
.ss-earth { padding-block: 56px 64px; }
.ss-kicker { font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--yp-leaf); margin-bottom: 8px !important; }
.ss-lead { margin-top: 12px !important; font-size: 18.5px; max-width: 46rem; color: var(--yp-ink); }
.ss-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ss-grid article { position: relative; padding: 22px 22px 20px; border-radius: 18px; background: #FBF8EF; border: 1px solid var(--yp-paper-2); }
.ss-grid h3 { margin: 10px 0 6px; font-family: var(--yp-display); font-weight: 600; font-size: 21px; line-height: 1.15; }
.ss-grid p { font-size: 15.5px; color: #3c4a3f; }
.ss-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--yp-forest); color: var(--yp-sprout); font-weight: 700; }
.ss-trio { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 20px; overflow: hidden; color: #fff; }
.ss-trio > div { padding: 22px; display: grid; gap: 4px; }
.ss-trio b { font-family: var(--yp-display); font-size: 22px; font-weight: 600; }
.ss-trio span { font-size: 34px; font-weight: 700; line-height: 1; }
.ss-trio p { font-size: 14.5px; opacity: .9; }
.ss-t-venus { background: linear-gradient(135deg, #B8741E, #7C3F12); }
.ss-t-tierra { background: linear-gradient(135deg, #2F6FB3, #1F4D36); }
.ss-t-marte { background: linear-gradient(135deg, #9E3A16, #4C1F12); }
.ss-lesson { margin-top: 18px !important; font-size: 16.5px; max-width: 48rem; color: var(--yp-ink); }

/* Llamado final */
.ss-cta { background: var(--yp-soil); color: #fff; }
.ss-cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-block: 44px; }
.ss-cta p { margin-top: 8px !important; color: rgba(255,255,255,.8); }
.ss-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ss-adwrap { padding-block: 26px; }

@media (max-width: 900px) {
  .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-note { display: none; }
}
@media (max-width: 700px) {
  .ss-stage { height: 82svh; min-height: 560px; }
  .ss-head { left: 16px; right: 16px; top: 10px; max-width: none; }
  .ss-hint { display: none; }
  .ss-ctrl { bottom: 10px; gap: 6px; padding: 6px; border-radius: 16px; width: calc(100% - 20px); }
  .ss-btn { height: 34px; padding: 0 11px; font-size: 13px; }
  .ss-sel select, .ss-sel input { height: 34px; font-size: 13px; padding: 0 8px; }
  .ss-datewrap, .ss-sep, #ss-inner { display: none; }
  .ss-card { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 20px; }
  .ss-card dl { grid-column: 1; grid-row: auto; }
  .ss-tip { bottom: 100px; font-size: 13px; white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 32px); }
  .ss-card h2 { font-size: 26px; }
  .ss-grid, .ss-trio { grid-template-columns: minmax(0, 1fr); }
  .ss-list, .ss-earth { padding-block: 40px 28px; }
}

/* Alejar */
.ss-out { background: var(--yp-sun); color: #221a0c; border-color: var(--yp-sun); font-weight: 700; }
.ss-out:hover { background: #f1d08f; }
.ss-out[hidden] { display: none; }
.is-zoom .ss-note { display: none; }
.ss-pesorow { grid-column: 1; margin-top: 10px !important; font-size: 15px; }
.ss-pesorow b { color: var(--yp-forest); font-size: 17px; }
.ss-pesorow a { margin-left: 4px; font-weight: 700; color: var(--yp-leaf) !important; }
.ss-back-all { grid-column: 1; justify-self: start; margin-top: 14px; padding: 10px 16px; border: 1.5px solid var(--yp-forest); border-radius: 999px; background: transparent; color: var(--yp-forest); font: 700 14.5px var(--yp-body); cursor: pointer; }
.ss-back-all:hover { background: var(--yp-forest); color: #fff; }

/* Menú: el enlace de inicio */
.yp .yp-links .yp-nav-home { display: inline-flex; align-items: center; gap: 7px; }
.yp .yp-links .yp-nav-home svg { width: 17px; height: 17px; }
.yp-menu[open] .yp-links .yp-nav-home { justify-content: center; }
@media (min-width: 1081px) { .yp-solar-page .yp-links, .yp-hero-legal .yp-links { gap: 20px; } .yp-solar-page .yp .yp-links a, .yp-solar-page .yp-links a { font-size: 15px; } }
[id] { scroll-margin-top: 16px; }

/* Tu peso en cada mundo */
.ss-peso { padding-block: 40px 24px; }
.ss-peso-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.ss-peso-head > div { max-width: 40rem; }
.ss-peso-head h2 { font-size: clamp(28px, 3.6vw, 42px); }
.ss-peso-head p:not(.ss-kicker) { margin-top: 8px !important; color: var(--yp-muted); }
.ss-peso-in { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--yp-muted); }
.ss-peso-box { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border: 2px solid var(--yp-forest); border-radius: 16px; background: #fff; }
.ss-peso-box input { width: 120px; height: 48px; padding: 0 12px; border: 0; background: transparent; font: 700 26px var(--yp-body); color: var(--yp-ink); outline: none; }
.ss-peso-box b { font-size: 18px; color: var(--yp-forest); }
.ss-peso-ej { margin-top: 14px !important; font-size: 14px; color: var(--yp-muted); font-style: italic; }
.ss-peso-ej[hidden] { display: none; }
.ss-peso-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 46%), 1fr)); gap: 10px; }
.ss-pw { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 14px 16px; border-radius: 14px; background: #FBF8EF; border: 1px solid var(--yp-paper-2); }
.ss-pw i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.ss-pw span { font-size: 14.5px; color: var(--yp-muted); }
.ss-pw b { grid-column: 2; font-family: var(--yp-display); font-size: 24px; font-weight: 600; line-height: 1.1; }
.ss-pw.is-earth { background: var(--yp-forest); border-color: var(--yp-forest); }
.ss-pw.is-earth span { color: var(--yp-sprout); }
.ss-pw.is-earth b { color: #fff; }
.ss-peso-nota { margin-top: 14px !important; font-size: 14.5px; color: var(--yp-muted); max-width: 48rem; }

/* Conocelo a fondo */
.ss-learn { padding-block: 48px 24px; background: #FBF8EF; border-block: 1px solid var(--yp-paper-2); }
.ss-learn h2 { font-size: clamp(28px, 3.6vw, 42px); }
.ss-topic { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding-block: 30px; border-top: 1px solid var(--yp-paper-2); max-width: 900px; }
.ss-learn h2 + .ss-topic { margin-top: 18px; }
.ss-topic-n { font-family: var(--yp-display); font-size: 40px; font-weight: 600; line-height: 1; color: var(--yp-leaf); }
.ss-topic h3 { margin: 0 0 10px; font-family: var(--yp-display); font-weight: 600; font-size: 26px; line-height: 1.15; }
.ss-topic p { font-size: 16.5px; color: var(--yp-ink); }
.ss-topic p + p, .ss-topic .ss-fam + p { margin-top: 12px !important; }
.ss-facts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ss-facts li { padding: 14px 16px; border-radius: 14px; background: var(--yp-soil); color: #fff; display: grid; gap: 4px; }
.ss-facts b { font-family: var(--yp-display); font-size: 20px; font-weight: 600; color: var(--yp-sun); }
.ss-facts span { font-size: 14px; color: rgba(255,255,255,.82); }
.ss-fam { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ss-fam > div { padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--yp-paper-2); }
.ss-fam h4 { margin: 0; font-size: 17px; font-weight: 700; }
.ss-fam .ss-fam-who { margin: 2px 0 8px !important; font-size: 13.5px; font-weight: 600; color: var(--yp-leaf); }
.ss-fam p { font-size: 15px; }
@media (max-width: 700px) {
  .ss-peso, .ss-learn { padding-block: 36px 20px; }
  .ss-peso-in, .ss-peso-box { width: 100%; }
  .ss-peso-box input { flex: 1; width: auto; }
  .ss-topic { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-block: 24px; }
  .ss-topic-n { font-size: 30px; }
  .ss-facts, .ss-fam { grid-template-columns: minmax(0, 1fr); }
  .ss-pw b { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .ss-label { backdrop-filter: none; } }