/* ==========================================================================
   proyectos.css — página Proyectos: ruleta de selección a pantalla completa.
   La geometría (centro, radio, tamaño del número) la calcula js/proyectos.js
   y la expone como variables CSS en .pj.
   ========================================================================== */

body[data-page='proyectos'] {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

.pj {
  /* Valores por defecto; js/proyectos.js los sobrescribe */
  --cx: -300px;
  --cy: 50vh;
  --R: 560px;
  --num: 120px;
  --info-left: 460px;
  --info-w: 320px;
  --media-left: 60vw;

  /* Colores del proyecto activo (js/proyectos.js los anima) */
  --pj-bg: var(--bg);
  --pj-ink: var(--ink);
  --pj-strong: var(--ink);
  --pj-muted: var(--muted-strong);
  --pj-tint: #C7C2BA;
  --pj-faint: var(--line);

  position: relative;
  background: var(--pj-bg);
  color: var(--pj-strong);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

/* ---------- Ruleta ---------- */
.wheel { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

.wheel__arc {
  position: absolute;
  left: calc(var(--cx) - var(--R));
  top: calc(var(--cy) - var(--R));
  width: calc(var(--R) * 2);
  height: calc(var(--R) * 2);
  border: 1px solid var(--pj-faint);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.pj.is-ready .wheel__arc { opacity: 1; }

.wheel__dot,
.wheel__num {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  transform-origin: 0 0;
  will-change: transform, opacity;
}

.wheel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pj-tint);
}

.wheel__num {
  pointer-events: auto;
  display: block;
  padding: 0.04em 0.12em;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--num);
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--pj-tint);
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.wheel__num:focus-visible { outline-offset: 0; }
.wheel__num[aria-current='true'] { cursor: pointer; }

/* ---------- Ficha ---------- */
.info {
  position: absolute;
  z-index: 3;
  left: var(--info-left);
  top: var(--cy);
  width: var(--info-w);
  transform: translateY(-50%);
  display: grid;
}
.info__inner {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}
.info__inner.is-out { pointer-events: none; }

.ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ln > span { display: block; will-change: transform; }

.info__kind { color: var(--pj-muted); }

.info__name {
  font-size: clamp(1.9rem, 3.1vw, 3.1rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 112;
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.info__name a { display: block; }
.info__name a { transition: color var(--dur-med) var(--ease-out); }
.info__name a:hover { color: var(--pj-ink); }

.info__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--pj-muted);
}

.info__summary {
  max-width: 30ch;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--pj-muted);
}

.info__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  margin-top: 0.15rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.info__cta .cta-line {
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transition: width var(--dur-med) var(--ease-out);
}
.info__cta:hover .cta-line { width: 44px; }
.info__cta svg { transition: transform var(--dur-med) var(--ease-out); }
.info__cta:hover svg { transform: translateX(3px); }

/* ---------- Imagen ---------- */
.media {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: calc(var(--gutter) * 1.9);
  /* Escritorio: formato horizontal 3:2, centrado en vertical */
  width: min(calc(57vh * 1.5), calc(100vw - var(--media-left) - var(--gutter) * 1.9));
  aspect-ratio: 3 / 2;
  transform: translateY(-50%);
  display: block;
  --media-radius: 22px;
  border-radius: var(--media-radius);
  -webkit-tap-highlight-color: transparent;
}
.media__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--media-radius);
  isolation: isolate; /* recorta bien las esquinas con capas animadas */
  background: var(--pj-faint);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 1.2s var(--ease-out);
}
.media__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
}
.media__layer.is-visible { visibility: visible; }
.media__layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
/* Velo muy suave para integrar la foto con el fondo cálido */
.media__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.04);
}
.media:focus-visible { outline-offset: 6px; }

/* ---------- Pie ---------- */
.pj-foot {
  position: absolute;
  z-index: 4;
  left: var(--gutter);
  right: var(--gutter);
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
}
.pj-foot > * { pointer-events: auto; }

.pj-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pj-muted);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.pj-hint.is-hidden { opacity: 0; transform: translateY(6px); pointer-events: none; }
.pj-hint__wheel { animation: pj-wheel 1.8s var(--ease-in-out) infinite; }
@keyframes pj-wheel {
  0%   { transform: translateY(0); opacity: 1; }
  60%  { transform: translateY(5px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

.pj-nav { display: inline-flex; align-items: center; gap: 0.25rem; }
.pj-nav__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--pj-strong);
  transition: background-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.pj-nav__btn:hover { background: color-mix(in srgb, var(--pj-ink) 22%, transparent); }
.pj-nav__btn[disabled] { opacity: 0.25; cursor: default; background: none; }

.pj-count {
  display: inline-flex;
  gap: 0.5em;
  min-width: 7ch;
  justify-content: center;
  font-size: var(--fs-sm);
}
.pj-count__sep,
.pj-count__tot { color: var(--pj-muted); font-weight: 400; }

.pj-fallback { padding: 120px var(--gutter); display: grid; gap: 1rem; font-size: var(--fs-xl); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .info__summary { font-size: var(--fs-xs); }
}

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .media {
    top: 84px;
    left: 16px;
    right: 16px;
    width: auto;
    height: var(--media-h, 40vh);
    aspect-ratio: auto;
    transform: none;
    --media-radius: 16px;
  }
  .info { gap: 0; }
  .info__inner { gap: 0.55rem; }
  .info__name { font-size: clamp(1.45rem, 7vw, 1.9rem); }
  .info__summary { font-size: 0.8125rem; line-height: 1.5; max-width: none; }
  .info__cta { margin-top: 0; }
  .pj-foot { left: 16px; right: 8px; bottom: max(10px, env(safe-area-inset-bottom)); }
  .pj-hint { font-size: 0.6875rem; letter-spacing: 0.08em; }
}

@media (max-width: 760px) and (max-height: 700px) {
  .info__summary { display: none; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  .pj-hint__wheel { animation: none; }
  .media__frame { transform: none; }
}

/* Área táctil ampliada de los números (escalan con la ruleta) */
.wheel__num::after {
  content: '';
  position: absolute;
  inset: -0.3em -0.15em;
}
@media (max-width: 760px) {
  .wheel__num::after { inset: -0.5em -0.3em; }
}

/* ---------- Fondo líquido (canvas) ---------- */
.pj-liquid {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.wheel, .info, .media, .pj-foot { isolation: isolate; }

/* Logotipo con el color del proyecto: js/proyectos.js fija --pj-logo
   cuando la mancha líquida lo alcanza (sin transition CSS: la interpolación
   se hace en JS). */
body[data-page='proyectos'] .brand-mark {
  color: var(--pj-logo, var(--pj-strong-global, #1A1A1A));
  mix-blend-mode: normal;
}