/* Elara — elara.eblas.link
   Paleta tomada del logo (azul órbita) sobre un cielo claro de madrugada. */
:root {
  --cielo: #eef3f9;      /* fondo */
  --cielo-2: #dfe8f3;    /* superficies */
  --tinta: #13213a;      /* texto */
  --tinta-suave: #4a5a73;
  --orbita: #72a3d8;     /* azul del logo */
  --profundo: #2c5a8f;   /* acciones, enlaces (contraste AA sobre --cielo) */
  --arena: #d9c7a6;      /* Júpiter, solo en la ilustración */
  --radio: 14px;
  --ancho: 68rem;
  --serif: "Young Serif", Georgia, serif;
  --sans: "Atkinson Hyperlegible", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cielo);
  color: var(--tinta);
  font: 1.0625rem/1.6 var(--sans);
}
img, svg { display: block; max-width: 100%; }
a { color: var(--profundo); text-underline-offset: .18em; }
a:hover { color: var(--tinta); }
:focus-visible { outline: 3px solid var(--profundo); outline-offset: 3px; border-radius: 4px; }

.envoltura { width: min(var(--ancho), 100% - 2.5rem); margin-inline: auto; }

/* Cabecera */
.cabecera { padding-block: 1.25rem; }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca { display: flex; align-items: center; gap: .6rem; color: var(--tinta); text-decoration: none; font: 1.35rem/1 var(--serif); }
.marca img { width: 2.1rem; height: 2.1rem; }
.cabecera nav { display: flex; gap: 1.25rem; font-size: .975rem; }
.cabecera nav a { color: var(--tinta-suave); text-decoration: none; }
.cabecera nav a:hover { color: var(--tinta); text-decoration: underline; }

/* Portada */
.portada { padding-block: clamp(2rem, 6vw, 5rem) clamp(3rem, 8vw, 6.5rem); }
.portada .envoltura { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.portada h1 {
  font: 400 clamp(2.6rem, 6.2vw, 4.6rem)/1.04 var(--serif);
  letter-spacing: -.015em;
  margin: 0 0 1.25rem;
  max-width: 13ch;
}
.portada .bajada { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--tinta-suave); max-width: 34rem; margin: 0 0 2rem; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
.boton {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--tinta); color: #fff; text-decoration: none;
  padding: .95rem 1.4rem; border-radius: 999px; font-weight: 700; font-size: 1.05rem;
}
.boton:hover { background: var(--profundo); color: #fff; }
.boton svg { width: 1.2rem; height: 1.2rem; }
.boton[aria-disabled="true"] { background: var(--cielo-2); color: var(--tinta-suave); pointer-events: none; }
.requisitos { font-size: .95rem; color: var(--tinta-suave); margin: 0; }

/* Ilustración de órbita */
.orbita { position: relative; aspect-ratio: 1; width: min(100%, 30rem); margin-inline: auto; }
.orbita svg { width: 100%; height: 100%; overflow: visible; }
.luna { transform-origin: 250px 250px; animation: girar 18s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .luna { animation: none; } }

/* Secciones */
section.bloque { padding-block: clamp(3rem, 7vw, 5.5rem); }
section.bloque + section.bloque { border-top: 1px solid var(--cielo-2); }
.bloque h2 { font: 400 clamp(1.9rem, 3.6vw, 2.6rem)/1.15 var(--serif); margin: 0 0 1rem; max-width: 22ch; }
.bloque .intro { color: var(--tinta-suave); max-width: 38rem; margin: 0 0 2.5rem; font-size: 1.1rem; }

.capacidades { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 3.5rem; margin: 0; padding: 0; list-style: none; }
.capacidades li { display: grid; grid-template-columns: 2.75rem 1fr; gap: 1rem; align-items: start; }
.capacidades svg { width: 2.75rem; height: 2.75rem; }
.capacidades h3 { margin: .2rem 0 .3rem; font-size: 1.15rem; }
.capacidades p { margin: 0; color: var(--tinta-suave); max-width: 32rem; }

/* Dónde quedan tus datos: tres anillos concéntricos */
.datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.anillo { border-radius: var(--radio); padding: 1.6rem 1.5rem 1.5rem; }
.anillo h3 { font: 400 1.35rem/1.2 var(--serif); margin: 0 0 .9rem; }
.anillo ul { margin: 0; padding-left: 1.1rem; }
.anillo li + li { margin-top: .35rem; }
.anillo.dentro { background: var(--tinta); color: #eaf1f9; }
.anillo.dentro h3 { color: #fff; }
.anillo.pides { background: #fff; box-shadow: inset 0 0 0 2px var(--orbita); }
.anillo.nunca { background: transparent; box-shadow: inset 0 0 0 2px var(--cielo-2); }
.anillo.nunca li::marker { content: "✕  "; color: var(--tinta-suave); }

/* Pasos de instalación: sí son una secuencia */
.pasos { counter-reset: paso; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.pasos li { counter-increment: paso; position: relative; padding-top: 3.4rem; }
.pasos li::before {
  content: counter(paso);
  position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--orbita); color: var(--profundo);
  font: 1.15rem/1 var(--serif);
}
.pasos h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.pasos p { margin: 0; color: var(--tinta-suave); }

/* Pie */
.pie { padding-block: 2.5rem 3rem; border-top: 1px solid var(--cielo-2); font-size: .95rem; color: var(--tinta-suave); }
.pie .envoltura { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.pie p { margin: 0; }

/* Página de texto legal */
.legal { padding-block: 2rem 5rem; }
.legal .envoltura { max-width: 44rem; }
.legal h1 { font: 400 clamp(2rem, 4.5vw, 2.8rem)/1.15 var(--serif); margin: 0 0 .5rem; }
.legal h2 { font: 400 1.4rem/1.3 var(--serif); margin: 2.5rem 0 .6rem; }
.legal .fecha { color: var(--tinta-suave); margin: 0 0 2rem; }
.legal li + li { margin-top: .3rem; }

@media (max-width: 56rem) {
  .portada .envoltura { grid-template-columns: 1fr; }
  .orbita { width: min(100%, 22rem); order: -1; }
  .datos, .pasos { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .capacidades { grid-template-columns: 1fr; }
  .cabecera nav a.opcional { display: none; }
}