/* creatyk.com · /terminos, /privacidad (and /en/terms, /en/privacy) and the 404 pages. Follows the
   landing-page-design skill: named text styles in the markup (no font sizes or weights here),
   spacing, radius and background tokens only, flat surfaces, motion on transform and opacity with
   the base curve. Owner: the descargar/legal agent. */

/* ── "coming soon": where to look meanwhile, and the logo on a flat card ──────────────────── */
.soon__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--spacing-700); align-items: start; }
.soon__title { color: var(--ink); text-wrap: balance; }
.soon__rows { margin: var(--spacing-300) 0 0; padding: 0; list-style: none; display: grid; gap: var(--spacing-100); }
.soon__row { padding: var(--spacing-300); border-radius: var(--radius-16); background: var(--bg-1); border: 1px solid var(--line); }
.soon__row-title { color: var(--ink); text-wrap: balance; }
.soon__row-text { margin-top: var(--spacing-75); color: var(--ink-2); text-wrap: pretty; }
.soon__row-text a { color: var(--accent-text); border-radius: var(--radius-4); }
.soon__row-link { margin-top: var(--spacing-100); }
.soon__actions { margin-top: var(--spacing-400); }
.soon__card { position: sticky; top: calc(var(--nav-offset) + var(--spacing-400)); margin: 0; aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: var(--spacing-400); border-radius: var(--radius-24); background: var(--bg-1); border: 1px solid var(--line); }
.soon__mark { display: block; }
.soon__logo { display: block; width: 128px; height: 128px; }
.soon__when { display: flex; gap: var(--spacing-75); align-items: center; padding: var(--spacing-75) var(--spacing-200); border-radius: var(--radius-full); background: var(--bg-3); color: var(--ink); }
.soon__when .icon { width: 16px; height: 16px; color: var(--accent-text); }
@media (prefers-reduced-motion: no-preference) {
  .soon__mark { animation: ck-drift 6000ms var(--ease) infinite alternate; }
}

/* ── the 404: the logo drifting on its orbit ───────────────────────────────────────────────── */
.lost { position: relative; overflow: clip; display: grid; align-items: center; min-height: 100svh; padding: calc(var(--nav-offset) + var(--spacing-700)) 0 var(--spacing-900); text-align: center; }
.lost__content { position: relative; display: grid; justify-items: center; }
.lost__orbit { position: relative; width: 240px; height: 160px; display: grid; place-items: center; perspective: 600px; }
.lost__ring { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border: 1px solid var(--line-2); border-radius: var(--radius-full); transform: rotateX(68deg) rotateZ(-12deg); }
.lost__sat { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) rotate(var(--sat, 210deg)); }
.lost__sat::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: var(--radius-full); background: var(--accent-text); }
.lost__float { position: relative; display: block; }
.lost__logo { display: block; width: 112px; height: 112px; }
.lost__code { margin-top: var(--spacing-300); padding: var(--spacing-50) var(--spacing-100); border-radius: var(--radius-full); background: var(--bg-3); color: var(--accent-text); letter-spacing: 0.08em; text-transform: uppercase; }
.lost__title { margin-top: var(--spacing-300); max-width: var(--measure); color: var(--ink); text-wrap: balance; }
.lost__lead { margin-top: var(--spacing-300); max-width: 46ch; color: var(--ink-2); text-wrap: pretty; }
.lost__asked { margin-top: var(--spacing-200); max-width: 100%; color: var(--ink-3); overflow-wrap: anywhere; }
.lost__asked code { padding: var(--spacing-25) var(--spacing-75); border-radius: var(--radius-4); background: var(--bg-2); color: var(--ink); font-family: var(--mono); }
.lost__suggest { margin-top: var(--spacing-75); color: var(--ink); }
.lost__suggest a { color: var(--accent-text); border-radius: var(--radius-4); }
.lost__actions { margin-top: var(--spacing-400); }
.lost__nav { margin-top: var(--spacing-500); display: grid; justify-items: center; gap: var(--spacing-100); }
.lost__nav-title { color: var(--ink-2); }
.lost__nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-75); }
.lost__nav a {
  display: inline-grid; place-items: center; padding: var(--spacing-75) var(--spacing-200); border-radius: var(--radius-full);
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  transition: background-color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), transform var(--dur-press) var(--ease);
}
.lost__nav a:active { transform: scale(0.98); }
.lost__nav a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .lost__nav a:hover { background: var(--bg-3); border-color: var(--line-2); } }

@media (prefers-reduced-motion: no-preference) {
  /* the satellite comes round the ring once and settles; the logo keeps a slow drift */
  .lost__sat { animation: lost-sat 1800ms var(--ease) 200ms both; }
  .lost__float { animation: ck-drift 6000ms var(--ease) infinite alternate; }
  .lost__suggest:not([hidden]) { animation: lost-in var(--dur-reveal) var(--ease) both; }
}
@keyframes lost-sat { from { transform: translate(-50%, -50%) rotate(-150deg); } }
@keyframes ck-drift { from { transform: translateY(-6px) rotate(-2deg); } to { transform: translateY(6px) rotate(2deg); } }
@keyframes lost-in { from { opacity: 0; transform: translateY(12px); } }

/* ── tablet and phone ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .soon__grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-500); }
  .soon__card { position: static; aspect-ratio: 16 / 9; order: -1; }
}
@media (max-width: 560px) {
  .soon__card { aspect-ratio: 4 / 3; }
  .lost { min-height: 0; padding-bottom: var(--spacing-700); }
  .lost__orbit { width: 200px; height: 136px; }
  .lost__ring { width: 168px; height: 168px; margin: -84px 0 0 -84px; }
  .lost__logo { width: 96px; height: 96px; }
}