/* ============================================================================
   VIDA · PANEL   ·   .c-panel en las 5 épocas      (agente VIDA-PANEL)
   Contrato: design-system/07-contrato-vida-y-armazon.md §0 (doctrina) + §A.
   Se carga DESPUÉS de base.css y de las cinco hojas de época.

   LA IDEA REINA — LEY 2 de la doctrina: **la luz es una fuente e ilumina a los
   vecinos.** Cuando un `.c-panel--destacado` está encendido, los paneles
   hermanos de al lado reciben un tinte de esa luz, y lo reciben POR EL LADO que
   da a la fuente. Si nada más cambia cuando algo se enciende, no se ha
   encendido nada. Aquí cambia: el vecino tiene una cara caliente.

   CÓMO ESTÁ HECHA ESA LUZ (sin JS, sin marcado, sin pseudos nuevos)
   Dos capas más al final de la pila de sombras del panel, las dos `inset`:
     · el DERRAME  — mancha ancha y difusa que entra por el lado de la fuente.
     · el FILO     — línea de 2px pegada al canto que da a la fuente.
   Van `inset` a propósito: una sombra interior se pinta encima del fondo pero
   DEBAJO del contenido, así que no puede tocarle el contraste al texto.
   Su alfa es `alfa-de-época × --vp-luz`. `--vp-luz` vale 0 en cualquier panel
   (capas invisibles, coste cero) y sube a 1 en el hermano adyacente al
   encendido, .38 en el siguiente. Está registrada con `@property`: INTERPOLA,
   así que al pasar el ratón por el panel encendido la luz de la sala sube y
   baja sola. La dirección la ponen `--vp-dx/--vp-dy` (derrame) y
   `--vp-fx/--vp-fy` (filo): si el encendido está a la izquierda, la cara
   caliente es la izquierda.

   SOPORTE Y DEGRADACIÓN
   Hacia ADELANTE (`--destacado + .c-panel`) es el combinador hermano de toda la
   vida: funciona en todo. Hacia ATRÁS hace falta `:has()`, y esas reglas van
   aisladas en su propio `@supports selector(:has(*))` — un navegador sin
   `:has()` descarta ESE bloque y sigue iluminando hacia adelante: la luz no
   desaparece, se queda coja. Sin JS de rescate y sin marcado de ayuda.
   Sin `@property` (navegadores viejos) las variables siguen valiendo por los
   `var(…, 0)` de red: la luz está, solo que entra de golpe en vez de subir.

   POR QUÉ EL PANEL ENCENDIDO NO SE CALIENTA AL PASAR EL RATÓN
   Regla 5 de la doctrina: una sola cosa encendida por pantalla. El destacado ya
   está caliente; lo que hace al tocarlo no es encenderse más, es **alumbrar más
   la sala**. Por eso las ideas de interacción de cada época se declaran contra
   `:not(.c-panel--destacado)` y lo único que provoca el hover del destacado es
   la subida de `--vp-luz` en sus vecinos.

   REGLAS QUE CUMPLE ESTE FICHERO
   · Un solo componente: todo selector es `html[data-epoca="N"] .c-panel…`.
     El tinte del vecino también se ancla en un selector de panel.
   · Solo interacción y entrada-en-estado. Ni una animación perpetua nueva.
   · Solo `transform`, `opacity`, `box-shadow`, `background-image` y bordes.
     Nada que dispare layout.
   · La caja no cambia de tamaño: en reposo ±0 y en interacción solo `transform`.
   · Pseudos: se usa SOLO lo que la piel deja libre —
       época 1 → `::before` libre (la piel pinta con capas de fondo)   ✔ usado
       época 2 → libres, pero no hacen falta (la idea es la sombra)    · sin usar
       época 3 → `::before` y `::after` OCUPADOS por la piel (fibra + marcas de
                 registro y sello): la vida va sobre transiciones de lo existente.
       época 4 → `::before` ocupado (los cuatro remaches) · `::after` libre ✔ usado
       época 5 → libres, no hacen falta (la idea es el filo)           · sin usar
   · Asimetría obligatoria (ley 3): entra en `--e-vel`, sale en `--e-vel × 3.5`.
     Los valores absolutos los pone cada época — la cueva tarda 2,52 s en
     enfriarse y la cabina 455 ms, y así debe ser.
   · Contraste medido sobre píxeles del render en el peor estado (informe §7).

   NOTA SOBRE LAS PILAS DE SOMBRAS
   Para que las dos capas de luz compongan y las transiciones interpolen (dos
   pilas solo interpolan si tienen el mismo número de capas), cada época REPITE
   aquí la pila exacta de su piel congelada y le añade `derrame` + `filo` al
   final, con el mismo recuento en reposo y en interacción. Las pieles están
   congeladas: esos valores no se mueven.

   ── MEDIDO (Chrome headless 151, píxeles del render, no color nominal) ─────
   Contraste peor de TODA la época, en todos los estados (reposo · vecino ·
   vecino con la luz subida · hover · foco · fotogramas 25/50/75% de la cueva),
   midiendo el peor píxel de fondo bajo la caja del texto y de los rótulos:

        época   piel sola   con la vida puesta
          1       4,92:1        4,92:1   (± 0,00 · el peor par es el de la piel)
          2       4,62:1        4,62:1   (± 0,00 · ídem)
          3       8,67:1        8,62:1   (− 0,05)
          4       5,42:1        5,03:1   (− 0,40)
          5       6,36:1        7,79:1   (+ 1,43 · la luz tapa el peor píxel)

   Ninguna época baja de 4,5:1, y en la cueva y en la piedra —las dos que iban
   justas de origen— la vida NO mueve el peor par ni una centésima. Se llega ahí
   porque la luz alcanza también a la tinta (ver el bloque de abajo): sin eso, el
   rótulo de latón de la piedra caía a 3,90:1 y el del pie de la cueva a 3,96:1.
   (Las dos columnas salen de la MISMA tanda de capturas: comparar entre tandas
   distintas mete ±0,2 de ruido por las métricas de texto.)
   La luz vecina sube la luminancia media del panel entre un 0,05% y un 0,49%
   —invisible como "brillo", evidente como dirección: la banda del canto que da
   a la fuente se separa de la contraria entre 13 y 17 puntos de rojo—, y cae
   con la distancia (época 1, en puntos de asimetría: 16,5 → 5,4 → 0,1).
   A 390px, con los paneles apilados: sin desbordes y contraste 4,63 – 8,48:1.
   ========================================================================= */


/* ───────────────────────────────────────────────────────────────────────────
   0 · EL MECANISMO DE LA LUZ VECINA
   ─────────────────────────────────────────────────────────────────────────── */

/* Registradas para que INTERPOLEN dentro de la sombra. */
@property --vp-luz {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --vp-dx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --vp-dy { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --vp-fx { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --vp-fy { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* — hacia adelante: el encendido queda a la IZQUIERDA, la cara caliente es la
     izquierda (una sombra interior con dx positivo pinta el filo izquierdo) — */
html[data-epoca="1"] .c-panel--destacado + .c-panel,
html[data-epoca="2"] .c-panel--destacado + .c-panel,
html[data-epoca="3"] .c-panel--destacado + .c-panel,
html[data-epoca="4"] .c-panel--destacado + .c-panel,
html[data-epoca="5"] .c-panel--destacado + .c-panel {
  --vp-luz: 1;
  --vp-dx: 22px;
  --vp-dy: 5px;
  --vp-fx: 2px;
  --vp-fy: 0px;
}

/* — el segundo vecino: la luz cae con la distancia, no se corta de golpe.
     A esa distancia ya no hay filo, solo el derrame flojo. — */
html[data-epoca="1"] .c-panel--destacado + .c-panel + .c-panel,
html[data-epoca="2"] .c-panel--destacado + .c-panel + .c-panel,
html[data-epoca="3"] .c-panel--destacado + .c-panel + .c-panel,
html[data-epoca="4"] .c-panel--destacado + .c-panel + .c-panel,
html[data-epoca="5"] .c-panel--destacado + .c-panel + .c-panel {
  --vp-luz: .38;
  --vp-dx: 22px;          /* el vector NO se hereda: hay que repetirlo aquí */
  --vp-dy: 5px;
  --vp-fx: 0px;
  --vp-fy: 0px;
}

/* — al tocar el panel encendido, la sala entera sube un punto de luz.
     Es lo único que provoca el hover del destacado (regla 5). — */
html[data-epoca="1"] .c-panel--destacado:hover + .c-panel,
html[data-epoca="2"] .c-panel--destacado:hover + .c-panel,
html[data-epoca="3"] .c-panel--destacado:hover + .c-panel,
html[data-epoca="4"] .c-panel--destacado:hover + .c-panel,
html[data-epoca="5"] .c-panel--destacado:hover + .c-panel,
html[data-epoca="1"] .c-panel--destacado:focus-within + .c-panel,
html[data-epoca="2"] .c-panel--destacado:focus-within + .c-panel,
html[data-epoca="3"] .c-panel--destacado:focus-within + .c-panel,
html[data-epoca="4"] .c-panel--destacado:focus-within + .c-panel,
html[data-epoca="5"] .c-panel--destacado:focus-within + .c-panel {
  --vp-luz: 1.3;
}

/* — hacia atrás: necesita `:has()`. Bloque propio para que un parser sin
     soporte descarte ESTAS reglas y no las de arriba. — */
@supports selector(:has(*)) {
  html[data-epoca="1"] .c-panel:has(+ .c-panel--destacado),
  html[data-epoca="2"] .c-panel:has(+ .c-panel--destacado),
  html[data-epoca="3"] .c-panel:has(+ .c-panel--destacado),
  html[data-epoca="4"] .c-panel:has(+ .c-panel--destacado),
  html[data-epoca="5"] .c-panel:has(+ .c-panel--destacado) {
    --vp-luz: 1;
    --vp-dx: -22px;                 /* la fuente está a la DERECHA */
    --vp-dy: 5px;
    --vp-fx: -2px;
    --vp-fy: 0px;
  }
  html[data-epoca="1"] .c-panel:has(+ .c-panel + .c-panel--destacado),
  html[data-epoca="2"] .c-panel:has(+ .c-panel + .c-panel--destacado),
  html[data-epoca="3"] .c-panel:has(+ .c-panel + .c-panel--destacado),
  html[data-epoca="4"] .c-panel:has(+ .c-panel + .c-panel--destacado),
  html[data-epoca="5"] .c-panel:has(+ .c-panel + .c-panel--destacado) {
    --vp-luz: .38;
    --vp-dx: -22px;
    --vp-dy: 5px;
    --vp-fx: 0px;
    --vp-fy: 0px;
  }
  html[data-epoca="1"] .c-panel:has(+ .c-panel--destacado:hover),
  html[data-epoca="2"] .c-panel:has(+ .c-panel--destacado:hover),
  html[data-epoca="3"] .c-panel:has(+ .c-panel--destacado:hover),
  html[data-epoca="4"] .c-panel:has(+ .c-panel--destacado:hover),
  html[data-epoca="5"] .c-panel:has(+ .c-panel--destacado:hover),
  html[data-epoca="1"] .c-panel:has(+ .c-panel--destacado:focus-within),
  html[data-epoca="2"] .c-panel:has(+ .c-panel--destacado:focus-within),
  html[data-epoca="3"] .c-panel:has(+ .c-panel--destacado:focus-within),
  html[data-epoca="4"] .c-panel:has(+ .c-panel--destacado:focus-within),
  html[data-epoca="5"] .c-panel:has(+ .c-panel--destacado:focus-within) {
    --vp-luz: 1.3;
  }
}

/* — LA LUZ TAMBIÉN ALCANZA A LA TINTA —
   Medido: el rótulo `__meta` de las tres épocas cálidas vive muy justo de
   contraste sobre su propio material (la piedra lo deja en 4,55:1 sin que nadie
   la toque), y cualquier luz que le eches encima lo tumba. La salida no es
   apagar la luz: es que el rótulo la reciba también. Es la respuesta que ya da
   la propia piel de la cueva —«en el panel encendido el texto sube a tinta
   llena»— aplicada al vecino. La época 3 y la 5 no entran: en el papel la luz
   ENTINTA (el contraste sube solo) y en la cabina el vecino no se calienta. */
html[data-epoca="1"] .c-panel--destacado + .c-panel .c-panel__meta,
html[data-epoca="2"] .c-panel--destacado + .c-panel .c-panel__meta,
html[data-epoca="4"] .c-panel--destacado + .c-panel .c-panel__meta,
html[data-epoca="1"] .c-panel--destacado + .c-panel + .c-panel .c-panel__meta,
html[data-epoca="2"] .c-panel--destacado + .c-panel + .c-panel .c-panel__meta,
html[data-epoca="4"] .c-panel--destacado + .c-panel + .c-panel .c-panel__meta {
  color: var(--e-acento-nucleo);
}
@supports selector(:has(*)) {
  html[data-epoca="1"] .c-panel:has(+ .c-panel--destacado) .c-panel__meta,
  html[data-epoca="2"] .c-panel:has(+ .c-panel--destacado) .c-panel__meta,
  html[data-epoca="4"] .c-panel:has(+ .c-panel--destacado) .c-panel__meta,
  html[data-epoca="1"] .c-panel:has(+ .c-panel + .c-panel--destacado) .c-panel__meta,
  html[data-epoca="2"] .c-panel:has(+ .c-panel + .c-panel--destacado) .c-panel__meta,
  html[data-epoca="4"] .c-panel:has(+ .c-panel + .c-panel--destacado) .c-panel__meta {
    color: var(--e-acento-nucleo);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   1 · CUEVA — el panel que tocas SE CALDEA y su pigmento se aviva.
   (Familia LUZ · «brasa que respira», llevada a la pared: el rescoldo entra por
   abajo, que es donde la piel ya tiene puesta la hoguera, y el ocre diluido del
   contorno se carga de tierra viva. 720 ms para calentarse, 2,52 s para
   enfriarse: la cueva respira, no parpadea.)
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-epoca="1"] .c-panel {
  /* la luz de esta época: la llama de marca, con el halo más grande del viaje */
  --vp-tinte: 255 106 31;
  --vp-alfa: .30;
  --vp-nucleo: 255 192 138;
  --vp-nucleo-alfa: .40;

  /* pila de la piel congelada + derrame + filo */
  box-shadow:
    inset 0 1px 0 rgba(242, 227, 210, .06),
    inset 0 -22px 40px -30px rgba(255, 106, 31, .40),
    0 26px 60px -26px rgba(5, 3, 2, .95),
    inset var(--vp-dx, 0px) var(--vp-dy, 0px) 46px -20px
          rgb(var(--vp-tinte) / calc(var(--vp-alfa) * var(--vp-luz, 0))),
    inset var(--vp-fx, 0px) var(--vp-fy, 0px) 0 0
          rgb(var(--vp-nucleo) / calc(var(--vp-nucleo-alfa) * var(--vp-luz, 0)));
  transition-duration: calc(var(--e-vel) * 3.5);
}

/* EL RESCOLDO BAJO LA PIEDRA · ::before (libre en esta época; z-index −1 de
   base.css, o sea por encima del fondo y POR DEBAJO del texto → no puede
   robarle contraste a la tinta). En reposo no existe. */
html[data-epoca="1"] .c-panel::before {
  content: "";
  background-image:
    radial-gradient(86% 92% at 10% 112%, rgba(255, 106, 31, .26), transparent 64%),
    radial-gradient(58% 52% at 80% 106%, rgba(201, 122, 61, .14), transparent 68%);
  opacity: 0;
  transition: opacity calc(var(--e-vel) * 3.5) var(--e-curva);
}
html[data-epoca="1"] .c-panel:not(.c-panel--destacado):hover::before,
html[data-epoca="1"] .c-panel:not(.c-panel--destacado):focus-within::before {
  opacity: 1;
  transition-duration: var(--e-vel);          /* entra rápido, sale lento */
}
html[data-epoca="1"] .c-panel:not(.c-panel--destacado):hover,
html[data-epoca="1"] .c-panel:not(.c-panel--destacado):focus-within {
  border-color: rgba(255, 138, 61, .44);
  transition-duration: var(--e-vel);
}

/* El rescoldo sube por la pared y se come el rótulo del pie: MEDIDO, el ocre
   lavado se quedaba en 3,96:1 sobre la brasa. Así que la brasa también enciende
   la tinta — exactamente el mismo tiempo y la misma curva que el ::before, para
   que no exista un solo fotograma con el texto frío sobre la pared caliente. */
html[data-epoca="1"] .c-panel__meta,
html[data-epoca="1"] .c-panel__cuerpo {
  transition: color calc(var(--e-vel) * 3.5) var(--e-curva);
}
html[data-epoca="1"] .c-panel:not(.c-panel--destacado):hover .c-panel__meta,
html[data-epoca="1"] .c-panel:not(.c-panel--destacado):focus-within .c-panel__meta {
  color: var(--e-acento-nucleo);
  transition-duration: var(--e-vel);
}
html[data-epoca="1"] .c-panel:not(.c-panel--destacado):hover .c-panel__cuerpo,
html[data-epoca="1"] .c-panel:not(.c-panel--destacado):focus-within .c-panel__cuerpo {
  color: var(--e-tinta);
  transition-duration: var(--e-vel);
}


/* ═══════════════════════════════════════════════════════════════════════════
   2 · PIEDRA — la ANTORCHA SE ACERCA: el bloque no se mueve, se mueve su sombra.
   (Familia LUZ · «sombra proyectada»: la sombra dura se desplaza y la difusa se
   alarga, y el canto que da a la llama coge un filo claro. La piedra jamás se
   levanta — es la ley de esta piel, y la vida no la contradice.)
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-epoca="2"] .c-panel {
  --vp-tinte: 255 138 61;
  --vp-alfa: .24;
  --vp-nucleo: 255 176 112;
  --vp-nucleo-alfa: .34;

  /* `--e2-relieve` escrito a mano para poder añadirle las dos capas de luz */
  box-shadow:
    inset 0 1px 0 rgba(207, 199, 184, .14),
    inset 0 -2px 0 rgba(0, 0, 0, .85),
    0 3px 0 rgba(0, 0, 0, .9),
    0 26px 54px -30px rgba(0, 0, 0, .95),
    inset var(--vp-dx, 0px) var(--vp-dy, 0px) 44px -20px
          rgb(var(--vp-tinte) / calc(var(--vp-alfa) * var(--vp-luz, 0))),
    inset var(--vp-fx, 0px) var(--vp-fy, 0px) 0 0
          rgb(var(--vp-nucleo) / calc(var(--vp-nucleo-alfa) * var(--vp-luz, 0)));
  transition-duration: calc(var(--e-vel) * 3.5);   /* 560 × 3.5 = 1,96 s */
}

html[data-epoca="2"] .c-panel:not(.c-panel--destacado):hover,
html[data-epoca="2"] .c-panel:not(.c-panel--destacado):focus-within {
  transform: none;                       /* la piedra NO se levanta */
  border-color: rgba(207, 199, 184, .26);
  box-shadow:
    inset 1px 1px 0 rgba(207, 199, 184, .18),   /* el canto que da a la llama */
    inset 0 -2px 0 rgba(0, 0, 0, .85),
    5px 5px 0 rgba(0, 0, 0, .9),                /* la sombra dura, desplazada */
    10px 30px 58px -30px rgba(0, 0, 0, .95),    /* y la difusa, alargada */
    inset var(--vp-dx, 0px) var(--vp-dy, 0px) 44px -20px
          rgb(var(--vp-tinte) / calc(var(--vp-alfa) * var(--vp-luz, 0))),
    inset var(--vp-fx, 0px) var(--vp-fy, 0px) 0 0
          rgb(var(--vp-nucleo) / calc(var(--vp-nucleo-alfa) * var(--vp-luz, 0)));
  transition-duration: var(--e-vel);
}


/* ═══════════════════════════════════════════════════════════════════════════
   3 · PAPEL — LA HOJA SE LEVANTA un pelo más: sube 2px y la sombra se despega.
   (Familia LUZ · «sombra proyectada» en clave de imprenta. Aquí la piel ocupa
   ::before —fibra y verjurado— y ::after —marcas de registro y sello—: no queda
   pseudo, así que la vida va sobre transiciones de lo que ya hay.
   La «pátina de uso» NO entra: un panel no tiene estado de visitado y forzarlo
   sería un segundo efecto en la misma época — la pátina vive en la nav.
   El derrame del vecino aquí no aclara: en papel la luz de al lado CALIENTA la
   hoja, la vuelve más crema. Sobre tinta negra de humo el contraste sube.)
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-epoca="3"] .c-panel {
  --vp-tinte: 206 140 78;      /* el rebote cálido de la hoja de al lado */
  --vp-alfa: .19;
  --vp-nucleo: 150 88 44;
  --vp-nucleo-alfa: .34;

  box-shadow:
    0 1px 0 rgba(255, 255, 255, .55) inset,
    0 2px 3px rgba(0, 0, 0, .40),
    0 24px 44px -22px rgba(0, 0, 0, .68),
    inset var(--vp-dx, 0px) var(--vp-dy, 0px) 40px -18px
          rgb(var(--vp-tinte) / calc(var(--vp-alfa) * var(--vp-luz, 0))),
    inset var(--vp-fx, 0px) var(--vp-fy, 0px) 0 0
          rgb(var(--vp-nucleo) / calc(var(--vp-nucleo-alfa) * var(--vp-luz, 0)));
  transition-duration: calc(var(--e-vel) * 3.5);   /* 400 × 3.5 = 1,4 s */
}

html[data-epoca="3"] .c-panel:not(.c-panel--destacado):hover,
html[data-epoca="3"] .c-panel:not(.c-panel--destacado):focus-within {
  transform: translateY(-2px);           /* el pelo que se levanta */
  border-color: var(--e3-tinta-hoja-2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .62) inset,
    0 4px 6px rgba(0, 0, 0, .44),
    0 32px 58px -22px rgba(0, 0, 0, .74),
    inset var(--vp-dx, 0px) var(--vp-dy, 0px) 40px -18px
          rgb(var(--vp-tinte) / calc(var(--vp-alfa) * var(--vp-luz, 0))),
    inset var(--vp-fx, 0px) var(--vp-fy, 0px) 0 0
          rgb(var(--vp-nucleo) / calc(var(--vp-nucleo-alfa) * var(--vp-luz, 0)));
  transition-duration: var(--e-vel);
}


/* ═══════════════════════════════════════════════════════════════════════════
   4 · HIERRO — EL FILO DE LATÓN CAPTA LA LUZ al calentarse la placa.
   (Familia FUEGO · el filamento: primero se enciende el hilo del marco, después
   la lámpara derrama. `::before` lo tiene la piel con los cuatro remaches;
   `::after` está libre y es justo lo que hace falta: un hilo de 1px pegado al
   filo interior — no cruza el texto, así que no le toca el contraste.
   240 ms de parpadeo mecánico para entrar, 840 ms para apagarse.)
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-epoca="4"] .c-panel {
  --vp-tinte: 255 176 112;
  --vp-alfa: .24;
  --vp-nucleo: 255 192 138;
  --vp-nucleo-alfa: .38;

  /* la cuarta capa es la lámpara derramando: en reposo va transparente para
     que la pila tenga el mismo recuento que en hover y pueda interpolar. */
  box-shadow:
    inset 0 1px 0 var(--e4-brillo-alto),
    inset 0 -1px 0 var(--e4-sombra-dura),
    0 28px 60px -36px var(--e4-hollin),
    0 0 30px -14px rgb(255 176 112 / 0),
    inset var(--vp-dx, 0px) var(--vp-dy, 0px) 42px -20px
          rgb(var(--vp-tinte) / calc(var(--vp-alfa) * var(--vp-luz, 0))),
    inset var(--vp-fx, 0px) var(--vp-fy, 0px) 0 0
          rgb(var(--vp-nucleo) / calc(var(--vp-nucleo-alfa) * var(--vp-luz, 0)));
  transition-duration: calc(var(--e-vel) * 3.5);
}

/* el hilo de latón por dentro del marco: apagado en reposo */
html[data-epoca="4"] .c-panel::after {
  content: "";
  box-shadow: inset 0 0 0 1px rgba(255, 192, 138, .42);
  opacity: 0;
  transition: opacity calc(var(--e-vel) * 3.5) var(--e-curva);
}
html[data-epoca="4"] .c-panel:not(.c-panel--destacado):hover::after,
html[data-epoca="4"] .c-panel:not(.c-panel--destacado):focus-within::after {
  opacity: 1;
  transition-duration: var(--e-vel);
}
html[data-epoca="4"] .c-panel:not(.c-panel--destacado):hover,
html[data-epoca="4"] .c-panel:not(.c-panel--destacado):focus-within {
  border-color: rgba(198, 164, 112, .60);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 190, .13),
    inset 0 -1px 0 var(--e4-sombra-dura),
    0 28px 60px -36px var(--e4-hollin),
    0 0 30px -14px var(--e-halo),               /* la lámpara, ya derramando */
    inset var(--vp-dx, 0px) var(--vp-dy, 0px) 42px -20px
          rgb(var(--vp-tinte) / calc(var(--vp-alfa) * var(--vp-luz, 0))),
    inset var(--vp-fx, 0px) var(--vp-fy, 0px) 0 0
          rgb(var(--vp-nucleo) / calc(var(--vp-nucleo-alfa) * var(--vp-luz, 0)));
  transition-duration: var(--e-vel);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5 · CABINA — EL CRISTAL SUBE SU FILO, SECO. 130 ms y ni un adorno.
   (La piel ya levanta el panel 2px; lo que añade la vida es la señal: el filo
   de 1px se aclara y aparece un cerco exterior de un píxel. Nada de calor —
   aquí la luz es información, y solo la trae el vecino encendido.)
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-epoca="5"] .c-panel {
  --vp-tinte: 255 106 31;
  --vp-alfa: .20;
  --vp-nucleo: 255 163 96;
  --vp-nucleo-alfa: .30;

  box-shadow:
    inset 0 1px 0 var(--e5-realce),
    0 1px 2px rgba(0, 0, 0, .5),
    0 0 0 1px rgb(238 241 246 / 0),
    inset var(--vp-dx, 0px) var(--vp-dy, 0px) 38px -18px
          rgb(var(--vp-tinte) / calc(var(--vp-alfa) * var(--vp-luz, 0))),
    inset calc(var(--vp-fx, 0px) * .5) var(--vp-fy, 0px) 0 0
          rgb(var(--vp-nucleo) / calc(var(--vp-nucleo-alfa) * var(--vp-luz, 0)));
  /* la piel no transita `box-shadow` (solo transform y borde): se amplía la
     lista sin tocar lo que ya había. */
  transition-property: transform, border-color, box-shadow;
  transition-timing-function: var(--e5-curva), linear, linear;
  transition-duration: calc(var(--e-vel) * 3.5);   /* 130 × 3.5 = 455 ms */
}

html[data-epoca="5"] .c-panel:not(.c-panel--destacado):hover,
html[data-epoca="5"] .c-panel:not(.c-panel--destacado):focus-within {
  border-color: rgba(238, 241, 246, .34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    0 1px 2px rgba(0, 0, 0, .5),
    0 0 0 1px rgb(238 241 246 / .09),
    inset var(--vp-dx, 0px) var(--vp-dy, 0px) 38px -18px
          rgb(var(--vp-tinte) / calc(var(--vp-alfa) * var(--vp-luz, 0))),
    inset calc(var(--vp-fx, 0px) * .5) var(--vp-fy, 0px) 0 0
          rgb(var(--vp-nucleo) / calc(var(--vp-nucleo-alfa) * var(--vp-luz, 0)));
  transition-duration: var(--e-vel);
}


/* ───────────────────────────────────────────────────────────────────────────
   6 · APILADO (≤760px) — la sala se pone de pie.
   Cuando la rejilla colapsa a una columna el vecino ya no está al lado sino
   debajo: la luz tiene que entrar por arriba (o por abajo), o deja de ser
   física. Solo se giran los vectores; el color y la intensidad no cambian.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  html[data-epoca="1"] .c-panel--destacado + .c-panel,
  html[data-epoca="2"] .c-panel--destacado + .c-panel,
  html[data-epoca="3"] .c-panel--destacado + .c-panel,
  html[data-epoca="4"] .c-panel--destacado + .c-panel,
  html[data-epoca="5"] .c-panel--destacado + .c-panel {
    --vp-dx: 0px;
    --vp-dy: 20px;                       /* la fuente ha quedado ARRIBA */
    --vp-fx: 0px;
    --vp-fy: 2px;
  }
  html[data-epoca="1"] .c-panel--destacado + .c-panel + .c-panel,
  html[data-epoca="2"] .c-panel--destacado + .c-panel + .c-panel,
  html[data-epoca="3"] .c-panel--destacado + .c-panel + .c-panel,
  html[data-epoca="4"] .c-panel--destacado + .c-panel + .c-panel,
  html[data-epoca="5"] .c-panel--destacado + .c-panel + .c-panel {
    --vp-dx: 0px;
    --vp-dy: 20px;
    --vp-fx: 0px;
    --vp-fy: 0px;
  }

  @supports selector(:has(*)) {
    html[data-epoca="1"] .c-panel:has(+ .c-panel--destacado),
    html[data-epoca="2"] .c-panel:has(+ .c-panel--destacado),
    html[data-epoca="3"] .c-panel:has(+ .c-panel--destacado),
    html[data-epoca="4"] .c-panel:has(+ .c-panel--destacado),
    html[data-epoca="5"] .c-panel:has(+ .c-panel--destacado) {
      --vp-dx: 0px;
      --vp-dy: -20px;                    /* la fuente ha quedado ABAJO */
      --vp-fx: 0px;
      --vp-fy: -2px;
    }
    html[data-epoca="1"] .c-panel:has(+ .c-panel + .c-panel--destacado),
    html[data-epoca="2"] .c-panel:has(+ .c-panel + .c-panel--destacado),
    html[data-epoca="3"] .c-panel:has(+ .c-panel + .c-panel--destacado),
    html[data-epoca="4"] .c-panel:has(+ .c-panel + .c-panel--destacado),
    html[data-epoca="5"] .c-panel:has(+ .c-panel + .c-panel--destacado) {
      --vp-dx: 0px;
      --vp-dy: -20px;
      --vp-fx: 0px;
      --vp-fy: 0px;
    }
  }
}


/* ───────────────────────────────────────────────────────────────────────────
   7 · MOVIMIENTO REDUCIDO — estado final, quieto. Siempre.
   La luz vecina NO se apaga: es información (dice cuál está encendido) y en
   reposo ya está quieta. Lo que se quita es el desplazamiento y el tiempo.
   ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-epoca="1"] .c-panel,
  html[data-epoca="2"] .c-panel,
  html[data-epoca="3"] .c-panel,
  html[data-epoca="4"] .c-panel,
  html[data-epoca="5"] .c-panel,
  html[data-epoca="1"] .c-panel::before,
  html[data-epoca="4"] .c-panel::after {
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    animation: none !important;
  }
  html[data-epoca="3"] .c-panel:hover,
  html[data-epoca="3"] .c-panel:focus-within {
    transform: none !important;
  }
}