/* ============================================================
   CAPA DE ELEVACIÓN — vocabulario de profundidad de la casa
   Dalí, Genio Audiovisual de AIONOVA · 2026-09-03

   Nace de estudiar la pieza de Borja corriendo, no de leerla.
   Lo que allí eleva y aquí faltaba:
     · fotografía real, a sangre y en tarjeta con sombra
     · nodos ESFÉRICOS con luz propia, no píldoras planas
     · tarjetas con elevación y filete de acento
     · numeral gigante de estación como arquitectura de fondo
     · rail numerado, consola de navegación, barra de progreso
     · velos y transparencias sobre imagen

   Consume tokens-create.css. Cero colores literales de marca.
   ============================================================ */

:root{
  /* Sombras en capas: una sombra sola es plana; tres crean aire real. */
  --el-s1: 0 1px 1px rgba(36,28,22,.05), 0 4px 10px rgba(36,28,22,.05);
  --el-s2: 0 1px 2px rgba(36,28,22,.05), 0 10px 24px rgba(36,28,22,.07), 0 28px 56px rgba(43,46,134,.09);
  --el-s3: 0 2px 4px rgba(36,28,22,.06), 0 18px 40px rgba(36,28,22,.09), 0 48px 96px rgba(43,46,134,.14);
  --el-luz-int: inset 0 1px 1px rgba(255,255,255,.92);
  --el-sombra-int: inset 0 -16px 30px rgba(43,46,134,.055);
}

/* ============================================================
   1 · ESFERA — el nodo con cuerpo. Reemplaza a la píldora plana.
   ============================================================ */
.el-esfera{
  position:relative;border-radius:50%;
  display:grid;place-items:center;text-align:center;
  background:
    radial-gradient(120% 120% at 32% 24%,
      #FFFFFF 0%, var(--paper-2) 38%, var(--paper) 74%, var(--paper-3) 100%);
  box-shadow: var(--el-s2), var(--el-luz-int), var(--el-sombra-int);
  border:1px solid rgba(43,46,134,.10);
  transition:transform 520ms var(--ease,cubic-bezier(.22,.61,.36,1)),
             box-shadow 520ms var(--ease,cubic-bezier(.22,.61,.36,1)),
             border-color 380ms var(--ease,ease);
}
/* brillo especular: lo que separa una esfera de un círculo */
.el-esfera::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(46% 34% at 34% 20%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 70%);
}
.el-esfera:hover,.el-esfera:focus-visible{
  transform:translateY(-4px) scale(1.022);
  box-shadow: var(--el-s3), var(--el-luz-int), var(--el-sombra-int);
  border-color:rgba(43,46,134,.24);
}
.el-esfera[aria-selected="true"],.el-esfera[data-activa]{
  border-color:var(--accent);
  box-shadow: var(--el-s3), var(--el-luz-int),
              inset 0 -18px 34px rgba(43,46,134,.10),
              0 0 0 6px var(--accent-tint);
}
.el-esfera__n{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  color:var(--ink-soft);display:block;margin-bottom:.3em;
}
.el-esfera__t{
  font-family:var(--display);font-optical-sizing:auto;
  font-variation-settings:"opsz" 42,"wght" 420;
  line-height:1.12;letter-spacing:-.012em;color:var(--ink);display:block;
}
.el-esfera[aria-selected="true"] .el-esfera__t,
.el-esfera[data-activa] .el-esfera__t{color:var(--accent-ink);}

/* ============================================================
   2 · TARJETA CON ELEVACIÓN — con filete de acento arriba
   ============================================================ */
.el-card{
  position:relative;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:14px;
  padding:clamp(1em,1.5vw,1.35em) clamp(1em,1.4vw,1.3em) clamp(1.05em,1.6vw,1.4em);
  box-shadow: var(--el-s1);
  border-top:3px solid var(--sc, var(--accent));
  transition:transform 420ms var(--ease,ease), box-shadow 420ms var(--ease,ease);
}
.el-card:hover{transform:translateY(-3px);box-shadow: var(--el-s2);}
.el-card__t{
  font-family:var(--display);font-optical-sizing:auto;
  font-variation-settings:"opsz" 42,"wght" 430;
  font-size:clamp(1.02rem,1.42vw,1.3rem);line-height:1.14;letter-spacing:-.014em;
  color:var(--accent-ink);margin:.05em 0 .45em;
}
.el-card__d{font-size:clamp(.84rem,.98vw,.95rem);line-height:1.5;color:var(--ink-soft);margin:0;text-wrap:pretty;}

/* ============================================================
   3 · FOTOGRAFÍA — en tarjeta, con sombra y pie
   ============================================================ */
.el-foto{position:relative;display:block;}
.el-foto img{
  display:block;width:100%;height:100%;object-fit:cover;
  border-radius:14px;box-shadow: var(--el-s3);
  border:1px solid rgba(255,255,255,.7);
}
.el-foto__pie{
  font-family:var(--mono);font-size:clamp(.54rem,.66vw,.64rem);
  letter-spacing:.12em;color:var(--ink-soft);margin:.85em 0 0;
}
/* velo cálido para asentar cualquier foto sobre el papel crema */
.el-foto--velada::after{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(to top, rgba(245,240,232,.34) 0%, rgba(245,240,232,0) 46%);
}

/* ============================================================
   4 · ATMÓSFERA — la lámina respira con una imagen detrás
   ============================================================ */
.el-atmosfera{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.el-atmosfera img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:var(--atm-op,.30);
  -webkit-mask-image:radial-gradient(120% 100% at var(--atm-x,72%) var(--atm-y,50%), #000 18%, rgba(0,0,0,.55) 52%, transparent 82%);
          mask-image:radial-gradient(120% 100% at var(--atm-x,72%) var(--atm-y,50%), #000 18%, rgba(0,0,0,.55) 52%, transparent 82%);
}

/* ============================================================
   5 · NUMERAL DE ESTACIÓN — arquitectura, no decoración
   ============================================================ */
.el-numeral{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  right:clamp(-10px,1vw,44px);bottom:-6vh;
  font-family:var(--display);font-optical-sizing:auto;
  font-variation-settings:"opsz" 144,"wght" 250;
  font-size:clamp(14rem,26vw,27rem);line-height:.76;
  color:var(--accent);opacity:.055;letter-spacing:-.05em;
}

/* ============================================================
   6 · RAIL NUMERADO — dónde estoy, en la periferia
   ============================================================ */
.el-rail{
  position:absolute;z-index:6;left:0;top:0;bottom:0;
  width:clamp(52px,4.4vw,68px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9em;
  border-right:1px solid var(--rule-soft);
  background:linear-gradient(to right, var(--paper-2), rgba(251,248,242,0));
}
.el-rail__p{
  border:0;background:transparent;cursor:pointer;padding:.35em .5em;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-mute);
  transition:color 280ms ease;position:relative;
}
.el-rail__p::before{
  content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:2px;height:0;background:var(--accent);border-radius:2px;transition:height 340ms var(--ease,ease);
}
.el-rail__p:hover{color:var(--ink-soft);}
.el-rail__p[aria-current="true"]{color:var(--accent-ink);}
.el-rail__p[aria-current="true"]::before{height:20px;}

/* ============================================================
   7 · CONSOLA — avanzar y volver, siempre a la mano
   ============================================================ */
.el-consola{
  position:absolute;z-index:7;right:clamp(20px,2.4vw,36px);bottom:clamp(44px,6vh,64px);
  display:inline-flex;align-items:center;gap:.5em;padding:.4em .5em;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:100px;
  box-shadow: var(--el-s2);
}
.el-consola__lbl{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);padding:0 .5em 0 .7em;
}
.el-consola__b{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--rule);
  background:var(--paper);cursor:pointer;display:grid;place-items:center;color:var(--ink-soft);
  transition:border-color 260ms ease,background-color 260ms ease,color 260ms ease,transform 260ms ease;
}
.el-consola__b:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-tint);transform:translateY(-1px);}
.el-consola__b:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.el-consola__b svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;}

/* ============================================================
   8 · PROGRESO — hilo fino en el borde superior
   ============================================================ */
.el-progreso{
  position:absolute;z-index:8;left:0;right:0;top:0;height:2px;background:var(--rule-soft);
}
.el-progreso__i{
  height:100%;background:var(--accent);width:0;border-radius:0 2px 2px 0;
  transition:width 620ms var(--ease,cubic-bezier(.22,.61,.36,1));
}

/* ============================================================
   9 · CHIP — la unidad menor, con relieve
   ============================================================ */
.el-chip{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.5em .95em;border-radius:100px;
  font-family:var(--sans);font-weight:500;font-size:clamp(.76rem,.92vw,.88rem);
  color:var(--ink);background:var(--paper-2);
  border:1px solid var(--rule);box-shadow: var(--el-s1);
  transition:transform 300ms var(--ease,ease), box-shadow 300ms var(--ease,ease), border-color 300ms ease;
}
.el-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sc,var(--accent));flex:none;}
.el-chip:hover{transform:translateY(-2px);box-shadow: var(--el-s2);border-color:var(--accent);}

/* ============================================================
   10 · BOTÓN SÓLIDO — la llamada que sí se ve
   ============================================================ */
.el-btn{
  display:inline-flex;align-items:center;gap:.7em;
  padding:.86em 1.5em;border:0;border-radius:100px;cursor:pointer;
  font-family:var(--sans);font-weight:600;font-size:clamp(.84rem,.98vw,.95rem);
  color:var(--paper-2);background:var(--accent);
  box-shadow: var(--el-s2);
  transition:transform 300ms var(--ease,ease), box-shadow 300ms var(--ease,ease), background-color 300ms ease;
}
.el-btn:hover{transform:translateY(-2px);background:var(--accent-ink);box-shadow: var(--el-s3);}
.el-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.el-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;}

@media (prefers-reduced-motion:reduce){
  .el-esfera,.el-card,.el-chip,.el-btn,.el-consola__b{transition:none!important;}
  .el-esfera:hover,.el-card:hover,.el-chip:hover,.el-btn:hover{transform:none!important;}
}