/* ==========================================================================
   KEITELAN · LA GALERÍA FLOTANTE
   Paleta y proporciones fieles a la referencia:
   tinta oliva #313927 sobre papel crema #E4D3B5.
   Para cambiar de tema, edita solo las variables de :root.
   ========================================================================== */
:root{
  --ink:#061820;              /* negro/azul profundo tecnológico */
  --ink-55:rgba(6,24,32,.55);
  --ink-77:rgba(6,24,32,.72);
  --ink-12:rgba(6,24,32,.14);

  --cream:#EAFBFF;            /* texto claro sobre fondos oscuros */
  --paper:#BEEFFF;            /* azul cielo principal */
  --paper-hi:#F5FDFF;         /* luz superior */
  --paper-lo:#74DFF6;         /* borde cyan */
  --frame:rgba(245,253,255,.88);

  --brand:#00D9FF;            /* cyan KeitElan */
  --brand-soft:#9EEFFF;
  --brand-glow:rgba(0,217,255,.34);

  --font-heading:"Kalnia",Georgia,serif;
  --font-para:"Hanken Grotesk",system-ui,sans-serif;
  --ease:cubic-bezier(.65,.05,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-para);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;              /* la galería es una sola pantalla */
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--cream)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* ============ HEADER ============ */
.hd{
  position:fixed;top:0;left:0;z-index:50;width:100%;
  padding:2rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
  pointer-events:none;color:var(--ink);
}
.hd__nav{pointer-events:auto;display:flex;align-items:center;gap:1rem}
.hd__link{
  font-family:var(--font-para);
  font-size:.88rem;letter-spacing:.18em;
  color:var(--ink-55);
  transition:color .3s;
}
.hd__link:hover,.hd__link.is-active{color:var(--ink)}
.hd__credit{
  pointer-events:auto;display:none;
  font-size:.875rem;letter-spacing:.02em;color:var(--ink-77);
}
.hd__credit span{color:var(--ink);text-decoration:underline;cursor:pointer}

/* ============ ESCENA ============ */
.stage{position:relative;width:100vw;height:100vh;height:100dvh}

.paper{
  position:absolute;
  inset:0;
  z-index:-10;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.92) 0%, transparent 32%),
    radial-gradient(circle at 82% 72%, rgba(0,217,255,.36) 0%, transparent 38%),
    radial-gradient(120% 90% at 50% 38%, var(--paper-hi) 0%, var(--paper) 50%, var(--paper-lo) 100%);
}

/* grano de papel procedural (sin imágenes externas) */
.paper::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.42;
  mix-blend-mode:multiply;
  background-image:
    linear-gradient(rgba(6,24,32,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,24,32,.045) 1px, transparent 1px);
  background-size:42px 42px;
}

#scene{
  position:absolute;inset:0;touch-action:none;cursor:grab;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
#scene.dragging{cursor:grabbing}
#scene canvas{display:block;width:100%;height:100%;touch-action:none}

/* Capa de textos sobre el lienzo */
.overlay{position:absolute;inset:0;z-index:20;pointer-events:none}

.hero{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;color:var(--ink);
}
.hero__title{
  font-family:var(--font-heading);
  font-weight:200;font-size:2.5rem;line-height:1.1;
  overflow:hidden;
}
.hero__sub{
  font-family:var(--font-para);
  font-weight:300;font-size:.85rem;
  overflow:hidden;
}
.hero__title span,.hero__sub span{
  display:inline-block;transform:translateY(120%);
  transition:transform 1s var(--ease);
}
body.ready .hero__title span{transform:none}
body.ready .hero__sub span{transform:none;transition-delay:.12s}
.hero__hint{
  margin-top:1rem;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-55);opacity:0;transition:opacity .8s .9s,visibility .8s;
}
body.ready .hero__hint{opacity:1}
.hero__hint.hide{opacity:0!important;visibility:hidden}

/* Eliminar texto de Keit Elan al abrir tarjeta" */
body.project-open .hero,
body.project-open .viewbar,
body.project-open .hero__hint{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-56%) scale(.96);
  transition:
    opacity .35s ease,
    visibility .35s ease,
    transform .45s var(--ease);
}

/* Píldora "Cambia la vista" */
.viewbar{
  position:absolute;bottom:10%;left:50%;transform:translateX(-50%);
  width:60%;
}
.pill{
  pointer-events:auto;
  display:flex;align-items:center;justify-content:space-between;gap:.25rem;
  padding:.25rem .8rem;border-radius:999px;
  border:1px solid var(--ink);color:var(--ink);background:transparent;
}
.pill__label{font-family:var(--font-para);font-size:.65rem;font-weight:600;white-space:nowrap}
.pill__btn{
  padding:.4rem .5rem;border-radius:999px;
  font-size:.8rem;transition:all .3s;color:var(--ink);
}
.pill__btn:hover{background:rgba(255,255,255,.25)}
.pill__btn.is-active{background:var(--ink);color:var(--cream)}

/* ============ FICHA DE PROYECTO ============ */
.focus{position:absolute;inset:0;z-index:40}
.focus__bg{position:absolute;inset:0;cursor:default}
.focus__card{
  position:absolute;left:2rem;bottom:2rem;max-width:min(340px,calc(100vw - 4rem));
  padding:1.4rem 1.5rem 1.5rem;border:1px solid var(--ink);border-radius:14px;
  background:linear-gradient(160deg,var(--paper-hi),var(--paper));
  box-shadow:0 24px 60px -28px rgba(49,57,39,.55);
  transform:translateY(18px);opacity:0;
  transition:transform .55s var(--ease),opacity .45s;
}
.focus.is-open .focus__card{transform:none;opacity:1}
.focus__cat{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-77);margin-bottom:.45rem}
.focus__title{font-family:var(--font-heading);font-weight:300;font-size:1.7rem;line-height:1.05;margin-bottom:1.1rem}

.focus__detailTitle{
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
  margin:-.45rem 0 .55rem;
}

.focus__desc{
  font-size:.9rem;
  line-height:1.45;
  color:var(--ink-77);
  margin:0 0 1.15rem;
  max-width:32ch;
}

.focus__detailTitle[hidden],
.focus__desc[hidden]{
  display:none;
}

.focus__row{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.focus__btn{
  padding:.55rem 1rem;border-radius:999px;background:var(--ink);color:var(--cream);
  font-size:.8rem;letter-spacing:.03em;transition:transform .3s var(--ease),opacity .3s;
}
.focus__btn:hover{transform:translateY(-2px)}
.focus__btn[hidden]{display:none}
.focus__close{font-size:.76rem;letter-spacing:.06em;color:var(--ink-77);transition:color .25s}
.focus__close:hover{color:var(--ink)}

/* ============ CORTINA DE ENTRADA ============ */
.curtain{position:fixed;inset:0;z-index:9999;pointer-events:none}
.curtain__svg{width:100%;height:100%;display:block}
.curtain__mark{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:var(--cream);transition:opacity .4s;
}
.curtain__brand{font-family:var(--font-para);font-size:.72rem;letter-spacing:.5em;padding-left:.5em}
.curtain__pct{font-family:var(--font-heading);font-weight:200;font-size:2.2rem}
.curtain.done .curtain__mark{opacity:0}

/* ============ CUADRÍCULA PLANA (fallback) ============ */
.flatgrid{
  position:absolute;inset:0;z-index:30;overflow-y:auto;
  padding:8rem 2rem 4rem;
  display:none;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.2rem;
  background:transparent;
  pointer-events:none;
}
.flatgrid[hidden]{display:none!important;pointer-events:none!important}
.flatgrid a{
  border:1px solid var(--ink-12);border-radius:12px;overflow:hidden;
  background:var(--frame);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s;
}
.flatgrid a:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(49,57,39,.5)}
.flatgrid img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.flatgrid figcaption{padding:.7rem .8rem .9rem}
.flatgrid .fg-cat{display:block;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-77)}
.flatgrid .fg-title{display:block;font-family:var(--font-heading);font-weight:300;font-size:1.05rem;margin-top:.15rem}
body.flat #scene,body.flat .viewbar,body.flat .hero__hint{display:none}
body.flat{overflow:auto}
body.flat .hero{position:static;transform:none;padding:7.5rem 2rem 0;pointer-events:auto}
body.flat .overlay{position:static;pointer-events:auto}
body.flat .flatgrid{position:static;padding-top:2rem;display:grid;pointer-events:auto}

.noscript{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:60;text-align:center;max-width:34ch;color:var(--ink);
  background:var(--paper-hi);border:1px solid var(--ink);border-radius:12px;padding:1.2rem 1.4rem;
}

/* ============ RESPONSIVE ============ */
@media (min-width:768px){
  .hd{padding:2rem 3rem}
  .hd__nav{gap:2rem}
  .hd__credit{display:block}
  .viewbar{width:21.5%;min-width:340px}
  .pill{padding:.25rem .7rem}
  .pill__label{font-size:.8rem}
  .pill__btn{padding:.4rem 1rem;font-size:.875rem}
}

/* ============ REDUCE MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero__title span,.hero__sub span{transform:none}
  .hero__hint{opacity:0!important}
}