/* Shared Astraea colors and local Montserrat. Static backgrounds keep motion deliberate. */
@font-face {
  font-family:Montserrat;
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('./fonts/montserrat-latin.woff2') format('woff2')
}
:root {
  --space:#232266;
  --surface:#111827;
  --surface-variant:#1a2236;
  --divider:#1f2d45;
  --text:#f8fafc;
  --text-secondary:#b0bac9;
  --text-muted:#94a3b8;
  --gold:#ebb836;
  --purple:#8b7cff;
  --blue:#5fa8ff;
  --success:#aef8d3;
  --error:#ff6b6b;
  --night:var(--surface);
  --space-deep:#281e4a;
  --surface-raised:var(--surface-variant);
  --text-soft:var(--text-secondary);
  --mint:var(--success);
  --gold-soft:rgb(235 184 54 / 12%);
  --line:#27334b;
  --line-strong:rgb(176 186 201 / 28%);
  --max-width:1180px;
  --ease:cubic-bezier(.2,.7,.25,1);
  --font:Montserrat,system-ui,sans-serif;
}
* {
  box-sizing:border-box;
  margin:0;
  padding:0
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:104px;
  color-scheme:dark
}
body {
  background:var(--surface);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  cursor:pointer
}
img {
  display:block;
  max-width:100%;
  height:auto
}
svg {
  display:block
}
[hidden] {
  display:none!important
}
:where(a,button,input,select,summary,[tabindex]):focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px
}
.shell {
  width:min(calc(100% - 64px),var(--max-width));
  margin-inline:auto;
  min-width:0
}
.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:100;
  padding:14px 18px;
  background:var(--text);
  color:var(--surface);
  border-radius:12px;
  transform:translateY(-150%)
}
.skip-link:focus {
  transform:none
}
.star-field {
  display:none
}
.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:50;
  border-bottom:1px solid rgb(176 186 201 / 10%);
  background:#171c35
}
.site-header.scrolled {
  background:var(--surface)
}
.nav {
  min-height:80px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:24px
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:21px;
  font-weight:800;
  letter-spacing:-.04em;
  flex-shrink:0
}
.brand img {
  border-radius:12px
}
.nav-links {
  display:flex;
  gap:28px;
  justify-content:center;
  text-align:center;
  color:var(--text-secondary);
  font-size:14px;
  font-weight:600
}
.nav-links a {
  padding-block:14px
}
.nav-links a:hover,.footer-links a:hover {
  color:var(--gold)
}
.nav-actions {
  display:flex;
  align-items:center;
  gap:16px;
  justify-self:end
}
.language-switch,.footer-language {
  display:inline-flex;
  padding:3px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-variant)
}
.language-switch button,.footer-language button {
  min-width:42px;
  min-height:40px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--text-muted);
  font-size:12px;
  font-weight:800
}
.language-switch button.active,.footer-language button.active {
  background:var(--gold-soft);
  color:var(--gold)
}
.header-download {
  display:inline-flex;
  align-items:center;
  min-height:46px;
  padding:0 22px;
  border-radius:14px;
  background:var(--gold);
  color:var(--surface);
  font-weight:800;
  font-size:14px
}
.menu-button {
  display:none;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  background:var(--surface-variant);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--text)
}
.menu-button span {
  width:18px;
  height:2px;
  background:currentColor;
  transition:transform 160ms,opacity 160ms
}
.menu-button[aria-expanded=true] span:nth-child(1) {
  transform:translateY(7px) rotate(45deg)
}
.menu-button[aria-expanded=true] span:nth-child(2) {
  opacity:0
}
.menu-button[aria-expanded=true] span:nth-child(3) {
  transform:translateY(-7px) rotate(-45deg)
}
/* El fondo ocupa el ancho disponible. El contenido conserva su shell centrado. */
.hero {
  position:relative;
  isolation:isolate
}
.hero-inner {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:72px;
  padding-top:142px;
  padding-bottom:86px
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:radial-gradient(ellipse 72% 80% at 88% 12%,rgb(139 124 255 / 13%),transparent 76%),radial-gradient(ellipse 58% 70% at 8% 78%,rgb(95 168 255 / 8%),transparent 78%),linear-gradient(135deg,#232266,#281e4a 50%,#111827)
}
.hero::after {
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:-1px;
  z-index:-2;
  height:160px;
  background:linear-gradient(transparent,var(--surface));
  pointer-events:none
}
.hero-stars,.hero-orbits {
  position:absolute;
  inset:80px 0 0;
  z-index:-1;
  width:100%;
  height:calc(100% - 80px);
  pointer-events:none
}
.hero-stars {
  fill:var(--text)
}
.hero-orbits {
  fill:none;
  stroke:var(--purple);
  stroke-width:1;
  opacity:.14;
  overflow:hidden
}
.hero-orbits circle {
  fill:var(--blue);
  stroke:none
}
.hero-copy {
  position:relative;
  z-index:2;
  padding-bottom:30px
}
.hero-kicker {
  max-width:36ch;
  color:var(--text-secondary);
  font-size:14px;
  font-weight:600;
  line-height:1.6
}
.hero h1 {
  max-width:10.5ch;
  margin-top:22px;
  font-size:clamp(48px,4.6vw,66px);
  line-height:1.1;
  letter-spacing:-.05em;
  font-weight:800;
  overflow-wrap:normal
}
.hero-lead {
  max-width:46ch;
  margin-top:26px;
  font-size:18px;
  line-height:1.75;
  color:var(--text-secondary)
}
.hero-actions {
  margin-top:32px
}
.store-row {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}
.store-button {
  display:inline-flex;
  align-items:center;
  gap:12px;
  width:max-content;
  max-width:100%;
  min-width:min(100%,12.625rem);
  min-height:68px;
  padding:12px 18px;
  border:1px solid rgb(139 124 255 / 55%);
  border-radius:16px;
  background:#30285b;
  color:#ffffff;
  text-align:left;
  transition:background 160ms,border-color 160ms;
}
.store-button:hover {
  border-color:var(--purple);
  background:#3c3272;
}
.store-button:active {
  background:#251e49;
}
.store-icon {
  width:28px;
  height:28px;
  flex:none;
  object-fit:contain;
}
.store-text {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  line-height:1.25;
}
.store-text small {
  color:#dedbea;
  font-size:.6875rem;
  font-weight:500;
}
.store-text strong {
  color:#ffffff;
  font-size:1.0625rem;
  font-weight:700;
  letter-spacing:-.02em;
}
.lesson-link {
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin-top:18px;
  min-height:50px;
  padding:0 20px;
  border:1px solid rgb(235 184 54 / 60%);
  border-radius:16px;
  font-size:14px;
  font-weight:800;
  transition:background 160ms
}
.lesson-link:hover {
  background:var(--gold-soft)
}
.lesson-link svg {
  width:18px;
  height:18px;
  fill:var(--gold)
}
.hero-note {
  margin-top:18px;
  font-size:12px;
  line-height:1.6;
  color:var(--text-muted)
}
.hero-observation {
  position:relative;
  display:grid;
  justify-items:center;
  gap:20px;
  padding-inline:24px
}
.hero-phone {
  width:318px;
  max-width:100%;
  overflow:hidden;
  border:1px solid rgb(139 124 255 / 34%);
  border-radius:30px;
  background:var(--surface);
  box-shadow:0 24px 80px rgb(0 0 0 / 24%)
}
.screenshot-image {
  width:100%;
  height:auto
}
.preview-caption {
  max-width:100%;
  color:var(--text-muted);
  font-size:12px;
  line-height:1.6;
  text-align:center
}
.hero-satellite {
  position:absolute;
  top:8%;
  right:0;
  transform:rotate(42deg);
  pointer-events:none
}
.hero-satellite img {
  width:54px
}
/* A single interactive lesson provides the main motion moment. */
.method-section {
  padding:80px 0 104px;
  background:radial-gradient(ellipse 45% 50% at 80% 45%,rgb(95 168 255 / 6%),transparent 80%),var(--surface)
}
.method-layout {
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:80px;
  align-items:start
}
.section-heading {
  position:static
}
.section-marker {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  font-size:13px;
  font-weight:600;
  color:var(--blue);
  line-height:1.6
}
.section-marker>span:first-child {
  width:22px;
  height:2px;
  background:currentColor;
  flex-shrink:0
}
h2 {
  font-size:clamp(30px,3vw,42px);
  font-weight:800;
  line-height:1.18;
  letter-spacing:-.04em
}
h3 {
  font-size:28px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.03em
}
.section-heading>p:last-child,.concept-copy>p:not(.section-marker),.story-copy>p:not(.section-marker),.daily-copy>p:not(.section-marker),.faq-heading>p:not(.section-marker),.cta-copy>p {
  margin-top:24px;
  color:var(--text-secondary);
  font-size:17px;
  line-height:1.8;
  max-width:60ch
}
.lesson-demo {
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--surface-variant)
}
.lesson-sky {
  position:relative;
  display:grid;
  place-items:center;
  height:350px;
  overflow:hidden;
  background:radial-gradient(ellipse at 55% 55%,#242555,var(--surface) 85%)
}
.lesson-sky img {
  position:absolute;
  inset:32px 20px 40px;
  width:calc(100% - 40px);
  height:calc(100% - 72px);
  max-width:none;
  object-fit:contain
}
.sky-label {
  position:absolute;
  left:24px;
  top:22px;
  color:var(--text-secondary);
  font-size:14px;
  font-weight:600
}
.sky-hint {
  position:absolute;
  bottom:15px;
  left:22px;
  right:22px;
  color:var(--text-muted);
  font-size:11px;
  text-align:center;
  line-height:1.5
}
.lesson-question {
  padding:28px
}
.lesson-count {
  color:var(--blue);
  font-size:12px;
  font-weight:600
}
.lesson-question h3 {
  margin-top:14px;
  font-size:24px;
  line-height:1.4
}
.lesson-options {
  display:grid;
  gap:12px;
  margin-top:24px
}
.lesson-options button {
  min-height:68px;
  display:flex;
  gap:14px;
  align-items:center;
  padding:16px;
  text-align:left;
  border:1px solid #49556c;
  border-radius:16px;
  background:var(--surface);
  color:var(--text-secondary);
  transition:border-color 160ms,background 160ms
}
.lesson-options button>span {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--surface-variant);
  font-size:12px;
  font-weight:800
}
.lesson-options button strong {
  font-size:14px;
  font-weight:600;
  line-height:1.6
}
.lesson-options button:hover {
  border-color:var(--blue)
}
.lesson-options .selected.correct {
  border-color:var(--success);
  color:var(--success);
  background:#1c3437
}
.lesson-options .selected.incorrect {
  border-color:var(--gold);
  color:var(--text);
  background:#343128
}
.lesson-result {
  position:relative;
  margin-top:24px;
  padding:22px;
  border:1px solid var(--line-strong);
  border-radius:18px;
  background:var(--surface);
  animation:answer-in 260ms var(--ease)
}
.lesson-result.correct {
  border-color:rgb(174 248 211 / 45%)
}
.lesson-result strong {
  font-size:15px;
  line-height:1.6
}
.lesson-result.correct strong {
  color:var(--success)
}
.lesson-result p,.lesson-noscript {
  margin-top:12px;
  font-size:14px;
  line-height:1.8;
  color:var(--text-secondary)
}
.result-mark {
  display:inline-block;
  width:9px;
  height:9px;
  margin-right:8px;
  border-radius:50%;
  background:var(--gold)
}
.correct .result-mark {
  background:var(--success)
}
.lesson-source {
  margin-top:20px;
  font-size:12px;
  color:var(--text-muted)
}
.lesson-source a {
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:4px
}
/* Topics use a real screenshot per selection. The stage is open, with no overlay obscuring the app. */
.universe-section {
  position:relative;
  padding:112px 0;
  background:linear-gradient(var(--surface),transparent 150px),linear-gradient(135deg,#232266,#17223f 55%,#14352f)
}
.section-heading.compact {
  position:static;
  max-width:760px
}
.topic-explorer {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:100px;
  align-items:center;
  margin-top:58px
}
.topic-tabs {
  border-top:1px solid var(--line-strong)
}
.topic-tabs button {
  display:flex;
  align-items:flex-start;
  gap:20px;
  width:100%;
  padding:26px 10px;
  border:0;
  border-bottom:1px solid var(--line-strong);
  background:transparent;
  color:var(--text-secondary);
  text-align:left
}
.topic-tabs svg {
  flex-shrink:0;
  width:25px;
  height:25px;
  margin-top:3px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4
}
.topic-tabs strong {
  display:block;
  font-size:21px;
  font-weight:600;
  line-height:1.4
}
.topic-tabs small {
  display:block;
  margin-top:10px;
  font-size:14px;
  line-height:1.7;
  color:var(--text-muted)
}
.topic-tabs [aria-selected=true] {
  color:var(--gold);
  background:linear-gradient(90deg,rgb(235 184 54 / 6%),transparent);
  border-bottom-color:rgb(235 184 54 / 45%)
}
.topic-tabs [aria-selected=true] small {
  color:var(--text-secondary)
}
.topic-visual {
  position:relative;
  display:grid;
  justify-items:center;
  gap:20px;
  min-width:0;
  padding:20px;
  border-radius:30px;
  background:radial-gradient(ellipse at center,rgb(95 168 255 / 10%),transparent 70%)
}
.phone-frame,.glossary-frame,.story-frame,.daily-phone,.review-frame {
  width:310px;
  max-width:100%;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:26px;
  box-shadow:0 20px 60px rgb(0 0 0 / 18%)
}
/* Quiet text surfaces give the real lesson colors room to carry the story. */
.concepts-section {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:100px;
  align-items:center;
  padding-block:110px
}
.concept-visual,.story-visual,.review-visual {
  display:grid;
  justify-items:center;
  gap:18px;
  min-width:0
}
.concept-visual {
  position:relative;
  background:radial-gradient(ellipse,rgb(139 124 255 / 9%),transparent 70%)
}
.concept-copy ul {
  list-style:none;
  margin-top:28px
}
.concept-copy li {
  position:relative;
  padding:14px 0 14px 22px;
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.65;
  border-bottom:1px solid var(--line)
}
.concept-copy li:before {
  content:"";
  position:absolute;
  top:22px;
  left:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--blue)
}
.stories-section {
  padding:110px 0;
  background:linear-gradient(var(--surface),transparent 140px),radial-gradient(ellipse 50% 65% at 76% 50%,rgb(139 124 255 / 13%),transparent 80%),#191b35
}
.stories-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:100px;
  align-items:center
}
.story-note {
  padding-left:18px;
  border-left:2px solid var(--purple);
  font-size:14px!important
}
.daily-section {
  padding:110px 0;
  background:linear-gradient(#191b35,var(--surface) 160px)
}
.daily-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:100px;
  align-items:center
}
.daily-copy ul {
  list-style:none;
  margin-top:28px
}
.daily-copy li {
  display:grid;
  grid-template-columns:135px minmax(0,1fr);
  gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--line)
}
.daily-copy li span {
  font-size:14px;
  font-weight:600;
  color:var(--gold)
}
.daily-copy li small {
  font-size:14px;
  line-height:1.65;
  color:var(--text-secondary)
}
.daily-visual {
  position:relative;
  display:grid;
  justify-items:center;
  gap:24px;
  padding-bottom:20px;
  min-width:0
}
.widget-frame {
  width:min(100%,440px);
  margin-top:-115px;
  z-index:1;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:24px;
  background:var(--surface);
  box-shadow:0 16px 45px rgb(0 0 0 / 30%)
}
.widget-frame img {
  width:100%;
  height:auto
}
/* Preview collection art remains explicitly provisional until the app release is ready. */
.next-section {
  padding-block:100px;
  background:linear-gradient(var(--surface),transparent 180px),radial-gradient(ellipse 65% 30% at 26% 30%,rgb(139 124 255 / 10%),transparent 85%),#191b35
}
.next-heading {
  max-width:750px;
  margin-bottom:60px
}
.release-badge {
  display:inline-flex;
  padding:9px 14px;
  margin-bottom:24px;
  border:1px solid rgb(139 124 255 / 40%);
  border-radius:12px;
  font-size:12px;
  line-height:1.5;
  font-weight:600;
  color:#c5bdff;
  background:rgb(139 124 255 / 7%)
}
.next-heading p {
  margin-top:24px;
  max-width:56ch;
  color:var(--text-secondary);
  font-size:17px;
  line-height:1.8
}
.collection-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:100px;
  align-items:center;
  padding-block:20px 90px
}
.collection-object {
  display:grid;
  justify-items:center;
  position:relative
}
.compass-stage {
  overflow:clip;
  min-width:0;
  padding-block:16px;
  width:100%;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse,rgb(235 184 54 / 6%),transparent 68%)
}
.compass-stage img {
  width:340px;
  max-width:100%;
  transition:transform 520ms var(--ease)
}
.compass-stage img.turned {
  transform:rotate(22deg)
}
.object-turn {
  min-height:46px;
  padding:8px 16px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:var(--surface-variant);
  color:var(--text);
  font-size:13px;
  font-weight:600
}
.object-turn svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:var(--gold);
  stroke-width:1.6
}
.art-note {
  margin-top:15px;
  font-size:12px;
  color:var(--text-muted);
  text-align:center;
  line-height:1.6
}
.collection-copy>p,.observatory-copy>p {
  margin-top:22px;
  color:var(--text-secondary);
  font-size:17px;
  line-height:1.8
}
.feature-note {
  color:var(--text-muted)!important;
  font-size:13px!important
}
.observatory-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:100px;
  align-items:center;
  padding-top:80px;
  border-top:1px solid var(--line-strong)
}
.review-benefits {
  list-style:none;
  margin-top:28px
}
.review-benefits li {
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
  line-height:1.8;
  color:var(--text-secondary)
}
.review-benefits li:first-child {
  color:var(--success)
}
.faq-section {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:90px;
  align-items:start;
  padding-block:110px
}
.faq-heading {
  position:sticky;
  top:126px
}
.faq-list {
  border-top:1px solid var(--line-strong)
}
.faq-item {
  border-bottom:1px solid var(--line-strong)
}
.faq-item summary {
  position:relative;
  min-height:82px;
  padding:25px 38px 25px 0;
  list-style:none;
  cursor:pointer;
  font-size:16px;
  font-weight:600;
  line-height:1.6
}
.faq-item summary::-webkit-details-marker {
  display:none
}
.faq-item summary::after {
  content:"+";
  position:absolute;
  right:4px;
  top:24px;
  color:var(--gold);
  font-size:24px;
  font-weight:400
}
.faq-item[open] summary::after {
  content:"−"
}
.faq-item p {
  padding:0 30px 28px 0;
  color:var(--text-secondary);
  font-size:15px;
  line-height:1.8
}
.final-cta {
  background:linear-gradient(var(--surface),transparent 130px),radial-gradient(ellipse 50% 80% at 18% 40%,rgb(235 184 54 / 7%),transparent 75%),linear-gradient(135deg,#30285a,#173d3a 58%,#111827)
}
.cta-layout {
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center;
  gap:80px;
  padding-block:100px
}
.cta-rocket {
  width:62px;
  margin-left:12px;
  margin-bottom:22px;
  transform:rotate(42deg)
}
.cta-note {
  margin-top:20px;
  font-size:13px;
  line-height:1.6;
  color:var(--text-muted)
}
.site-footer {
  background:var(--surface)
}
.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding-block:52px
}
.footer-brand p {
  margin-top:16px;
  font-size:13px;
  line-height:1.7;
  color:var(--text-secondary)
}
.footer-end {
  display:grid;
  justify-items:end;
  gap:24px;
  max-width:60%
}
.footer-links {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:16px 24px;
  color:var(--text-secondary);
  font-size:13px;
  line-height:1.6
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding-block:24px;
  border-top:1px solid var(--line);
  font-size:12px;
  line-height:1.8;
  color:var(--text-muted)
}
.mobile-download {
  display:none
}
.store-guidance {
  display:flex;
  gap:16px;
  align-items:center;
  margin-top:20px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface-variant);
  font-size:13px;
  color:var(--text-secondary);
  line-height:1.7
}
.store-guidance span {
  flex:1
}
.store-guidance button {
  flex-shrink:0;
  min-height:44px;
  padding-inline:12px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:transparent;
  color:var(--text);
  font-size:12px;
  font-weight:600
}
.browser-help {
  position:fixed;
  bottom:max(20px,env(safe-area-inset-bottom));
  right:20px;
  z-index:70;
  max-width:460px;
  width:calc(100% - 40px);
  padding:22px;
  border:1px solid var(--line-strong);
  border-radius:20px;
  background:var(--surface);
  box-shadow:0 14px 42px rgb(0 0 0 / 35%)
}
.browser-help strong {
  font-size:16px
}
.browser-help p {
  margin-top:12px;
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.7
}
.browser-help-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px
}
.copy-store-link,.close-browser-help {
  min-height:44px;
  padding:10px 16px;
  border:0;
  border-radius:12px;
  background:var(--gold);
  color:var(--surface);
  font-size:13px;
  font-weight:800
}
.close-browser-help {
  min-width:44px;
  background:var(--surface-variant);
  color:var(--text);
  font-size:20px
}
.screenshot-placeholder {
  aspect-ratio:402/874;
  display:grid;
  place-items:center;
  padding:24px;
  color:var(--text-secondary);
  font-size:14px;
  text-align:center;
  background:var(--surface-variant)
}
@keyframes answer-in {
  from {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:none
  }
}
@media(max-width:1244px) {
  .hero-inner {
    gap:40px
  }
  .topic-explorer,.concepts-section,.stories-layout,.daily-layout,.collection-layout,.observatory-layout {
    gap:60px
  }
  .method-layout {
    gap:50px
  }
}
@media(max-width:1000px) {
  .nav {
    gap:22px
  }
  .nav-links {
    gap:18px;
    font-size:13px
  }
  .header-download {
    padding-inline:16px
  }
  .nav-actions {
    gap:10px
  }
  .hero h1 {
    font-size:52px
  }
  .hero-phone {
    width:294px
  }
  .hero-satellite {
    right:-8px
  }
  .method-layout {
    grid-template-columns:minmax(0,1fr);
    gap:40px
  }
  .section-heading {
    position:static;
    max-width:720px
  }
  .lesson-demo {
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)
  }
  .lesson-sky {
    height:100%;
    min-height:480px
  }
  .sky-hint {
    font-size:11px
  }
  .lesson-question h3 {
    font-size:22px
  }
  .hero-lead {
    font-size:17px
  }
  .faq-section {
    gap:50px
  }
}
@media(max-width:820px) {
  .nav {
    grid-template-columns:minmax(0,1fr) auto;
    min-height:72px
  }
  .nav-links {
    position:fixed;
    inset:72px 0 auto;
    display:none;
    flex-direction:column;
    gap:0;
    padding:20px 32px 28px;
    background:var(--surface);
    border-bottom:1px solid var(--line-strong);
    max-height:calc(100dvh - 72px);
    overflow:auto
  }
  .nav-links.open {
    display:flex
  }
  .nav-links a {
    padding-block:18px;
    border-bottom:1px solid var(--line);
    font-size:16px
  }
  .menu-button {
    display:flex
  }
  .header-download {
    display:none
  }
  .hero-inner {
    gap:20px;
    padding-top:124px;
    padding-bottom:74px
  }
  .hero h1 {
    font-size:clamp(38px,6vw,50px)
  }
  .hero-lead {
    font-size:16px
  }
  .hero-observation {
    padding-inline:10px
  }
  .hero-phone {
    width:260px;
    border-radius:24px
  }
  .hero-satellite {
    display:none
  }
  .hero-kicker {
    font-size:12px
  }
  .store-row {
    gap:10px
  }
  .hero .store-row {
    display:grid;
    grid-template-columns:minmax(0,1fr)
  }
  .preview-caption {
    font-size:11px
  }
  .topic-explorer,.concepts-section,.stories-layout,.daily-layout,.collection-layout,.observatory-layout {
    gap:40px
  }
  .topic-tabs strong {
    font-size:18px
  }
  .topic-tabs button {
    gap:14px;
    padding-inline:0
  }
  .topic-tabs small {
    font-size:13px
  }
  .topic-visual {
    padding:0
  }
  .phone-frame,.glossary-frame,.story-frame,.daily-phone,.review-frame {
    width:280px
  }
  .faq-section {
    grid-template-columns:minmax(0,1fr);
    gap:36px
  }
  .faq-heading {
    position:static;
    max-width:680px
  }
  .cta-layout {
    grid-template-columns:minmax(0,1fr);
    gap:32px
  }
  .cta-copy {
    max-width:650px
  }
  .daily-copy li {
    grid-template-columns:minmax(0,1fr);
    gap:8px
  }
  .footer-inner {
    align-items:flex-start
  }
  .footer-end {
    max-width:54%
  }
}
@media(max-width:640px) {
  .shell {
    width:calc(100% - 40px)
  }
  .nav {
    min-height:68px;
    gap:10px
  }
  .brand {
    font-size:18px;
    gap:8px
  }
  .brand img {
    width:34px;
    height:34px;
    border-radius:10px
  }
  .nav-actions {
    gap:10px
  }
  .language-switch {
    padding:2px
  }
  .language-switch button {
    min-width:34px;
    min-height:38px
  }
  .menu-button {
    width:42px;
    height:44px
  }
  .nav-links {
    top:68px;
    padding-inline:20px
  }
  .hero-inner {
    grid-template-columns:minmax(0,1fr);
    gap:36px;
    padding-top:108px;
    padding-bottom:52px
  }
  .hero::after {
    height:120px
  }
  .hero-copy {
    padding:0
  }
  .hero h1 {
    font-size:clamp(36px,9.8vw,44px);
    max-width:12ch;
    margin-top:18px;
    line-height:1.12
  }
  .hero-kicker {
    font-size:13px;
    max-width:none
  }
  .hero-lead {
    margin-top:22px;
    font-size:17px;
    line-height:1.7
  }
  .hero-actions {
    margin-top:26px
  }
  .hero .store-row,.store-row {
    display:flex;
    gap:10px
  }
  .store-row .store-button {
    width:100%;
    min-width:0;
    flex:1 1 12.625rem;
  }
  .hero-note {
    font-size:11px
  }
  .lesson-link {
    font-size:13px;
    min-height:48px
  }
  .hero-observation {
    padding:0;
    gap:16px
  }
  .hero-phone {
    width:min(80vw,310px);
    border-radius:26px
  }
  .hero-stars {
    height:700px;
    opacity:.7
  }
  .hero-orbits {
    height:850px
  }
  .hero-orbits ellipse:nth-child(2) {
    display:none
  }
  h2 {
    font-size:30px;
    line-height:1.2
  }
  h3 {
    font-size:25px
  }
  .method-section,.universe-section,.stories-section,.daily-section,.next-section {
    padding-block:72px
  }
  .concepts-section,.faq-section {
    padding-block:72px
  }
  .section-marker {
    font-size:12px;
    margin-bottom:18px
  }
  .section-heading>p:last-child,.concept-copy>p:not(.section-marker),.story-copy>p:not(.section-marker),.daily-copy>p:not(.section-marker),.faq-heading>p:not(.section-marker),.cta-copy>p,.next-heading p,.collection-copy>p,.observatory-copy>p {
    font-size:16px;
    line-height:1.8;
    margin-top:20px
  }
  .method-layout {
    gap:30px
  }
  .lesson-demo {
    display:block
  }
  .lesson-sky {
    height:290px;
    min-height:0
  }
  .lesson-question {
    padding:24px 20px
  }
  .lesson-question h3 {
    font-size:22px
  }
  .lesson-options button {
    padding:14px;
    gap:12px
  }
  .lesson-options button strong {
    font-size:13px
  }
  .lesson-result {
    padding:18px
  }
  .lesson-result strong {
    font-size:14px
  }
  .lesson-result p {
    font-size:13px
  }
  .lesson-source {
    font-size:11px
  }
  .topic-explorer,.concepts-section,.stories-layout,.daily-layout,.collection-layout,.observatory-layout {
    grid-template-columns:minmax(0,1fr);
    gap:34px
  }
  .topic-explorer {
    margin-top:32px
  }
  .topic-tabs button {
    padding:20px 6px;
    gap:14px
  }
  .topic-tabs strong {
    font-size:18px
  }
  .topic-tabs small {
    font-size:13px;
    margin-top:8px
  }
  .topic-tabs svg {
    width:23px;
    height:23px
  }
  .topic-visual {
    padding-top:10px;
    gap:16px
  }
  .phone-frame,.glossary-frame,.story-frame,.daily-phone,.review-frame {
    width:min(80vw,310px)
  }
  .concept-copy {
    order:-1
  }
  .concept-copy li {
    font-size:13px
  }
  .story-note {
    font-size:13px!important
  }
  .daily-copy li {
    grid-template-columns:120px minmax(0,1fr);
    gap:12px
  }
  .daily-copy li span,.daily-copy li small {
    font-size:13px
  }
  .daily-visual {
    margin-top:8px
  }
  .widget-frame {
    max-width:100%;
    margin-top:-96px;
    border-radius:20px
  }
  .next-heading {
    margin-bottom:32px
  }
  .release-badge {
    font-size:11px;
    margin-bottom:20px
  }
  .collection-layout {
    padding-block:0 48px
  }
  .collection-copy {
    order:-1
  }
  .compass-stage img {
    width:min(100%,310px)
  }
  .observatory-layout {
    padding-top:48px
  }
  .review-benefits li {
    font-size:13px
  }
  .feature-note {
    font-size:12px!important
  }
  .faq-item summary {
    font-size:15px;
    min-height:78px
  }
  .faq-item p {
    font-size:14px;
    padding-right:12px
  }
  .cta-layout {
    padding-block:72px;
    gap:28px
  }
  .cta-copy h2 {
    max-width:16ch
  }
  .cta-rocket {
    width:56px
  }
  .cta-note {
    font-size:12px
  }
  .footer-inner {
    flex-direction:column;
    padding-block:40px;
    gap:30px
  }
  .footer-end {
    max-width:none;
    justify-items:start
  }
  .footer-links {
    justify-content:flex-start;
    font-size:13px;
    gap:14px 20px
  }
  .footer-brand p {
    font-size:12px
  }
  .footer-bottom {
    flex-direction:column;
    gap:8px;
    font-size:11px;
    padding-bottom:36px
  }
  .mobile-download {
    position:fixed;
    left:12px;
    right:12px;
    bottom:max(12px,env(safe-area-inset-bottom));
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px;
    border:1px solid var(--line-strong);
    border-radius:20px;
    background:var(--surface);
    box-shadow:0 12px 36px rgb(0 0 0 / 30%);
    transform:translateY(calc(100% + 40px));
    visibility:hidden;
    transition:transform 220ms var(--ease),visibility 220ms
  }
  .mobile-download.visible {
    transform:none;
    visibility:visible
  }
  .mobile-download>div {
    display:flex;
    align-items:center;
    gap:10px
  }
  .mobile-download img {
    border-radius:10px
  }
  .mobile-download span {
    display:grid;
    gap:4px
  }
  .mobile-download strong {
    font-size:13px
  }
  .mobile-download small {
    font-size:10px;
    color:var(--text-secondary)
  }
  .mobile-download>a {
    min-height:44px;
    display:flex;
    align-items:center;
    padding:0 16px;
    background:var(--gold);
    color:var(--surface);
    border-radius:12px;
    font-size:12px;
    font-weight:800
  }
  .store-guidance {
    display:block;
    font-size:12px
  }
  .store-guidance button {
    margin-top:12px
  }
  .browser-help {
    bottom:max(14px,env(safe-area-inset-bottom));
    padding:18px
  }
}
@media(max-width:360px) {
  .shell {
    width:calc(100% - 32px)
  }
  .brand {
    font-size:16px
  }
  .nav-actions {
    gap:8px
  }
  .brand img {
    width:30px;
    height:30px
  }
  .language-switch button {
    min-width:30px
  }
  .hero h1 {
    font-size:36px
  }
  .daily-copy li {
    grid-template-columns:minmax(0,1fr);
    gap:8px
  }
  .mobile-download small {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
}
.screenshot-open {
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  border-radius:inherit;
  cursor:zoom-in;
  color:var(--text)
}
.screenshot-open:focus-visible {
  outline-offset:-4px
}
.zoom-indicator {
  position:absolute;
  right:10px;
  bottom:10px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid var(--line-strong);
  border-radius:10px;
  background:var(--surface);
  opacity:0;
  transition:opacity 150ms
}
.zoom-indicator svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:var(--text);
  stroke-width:1.5
}
.screenshot-open:hover .zoom-indicator,.screenshot-open:focus-visible .zoom-indicator {
  opacity:1
}
.screenshot-viewer {
  position:fixed;
  inset:0;
  width:min(600px,calc(100% - 24px));
  max-height:90dvh;
  margin:auto;
  padding:0;
  overflow:auto;
  border:1px solid var(--line-strong);
  border-radius:22px;
  background:var(--surface);
  color:var(--text)
}
.screenshot-viewer::backdrop {
  background:rgb(5 9 20 / 88%)
}
.viewer-header {
  position:sticky;
  top:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 20px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  font-size:14px;
  font-weight:600
}
.viewer-header button {
  min-height:44px;
  padding:8px 16px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:var(--surface-variant);
  color:var(--text);
  font-size:13px
}
.screenshot-viewer>img {
  width:100%;
  height:auto
}
.collection-gallery {
  margin-top:24px;
  border-top:1px solid var(--line-strong)
}
.collection-gallery summary {
  padding-block:18px;
  color:var(--blue);
  font-size:14px;
  cursor:pointer
}
.gallery-frame {
  width:min(100%,310px);
  margin-top:8px;
  border:1px solid var(--line-strong);
  border-radius:24px;
  overflow:hidden
}
.no-script-language {
  display:flex;
  justify-content:center;
  gap:32px;
  padding:24px;
  color:var(--blue);
  font-size:14px
}

/* Los mínimos intrínsecos no deben ensanchar columnas en idiomas o tamaños distintos. */
.shell > *, .collection-layout > *, .observatory-layout > * {
  min-width:0;
}
.premium-label {
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:8px 13px;
  margin-bottom:18px;
  border:1px solid rgb(139 124 255 / 35%);
  border-radius:999px;
  background:rgb(139 124 255 / 9%);
  color:#c4baff;
  font-size:13px;
  font-weight:700;
  line-height:1.5;
}
.review-visual {
  display:grid;
  justify-items:center;
  gap:16px;
}

@media(max-width:360px) {
  .hero .store-row, .store-row {
    gap:8px;
  }
}

/* Astraea 1.5: the existing cosmic palette, with clear release and product facts. */
.update-link{display:flex;flex-wrap:wrap;gap:5px 16px;align-items:center;max-width:100%;width:fit-content;margin-top:24px;padding:12px 0;color:var(--text-secondary);font-size:12px;line-height:1.6}
.update-link strong{color:var(--gold);font-size:14px}.update-link:hover strong{text-decoration:underline;text-underline-offset:4px}
.release-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding-block:0 44px;margin-bottom:44px;border-bottom:1px solid var(--line-strong)}
.release-facts dt{font-size:clamp(30px,4vw,44px);font-weight:800;color:var(--text);line-height:1.2}.release-facts dd{margin-top:9px;color:var(--text-secondary);font-size:13px;line-height:1.6}
.new-regions{margin-bottom:76px}.new-regions h3,.rocket-showcase h3{font-size:clamp(25px,3vw,34px);line-height:1.25;letter-spacing:-.025em}
.region-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 64px;margin-top:30px}.region-grid article{min-width:0;padding-bottom:24px;border-bottom:1px solid var(--divider)}
.region-grid h4{font-size:18px;line-height:1.45;color:var(--blue)}.region-grid article:nth-child(2) h4{color:var(--gold)}.region-grid article:nth-child(3) h4{color:var(--purple)}.region-grid article:nth-child(4) h4{color:var(--success)}
.region-grid p,.rocket-showcase p,.premium-extras{margin-top:12px;font-size:15px;line-height:1.8;color:var(--text-secondary);max-width:65ch}
.rocket-showcase{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center;margin-bottom:90px}.rocket-showcase>*{min-width:0}
.rocket-lineup{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}.rocket-lineup figure{min-width:0;text-align:center}.rocket-lineup img{width:100%;aspect-ratio:1;object-fit:contain}
.rocket-lineup figcaption{font-size:11px;line-height:1.5;color:var(--text-secondary);overflow-wrap:anywhere}.rocket-lineup small{display:block;margin-top:5px;color:var(--purple);font-weight:600;font-size:10px}
.footer-language a{display:inline-flex;align-items:center;min-height:44px;padding:10px;font-size:12px;color:var(--text-secondary)}.footer-language a:hover{color:var(--text)}
@media(max-width:900px){.rocket-showcase{grid-template-columns:minmax(0,1fr);gap:28px}.rocket-lineup{max-width:660px;margin-inline:auto;width:100%}.region-grid{gap:28px}}
@media(max-width:540px){.release-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-bottom:30px;margin-bottom:32px}.region-grid{grid-template-columns:minmax(0,1fr);gap:24px}.new-regions{margin-bottom:54px}.rocket-showcase{margin-bottom:64px}.rocket-lineup{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}.rocket-lineup img{max-width:150px;margin-inline:auto}.rocket-lineup figcaption{font-size:12px}.update-link{display:grid;gap:2px}}