/* Hallmark · macrostructure: Marquee Hero + Gallery Rooms · tone: luxury technical · anchor hue: champagne · genre: atmospheric · theme: LUM360 production DNA */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5 · contrast: pass · slop: pass · honest: pass (sin cifras inventadas: todo sale de gameConfig y de los planos) · chrome: pass · tokens: pass · mobile: pass */
/*
 * The 360 Challenge · contenido bajo el juego.
 * Se apoya en /lab/assets/lab.css y en challenge.css (.c3-dark). Los iconos de los objetos son
 * renders del propio juego (tools/render-objects.cjs), no ilustraciones aparte.
 * Sin JavaScript todo el contenido queda visible: los revelados solo existen con html.c3-js.
 */

.c3-sec { padding-block: clamp(4rem, 9vw, 8rem); }
.c3-sec--tint { background: color-mix(in srgb, var(--color-text-primary) 3.5%, transparent); border-block: 1px solid var(--lab-line); }
.c3-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.c3-head .lab-h2 { margin-top: var(--lab-space-sm); }
.c3-head .lab-prose { margin-top: var(--lab-space-md); }
.c3-dark.c3-sec { background: var(--color-dark-surface); color: var(--color-text-primary); }

/* ── Hero: objetos reales en órbita ─────────────────────────────────────── */

.c3-orbit { display: none; list-style: none; }

@media (min-width: 64rem) {
  .c3-orbit { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .c3-hero__content { position: relative; z-index: 1; }
  .c3-orbit li { position: absolute; width: clamp(5.5rem, 9vw, 9rem); aspect-ratio: 1; animation: c3-bob 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
  .c3-orbit li:nth-child(1) { right: 7%; top: 18%; }
  .c3-orbit li:nth-child(2) { right: 22%; top: 38%; width: clamp(6.5rem, 11vw, 11rem); }
  .c3-orbit li:nth-child(3) { right: 6%; top: 52%; }
  .c3-orbit li:nth-child(4) { right: 30%; top: 14%; width: clamp(4.5rem, 7vw, 7rem); }
  .c3-orbit li:nth-child(5) { right: 17%; top: 68%; width: clamp(4.5rem, 7vw, 7rem); }
  .c3-orbit li:nth-child(6) { right: 36%; top: 56%; width: clamp(5rem, 8vw, 8rem); }
  .c3-orbit img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px color-mix(in srgb, var(--color-mask-solid) 55%, transparent)); }
}

@keyframes c3-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-0.9rem) rotate(2.5deg); }
}

/* ── Cinta de servicios ─────────────────────────────────────────────────── */

.c3-belt {
  overflow: hidden;
  border-block: 1px solid var(--lab-line);
  background: var(--color-dark-surface);
  color: var(--color-media-accent);
}

.c3-belt__track {
  display: flex;
  align-items: center;
  gap: var(--lab-space-xl);
  width: max-content;
  padding-block: 0.95rem;
  font-family: var(--font-display);
  font-size: var(--lab-text-xl);
  font-style: italic;
  font-weight: 300;
  white-space: nowrap;
  animation: c3-belt 52s linear infinite;
}

.c3-belt__track i { width: 0.5rem; height: 0.5rem; border: 1px solid currentColor; border-radius: 50%; flex: none; }
@keyframes c3-belt { to { transform: translateX(-50%); } }

/* ── Qué es ─────────────────────────────────────────────────────────────── */

.c3-intro { display: grid; gap: var(--lab-space-xl); }
.c3-intro__body { display: grid; gap: var(--lab-space-xl); align-content: start; }
@media (min-width: 56rem) { .c3-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--lab-space-3xl); align-items: start; } }

.c3-steps { list-style: none; counter-reset: none; display: grid; border-top: 1px solid var(--lab-line); }
.c3-steps li {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--lab-space-3xs) var(--lab-space-md);
  padding-block: var(--lab-space-md);
  border-bottom: 1px solid var(--lab-line);
}
.c3-steps .lab-code { grid-row: span 2; padding-top: 0.3rem; font-size: var(--lab-text-xs); color: var(--color-accent-strong); }
.c3-steps strong { font-family: var(--font-display); font-size: var(--lab-text-xl); font-weight: 400; }
.c3-steps span:last-child { font-size: var(--lab-text-sm); line-height: 1.6; color: var(--color-text-muted); }

/* ── La casa ────────────────────────────────────────────────────────────── */

.c3-shuffle { margin-top: var(--lab-space-lg); }
.c3-shuffle[hidden] { display: none; }
.c3-shuffle .lab-code { margin-left: var(--lab-space-xs); color: var(--color-accent-strong); }

.c3-rooms {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.6vw, 1rem);
}
@media (min-width: 40rem) { .c3-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .c3-rooms { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.c3-rooms li { min-width: 0; }
.c3-rooms figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--color-border);
  background: var(--color-dark-surface);
  transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.c3-rooms picture, .c3-rooms img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c3-rooms img { transition: transform 700ms var(--ease-out); }
.c3-rooms figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--color-mask-solid) 86%, transparent) 0%, color-mix(in srgb, var(--color-mask-solid) 30%, transparent) 42%, transparent 70%);
}
.c3-rooms figcaption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  display: grid;
  gap: 0.15rem;
  padding: clamp(0.6rem, 1.8vw, 1rem);
}
.c3-rooms strong { font-family: var(--font-display); font-size: var(--lab-text-xl); font-weight: 400; line-height: 1.05; }
.c3-rooms figcaption span:last-child { font-size: 0.78rem; line-height: 1.4; color: var(--color-text-secondary); }
.c3-rooms__n { font-size: var(--lab-text-xs); color: var(--color-accent-strong); }
@media (hover: hover) and (pointer: fine) {
  .c3-rooms figure:hover { border-color: var(--color-accent-strong); transform: translateY(-3px); }
  .c3-rooms figure:hover img { transform: scale(1.05); }
}
@media (max-width: 39.99rem) { .c3-rooms figcaption span:last-child { display: none; } }

/* ── Objetos ────────────────────────────────────────────────────────────── */

.c3-objects {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.6vw, 1rem);
}
@media (min-width: 44rem) { .c3-objects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .c3-objects { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.c3-objects li {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--lab-space-2xs);
  min-width: 0;
  padding: var(--lab-space-md);
  border: 1px solid var(--lab-line);
  background:
    radial-gradient(ellipse at 50% 0%, var(--lab-accent-wash) 0%, transparent 62%),
    color-mix(in srgb, var(--color-text-primary) 2.5%, transparent);
  transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.c3-objects img {
  justify-self: center;
  width: clamp(5.5rem, 14vw, 8rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin-bottom: var(--lab-space-xs);
  filter: drop-shadow(0 14px 14px color-mix(in srgb, var(--color-mask-solid) 38%, transparent));
  transition: transform 500ms var(--ease-out);
}
.c3-objects strong { font-family: var(--font-display); font-size: var(--lab-text-xl); font-weight: 400; line-height: 1.1; }
.c3-objects span { font-size: var(--lab-text-sm); line-height: 1.55; color: var(--color-text-muted); }
@media (hover: hover) and (pointer: fine) {
  .c3-objects li:hover { border-color: var(--lab-accent-line); transform: translateY(-3px); }
  .c3-objects li:hover img { transform: translateY(-4px) rotate(-5deg) scale(1.06); }
}

.c3-lum {
  display: flex;
  align-items: center;
  gap: var(--lab-space-md);
  max-width: 40rem;
  margin-top: var(--lab-space-xl);
  font-size: var(--lab-text-sm);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.c3-lum img { flex: none; width: 4.5rem; height: 4.5rem; object-fit: contain; }
.c3-lum strong { color: var(--color-text-primary); font-weight: 600; }

/* ── Niveles ────────────────────────────────────────────────────────────── */

.c3-lv { list-style: none; border-top: 1px solid var(--color-border); }
.c3-lv li {
  --c3-phase: var(--color-media-accent);
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  grid-template-areas: "n name t" "bar bar bar" "d d d";
  align-items: baseline;
  gap: 0.35rem var(--lab-space-md);
  padding-block: var(--lab-space-md);
  border-bottom: 1px solid var(--color-border);
}
.c3-lv li[style*="--p:1"] { --c3-phase: color-mix(in srgb, #8aa4e8 72%, var(--color-media-accent)); }
.c3-lv li[style*="--p:2"] { --c3-phase: #7c86ff; }
.c3-lv li[data-final] { --c3-phase: var(--color-text-primary); }
.c3-lv__n { grid-area: n; font-size: var(--lab-text-xs); color: var(--color-accent-strong); }
.c3-lv strong { grid-area: name; font-family: var(--font-display); font-size: var(--lab-text-xl); font-weight: 400; }
.c3-lv__t { grid-area: t; font-size: var(--lab-text-sm); color: var(--color-text-primary); }
.c3-lv__d { grid-area: d; padding-left: calc(2.4rem + var(--lab-space-md)); font-size: var(--lab-text-xs); letter-spacing: 0.04em; color: var(--color-text-muted); }
.c3-lv__bar { grid-area: bar; display: block; height: 0.42rem; margin-left: calc(2.4rem + var(--lab-space-md)); background: color-mix(in srgb, var(--color-text-primary) 8%, transparent); overflow: hidden; }
.c3-lv__bar i { display: block; height: 100%; width: calc(var(--t) / 25 * 100%); background: linear-gradient(90deg, color-mix(in srgb, var(--c3-phase) 50%, transparent), var(--c3-phase)); transform-origin: left; }
.c3-lv__end { margin-top: var(--lab-space-lg); font-family: var(--font-display); font-style: italic; font-size: var(--lab-text-xl); color: var(--color-accent-strong); }

@media (min-width: 56rem) {
  .c3-lv li { grid-template-columns: 2.4rem 9rem minmax(0, 1fr) 3.5rem minmax(0, 20rem); grid-template-areas: "n name bar t d"; padding-block: var(--lab-space-sm); }
  .c3-lv__bar { margin-left: 0; height: 0.55rem; }
  .c3-lv__d { padding-left: 0; }
}

/* ── Cómo se juega ──────────────────────────────────────────────────────── */

.c3-how { display: grid; gap: var(--lab-space-2xl); align-items: start; }
.c3-how__text .lab-h2 { margin-top: var(--lab-space-sm); }
@media (min-width: 64rem) { .c3-how { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--lab-space-3xl); } .c3-how__shot { position: sticky; top: calc(var(--lab-nav) + var(--lab-space-lg)); } }

.c3-how__shot { margin: 0; }
.c3-how__shot img { width: 100%; height: auto; display: block; border: 1px solid var(--color-border-strong); box-shadow: 0 30px 70px color-mix(in srgb, var(--color-mask-solid) 35%, transparent); }
.c3-how__shot figcaption { margin-top: var(--lab-space-sm); }

.c3-cards { display: grid; gap: var(--lab-space-md); margin-top: var(--lab-space-xl); }
.c3-cards > div { padding: var(--lab-space-md) var(--lab-space-md) var(--lab-space-lg); border-top: 2px solid var(--color-accent-strong); background: color-mix(in srgb, var(--color-text-primary) 3%, transparent); }
.c3-cards dt { font-family: var(--font-display); font-size: var(--lab-text-xl); font-weight: 400; }
.c3-cards dd { margin-top: var(--lab-space-xs); font-size: var(--lab-text-sm); line-height: 1.6; color: var(--color-text-muted); }
@media (min-width: 40rem) { .c3-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .c3-cards--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Botón flotante ─────────────────────────────────────────────────────── */

.c3-float {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--color-mask-solid) 45%, transparent);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
  pointer-events: none;
}
.c3-float[hidden] { display: none; }
.c3-float.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* ── Revelados (solo con JS) ────────────────────────────────────────────── */

.c3-js [data-reveal] { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--d, 0) * 60ms); }
.c3-js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }

/* Mezcla de la casa: las tarjetas se reordenan con FLIP desde JS. */
.c3-rooms li.is-moving { transition: transform 620ms var(--ease-in-out); z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .c3-orbit li, .c3-belt__track { animation: none; }
  .c3-belt__track { width: auto; flex-wrap: wrap; justify-content: center; white-space: normal; }
  .c3-belt__track > :nth-child(n + 10) { display: none; }
  .c3-js [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
  .c3-js [data-reveal], .c3-rooms li.is-moving, .c3-float { transition-duration: 1ms; transition-delay: 0ms; }
  .c3-rooms img, .c3-objects img { transition: none; }
}