/* ============================================================
   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.
   ============================================================ */

/* ------------------------------------------------------------
   SANEAMIENTO CROMÁTICO · 2026-09-09 · disenador-de-interfaz
   (encargo TL-LIRAPRES-001C, Estación 1)

   Estas sombras traían `rgba(43,46,134,…)` — el AÑIL DE THE LEGACY
   GROUP, color de un tercero de la pieza anterior. Vivía en la
   sombra larga de --el-s2 y --el-s3 y en la sombra interior, es
   decir DEBAJO de toda pieza elevada de la presentación. Era deuda
   declarada y escalada en el frente anterior (DI-CLAUDIA-001).
   Aquí ese añil no tiene ni siquiera coartada: no es color de
   Lira ni de nadie de esta pieza.

   Entra en su lugar el matiz de la TINTA del sistema —rgba(30,27,24)—
   que es la doctrina que el propio archivo de tokens declara: "la
   sombra desciende del casi-negro cálido del sistema, no de un gris
   azulado ajeno". Misma opacidad, mismo dibujo, mismo peso: solo
   cambia el matiz. Espejo byte a byte en
   `elevacion.css.bak-2026-09-09-pre-estacion1`.
   ------------------------------------------------------------ */
: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(30,27,24,.09);
  --el-s3: 0 2px 4px rgba(36,28,22,.06), 0 18px 40px rgba(36,28,22,.09), 0 48px 96px rgba(30,27,24,.14);
  --el-luz-int: inset 0 1px 1px rgba(255,255,255,.92);
  --el-sombra-int: inset 0 -16px 30px rgba(30,27,24,.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(30,27,24,.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(30,27,24,.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(30,27,24,.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 para asentar cualquier foto sobre el papel.
   2026-09-09: llevaba el CREMA de la pieza anterior rgba(245,240,232).
   Pasa al hueso del sistema rgba(246,245,242) — misma materia que el
   fondo de la pantalla, que es lo que el velo pretende ser. */
.el-foto--velada::after{
  content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(to top, rgba(246,245,242,.34) 0%, rgba(246,245,242,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(252,252,250,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-soft);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);
  /* LEY DE LEGIBILIDAD SOBRE EL ACENTO — remedida para Lira, 2026-09-09.
     Sobre la TERRACOTA #CE7446 el UNICO texto que pasa AA es la tinta:
        tinta  #1E1B18 -> 5,07:1  PASA   (verificado tambien sobre el pixel
                                          pintado del boton de la portada)
        hueso  #F6F5F2 -> 3,10:1  no
        paper2 #FCFCFA -> 3,29:1  no
        blanco #FFFFFF -> 3,38:1  no
     El hover NO oscurece el plato: si el fondo bajara a --accent-ink la tinta
     caeria a 1,94:1 y habria que voltear el texto a claro en mitad del gesto.
     Un boton que cambia de color de texto al pasar el cursor titila. El estado
     se dice con elevacion, y el par tinta/acento no se mueve.
     (Origen del criterio: canon del colorista 2026-09-04 y hallazgo
     DI-CLAUDIA-001. Cambio la paleta, no cambio la ley; los numeros si.) */
  color:var(--ink);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);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;}
}