/* ═══════════════════════════════════════════════════════════════════════════
   VIDA · CAMPO  —  `.c-campo` en las cinco épocas
   Capa de VIDA (contrato 07 §A). Se carga DESPUÉS de base.css y de las cinco
   hojas de época. Solo toca `.c-campo` y sus hijos.

   ── LA IDEA, ÉPOCA A ÉPOCA (una por época, ni una más) ────────────────────
     1 · CUEVA    la brasa ENTRA en el hueco excavado: sube desde el fondo del
                  agujero al enfocar y tarda en apagarse cuando lo sueltas.
     2 · PIEDRA   se acerca la ANTORCHA a la hendidura: el surco se baña de luz
                  desde el labio izquierdo. Casi no se mueve nada.
     3 · PAPEL    TINTA QUE SANGRA: el subrayado se derrama de izquierda a
                  derecha con frente irregular, y luego se asienta (se seca y
                  se afila). El error ya nació derramado, en rúbrica.
     4 · HIERRO   la placa SE ENCIENDE POR DENTRO: el filamento pega el tirón
                  de corriente y luego se queda al rojo; enfría despacio.
     5 · CABINA   el FILO SUBE, seco y preciso, y el halo llega un pelo después.

   ── LEY DEL CALOR (doctrina MATERIA §3) ───────────────────────────────────
   Nada hace hover: se calienta. ENTRA en `--e-vel`, SALE en `--e-vel × 3.5`.
   Aquí se declara una vez por época como `--vc-in` / `--vc-out`, y además se
   REESCRIBE la transición del propio `.c-campo__input` (las pieles la traen
   simétrica) para que también el borde y la sombra de la piel enfríen despacio.

   ── GANCHOS (base.css §11) ────────────────────────────────────────────────
   El `<input>` no admite pseudos: el gancho del campo es `.c-campo::before` y
   `.c-campo::after`, que base.css deja colocados como ITEMS de la rejilla en
   el área `campo` (o sea, clavados sobre la casilla) con `z-index:1` y
   `pointer-events:none`. Ninguna de las cinco pieles los usa —> los dos están
   libres y aquí se gastan enteros. Reparto constante en todo el fichero:
       ::before  = la MATERIA / el cuerpo del fenómeno (pigmento, brasa, filo)
       ::after   = lo que ese fenómeno SUELTA (resplandor, halo, sangrado)
   Al ser items de rejilla vacíos NO aportan tamaño: la caja no se mueve ni un
   píxel con esta hoja puesta (verificado midiendo con y sin ella).

   ── LÍMITES QUE ESTA HOJA NO CRUZA ────────────────────────────────────────
   · Cero JS, cero marcado, cero recursos remotos (la única imagen es una
     máscara SVG en `data:`, del mismo tipo que las que ya usa la época 3).
   · Solo se animan transform · opacity · filter · box-shadow · background-* ·
     color · máscara. Nada que dispare layout.
   · Nada de animaciones perpetuas: todo es entrada-en-estado (`:focus-within`,
     `--error`). El reposo queda quieto.

   ── EL DOBLADILLO: por qué ninguna capa toca el texto ─────────────────────
   El contraste no se ajusta a ojo aquí, se garantiza con geometría. La casilla
   mide `--e-alto-ctrl` en las cinco épocas (`38px + --e-aire × .22`, y siempre
   gana al contenido: 40,6 · 42,2 · 43,7 · 45,3 · 46,8px, medido). Dentro, la
   línea de texto va centrada, así que su borde INFERIOR cae a
       borde + padding + (interior − alto-de-línea) / 2
   del suelo de la casilla = 9,8 · 10,6 · 10,7 · 12,1 · 12,9px, o sea el
   **24,2 %** de la altura en el caso más apretado (época 1).

   Por eso TODA capa de luz de esta hoja es un dobladillo de
   `calc(var(--e-alto-ctrl) * .17)` pegado al suelo con `align-self:end`, con
   el degradado apagándose antes de su propio techo y con `blur` ≤ 1,4px. El
   difuminado la extiende como mucho ~2×radio hacia arriba: 17 % + ~5 % = 22 %,
   por debajo del 24,2 %. Consecuencia: **la vida no pone ni un fotón dentro de
   la banda de los glifos, en ningún fotograma de ninguna transición** — el
   contraste del texto y del placeholder es exactamente el de la piel congelada,
   que ya viene medido en cada `epoca-N.css`. La única capa oscura (la tinta de
   la época 3) va en el mismo dobladillo y, aun así, sobre papel le sobra margen
   (17 % de tinta sobre el papel deja 11,7:1 frente al texto).
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   ÉPOCA 1 · CUEVA — la brasa entra en el hueco
   El hueco ya está excavado y la piel ya sabe encenderlo (`inset 0 -14px …`).
   Lo que falta es el TIEMPO: la brasa entra rápido y se apaga despacio, y
   entra SUBIENDO desde el fondo del agujero en vez de aparecer de golpe.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-epoca="1"] .c-campo{
  --vc-in:  var(--e-vel);                       /* 720ms  */
  --vc-out: calc(var(--e-vel) * 3.5);           /* 2520ms */
  --vc-hem: calc(var(--e-alto-ctrl) * .17);     /* 6,9px — el dobladillo */
}

/* La piel transiciona a la misma velocidad en los dos sentidos: aquí se parte
   en dos. Reposo = el tiempo de ENFRIAR (lo que manda cuando sueltas). */
html[data-epoca="1"] .c-campo__input{
  transition:
    border-color     var(--vc-out) var(--e-curva),
    box-shadow       var(--vc-out) var(--e-curva),
    background-color var(--vc-out) var(--e-curva);
}
html[data-epoca="1"] .c-campo__input:focus,
html[data-epoca="1"] .c-campo__input:focus-visible{
  transition-duration: var(--vc-in);
}

/* ::before — LA BRASA. Vive por debajo de la casilla y SUBE a meterse en el
   hueco: entra desplazándose y creciendo desde el suelo (`transform-origin`
   abajo), que es lo que la distingue de un fundido. Dobladillo: ni un fotón
   dentro de la banda de los glifos. */
html[data-epoca="1"] .c-campo::before{
  content: "";
  align-self: end;
  height: var(--vc-hem);
  border-radius: 0 0 6px 11px / 0 0 12px 6px;    /* el del input, esquinas de abajo */
  mix-blend-mode: screen;                        /* es luz: solo puede aclarar */
  background:
    radial-gradient(122% 340% at 50% 128%,
      rgba(255, 106,  31, .62)  0%,
      rgba(255, 106,  31, .30) 36%,
      rgba(201,  60,  10, .10) 58%,
      transparent 76%);
  opacity: 0;
  transform: translate3d(0, 7px, 0) scaleY(.5);
  transform-origin: 50% 100%;
  filter: blur(2.2px);
  transition:
    opacity   var(--vc-out) var(--e-curva),
    transform var(--vc-out) var(--e-curva),
    filter    var(--vc-out) var(--e-curva);
}
html[data-epoca="1"] .c-campo:focus-within::before{
  opacity: 1;
  transform: translate3d(0, 0, 0) scaleY(1);
  filter: blur(1.1px);
  transition-duration: var(--vc-in);
}

/* ::after — LOS DOS CARBONES VIVOS del fondo del hueco: dos puntos incandes-
   centes en el mismísimo labio, que es lo que hace que la brasa tenga sitio y
   no sea un degradado. Se apagan más tarde que el resplandor: la brasa siempre
   sobrevive a la llama. */
html[data-epoca="1"] .c-campo::after{
  content: "";
  align-self: end;
  height: var(--vc-hem);
  border-radius: 0 0 6px 11px / 0 0 12px 6px;
  mix-blend-mode: screen;
  background:
    radial-gradient(28% 62% at 31% 100%, rgba(255, 192, 138, .62), transparent 70%),
    radial-gradient(19% 48% at 73% 100%, rgba(255, 192, 138, .44), transparent 72%);
  opacity: 0;
  transform: translate3d(0, 4px, 0);
  filter: blur(1.2px);
  transition:
    opacity   calc(var(--vc-out) * 1.25) linear,
    transform var(--vc-out) var(--e-curva);
}
html[data-epoca="1"] .c-campo:focus-within::after{
  opacity: .95;
  transform: translate3d(0, 0, 0);
  transition-duration: var(--vc-in);
}

/* Error: la brasa está encendida SIN que nadie la haya tocado — y no es la
   llama de marca, es la tierra quemada del error de esta época. */
html[data-epoca="1"] .c-campo--error::before{
  opacity: .82;
  transform: translate3d(0, 0, 0) scaleY(1);
  filter: blur(1.4px);
  background:
    radial-gradient(122% 340% at 50% 128%,
      rgba(238, 124, 82, .56)  0%,
      rgba(238, 124, 82, .24) 38%,
      transparent 72%);
}
html[data-epoca="1"] .c-campo--error::after{ opacity: 0; }   /* sin carbones: no arde, escuece */

/* Deshabilitado: el hueco está frío y ahí no entra nada. */
html[data-epoca="1"] .c-campo:has(.c-campo__input:disabled)::before,
html[data-epoca="1"] .c-campo:has(.c-campo__input:disabled)::after{ opacity: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   ÉPOCA 2 · PIEDRA — se acerca la antorcha a la hendidura
   La piedra no se mueve. Lo que se mueve es QUIEN LLEVA LA LUZ: el baño entra
   por el labio izquierdo del surco, crece un 6% (la antorcha se acerca) y se
   retira despacio. Ni un desplazamiento del bloque.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-epoca="2"] .c-campo{
  --vc-in:  var(--e-vel);                       /* 560ms  */
  --vc-out: calc(var(--e-vel) * 3.5);           /* 1960ms */
  --vc-hem: calc(var(--e-alto-ctrl) * .17);     /* 7,2px — el dobladillo */
}

html[data-epoca="2"] .c-campo__input{
  transition:
    border-color var(--vc-out) var(--e2-curva),
    box-shadow   var(--vc-out) var(--e2-curva);
}
html[data-epoca="2"] .c-campo__input:focus,
html[data-epoca="2"] .c-campo__input:focus-visible{
  transition-duration: var(--vc-in);
}

/* ::before — EL BAÑO DE LA ANTORCHA. Luz RASANTE, que es como se ve una talla:
   entra por el ángulo de la izquierda y se apaga antes del centro. Lo único
   que se mueve es el foco de luz — escala 6% con el origen en la esquina baja
   izquierda, donde estaría la mano que la sostiene. La piedra, quieta. */
html[data-epoca="2"] .c-campo::before{
  content: "";
  align-self: end;
  height: var(--vc-hem);
  border-radius: 0 0 2px 2px;
  mix-blend-mode: screen;
  background:
    linear-gradient(101deg,
      rgba(255, 138, 61, .40)  0%,
      rgba(255, 138, 61, .15) 26%,
      transparent 54%),
    radial-gradient(128% 300% at 40% 132%,
      rgba(255, 138, 61, .34)  0%,
      rgba(255, 138, 61, .11) 42%,
      transparent 72%);
  opacity: 0;
  transform: scale(.94);
  transform-origin: 12% 100%;                    /* el foco de luz, no el bloque */
  filter: blur(1.4px);
  transition:
    opacity   var(--vc-out) var(--e2-curva),
    transform var(--vc-out) var(--e2-curva);
}
html[data-epoca="2"] .c-campo:focus-within::before{
  opacity: 1;
  transform: scale(1);
  transition-duration: var(--vc-in);
}

/* ::after — EL LABIO DE PIEDRA QUE COGE LA LUZ: el filo inferior del surco,
   que es lo único que en una talla te dice dónde acaba el hueco. */
html[data-epoca="2"] .c-campo::after{
  content: "";
  align-self: end;
  height: var(--vc-hem);
  border-radius: 0 0 2px 2px;
  mix-blend-mode: screen;
  background:
    linear-gradient(90deg,
      transparent 4%,
      rgba(255, 208, 160, .46) 24%,
      rgba(255, 208, 160, .54) 46%,
      rgba(255, 208, 160, .30) 78%,
      transparent 96%)
    center bottom 1px / 100% 1.5px no-repeat;
  opacity: 0;
  filter: blur(.5px);
  transition: opacity var(--vc-out) linear;
}
html[data-epoca="2"] .c-campo:focus-within::after{
  opacity: 1;
  transition-duration: var(--vc-in);
}

/* Error: la grieta ya estaba ahí antes de que llegases con la antorcha. */
html[data-epoca="2"] .c-campo--error::before{
  opacity: .84;
  transform: scale(1);
  background:
    linear-gradient(101deg, rgba(224, 118, 75, .34) 0%, rgba(224,118,75,.12) 26%, transparent 54%),
    radial-gradient(128% 300% at 40% 132%, rgba(224, 118, 75, .30) 0%, transparent 70%);
}
html[data-epoca="2"] .c-campo--error::after{ opacity: 0; }

html[data-epoca="2"] .c-campo:has(.c-campo__input:disabled)::before,
html[data-epoca="2"] .c-campo:has(.c-campo__input:disabled)::after{ opacity: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   ÉPOCA 3 · PAPEL — TINTA QUE SANGRA
   El único efecto grande del componente. El renglón seco de la piel
   (`border-bottom`) recibe una pasada de tinta MOJADA que se derrama de
   izquierda a derecha con frente irregular y luego SE ASIENTA: pierde
   difuminado, se afila y suelta el sangrado que se queda en la fibra.

   ── CÓMO SE HACE EL DERRAME (y por qué no es un `width` animado) ──────────
   La tinta se pinta ENTERA desde el primer fotograma, con sus pozos y su carga
   desigual. Lo que viaja es la MÁSCARA, que además no es un rectángulo: es la
   silueta de una pasada de pluma (SVG en `data:`, un rect al que un
   `feDisplacementMap` con `feTurbulence` le come a la vez el borde de arriba y
   el de la derecha). Se declara a `mask-size: 300% 100%` y se mueve con
   `mask-position` de `100%` (fuera, a la derecha) a `0%` (dentro del todo).
   Las cuatro consecuencias son justo lo que separa un derrame de una barra:
     · el frente es DENTADO y distinto a cada altura, no una recta vertical;
     · el frente es SUAVE (el degradado de alfa de la máscara): la tinta se
       adelanta aguada y luego llena;
     · el trazo ENGORDA Y ADELGAZA a lo largo del renglón — el perfil de arriba
       también está mordido, y los pozos ya estaban pintados donde tocan, así
       que no crecen con el frente: aparecen;
     · el difuminado (`filter: blur`) va MÁS LENTO que la máscara, así que la
       tinta llega al final todavía mojada y se seca DESPUÉS: dos tiempos con
       una sola transición y sin una línea de JS.
   Medido en el banco (`vida-campo/`, luminancia media del renglón por columnas,
   con la transición congelada): al 22 % del vuelo el renglón va de 0,570 a la
   izquierda a 0,626 a la derecha, y al 32 % de 0,508 a 0,604. El frente existe
   y se mueve; a partir del 70 % ya está puesto y lo que sigue es el secado.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-epoca="3"] .c-campo{
  --vc-in:  var(--e-vel);                        /* 400ms  */
  --vc-out: calc(var(--e-vel) * 3.5);            /* 1400ms */
  --vc-hem: calc(var(--e-alto-ctrl) * .23);      /* 10,1px — el dobladillo del renglón */

  /* EL TRAZO MOJADO, hecho máscara. No es un rectángulo que se destapa: es la
     silueta de una pasada de pluma. Un rect que ocupa la mitad baja del lienzo
     y al que un `feDisplacementMap` con `feTurbulence` le come a la vez el
     borde de ARRIBA (el perfil irregular del trazo) y el de la DERECHA (el
     frente mojado, que además va aguado por el degradado de alfa).
     A `mask-size:300%` la ventana visible es un tercio del dibujo: en `100%`
     cae en la zona vacía y en `0%` en la zona llena, y todo el viaje de en
     medio pasa por el dentado. Mismo truco que el `--e3-mordido` de la piel. */
  --vc-frente: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='96' viewBox='0 0 1200 96' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-6%25' y='-70%25' width='112%25' height='260%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0072 0.155' numOctaves='3' seed='13' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='26' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.34' stop-color='%23fff'/%3E%3Cstop offset='.46' stop-color='%23fff' stop-opacity='.52'/%3E%3Cstop offset='.60' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect y='64' width='1200' height='32' fill='url(%23g)' filter='url(%23b)'/%3E%3C/svg%3E");

  --vc-pigmento: var(--e3-tinta-hoja);
}

/* La piel ya cambia el filete al enfocar; que también tarde en secarse. */
html[data-epoca="3"] .c-campo__input{
  transition:
    border-color var(--vc-out) linear,
    box-shadow   var(--vc-out) linear,
    color        var(--vc-out) linear;
}
html[data-epoca="3"] .c-campo__input:focus,
html[data-epoca="3"] .c-campo__input:focus-visible{
  transition-duration: var(--vc-in);
}

/* ::before — EL PIGMENTO. Dobladillo de 10,1px pegado al renglón (23 % de la
   casilla: por debajo de cualquier descendente, que empieza en el 24,4 %). */
html[data-epoca="3"] .c-campo::before{
  content: "";
  align-self: end;
  height: var(--vc-hem);
  border-radius: 0;
  background:
    /* pozos: donde la pluma se ha entretenido. Radios y alturas TODOS distintos
       —es lo que hace que el trazo engorde y adelgace y no parezca una barra— */
    radial-gradient( 9px 6.2px at 13% 102%, color-mix(in oklab, var(--vc-pigmento) 94%, transparent), transparent 72%),
    radial-gradient(16px 3.6px at 31% 102%, color-mix(in oklab, var(--vc-pigmento) 86%, transparent), transparent 78%),
    radial-gradient( 7px 7.1px at 46% 102%, color-mix(in oklab, var(--vc-pigmento) 92%, transparent), transparent 70%),
    radial-gradient(21px 3.2px at 63% 102%, color-mix(in oklab, var(--vc-pigmento) 82%, transparent), transparent 80%),
    radial-gradient( 8px 6.6px at 81% 102%, color-mix(in oklab, var(--vc-pigmento) 90%, transparent), transparent 70%),
    radial-gradient(13px 4.1px at 95% 102%, color-mix(in oklab, var(--vc-pigmento) 84%, transparent), transparent 76%),
    /* la carga de tinta: densa abajo, aguada arriba. El PERFIL del trazo no lo
       pone este degradado (sería una barra), lo pone la máscara. */
    linear-gradient(to top,
      var(--vc-pigmento) 0 30%,
      color-mix(in oklab, var(--vc-pigmento) 80%, transparent) 46%,
      color-mix(in oklab, var(--vc-pigmento) 42%, transparent) 60%,
      transparent 78%);
  -webkit-mask-image: var(--vc-frente);
          mask-image: var(--vc-frente);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 300% 100%;
          mask-size: 300% 100%;
  -webkit-mask-position: 100% 50%;
          mask-position: 100% 50%;
  opacity: 0;
  filter: blur(2.4px);
  transition:
    -webkit-mask-position var(--vc-out) cubic-bezier(.30,.42,.30,1),
            mask-position var(--vc-out) cubic-bezier(.30,.42,.30,1),
    opacity calc(var(--vc-out) * .55) linear,
    filter  var(--vc-out) linear;                /* el secado, siempre por detrás */
}
html[data-epoca="3"] .c-campo:focus-within::before{
  opacity: 1;
  -webkit-mask-position: 0% 50%;
          mask-position: 0% 50%;
  filter: blur(.4px);                             /* asentada: la tinta se afila */
  transition-duration:
    var(--vc-in),                                 /* el derrame: rápido        */
    var(--vc-in),
    calc(var(--vc-in) * .28),                     /* la pluma toca: instantáneo */
    calc(var(--vc-in) * 2.4);                     /* el secado: va por detrás   */
}

/* ::after — EL SANGRADO EN LA FIBRA. No corre con el frente: aparece DESPUÉS,
   cuando la tinta ya está puesta y el papel empieza a chuparla hacia arriba.
   Muy poco alfa: aquí es donde se juega el contraste del texto. */
html[data-epoca="3"] .c-campo::after{
  content: "";
  align-self: end;
  height: calc(var(--e-alto-ctrl) * .14);        /* 6,1px: un asomo, no una sombra */
  border-radius: 0;
  background:
    linear-gradient(to top,
      color-mix(in oklab, var(--vc-pigmento) 13%, transparent) 0%,
      color-mix(in oklab, var(--vc-pigmento) 5%,  transparent) 32%,
      transparent 62%);
  opacity: 0;
  filter: blur(1.4px);
  transition: opacity var(--vc-out) linear;
}
html[data-epoca="3"] .c-campo:focus-within::after{
  opacity: 1;
  transition-duration: calc(var(--vc-in) * 1.6);
  transition-delay: calc(var(--vc-in) * .82);     /* primero se escribe, luego cala */
}

/* Error: la corrección del cajista ya venía sangrada de fábrica. El pigmento
   es la RÚBRICA y el trazo está entero: nadie va a verlo derramarse. */
html[data-epoca="3"] .c-campo--error{
  --vc-pigmento: var(--e3-rubrica);
}
html[data-epoca="3"] .c-campo--error::before{
  opacity: 1;
  -webkit-mask-position: 0% 50%;
          mask-position: 0% 50%;
  filter: blur(.6px);
}
html[data-epoca="3"] .c-campo--error::after{ opacity: 1; }

/* El renglón que nadie ha rellenado no se moja. */
html[data-epoca="3"] .c-campo:has(.c-campo__input:disabled)::before,
html[data-epoca="3"] .c-campo:has(.c-campo__input:disabled)::after{ opacity: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   ÉPOCA 4 · HIERRO — la placa se enciende por dentro
   El hueco de la placa no es un agujero: es una lámpara con el filamento
   dentro. Al enfocar hay TIRÓN DE CORRIENTE (la curva de `filter` se pasa de
   frenada y vuelve: eso es el fogonazo del tungsteno) y al soltar el metal
   sigue al rojo un rato largo. Es la época donde la ley del calor se ve mejor.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-epoca="4"] .c-campo{
  --vc-in:  var(--e-vel);                        /* 240ms */
  --vc-out: calc(var(--e-vel) * 3.5);            /* 840ms */
  --vc-hem: calc(var(--e-alto-ctrl) * .17);      /* 7,7px — el dobladillo */
}

html[data-epoca="4"] .c-campo__input{
  transition:
    border-color var(--vc-out) ease,
    box-shadow   var(--vc-out) ease;
}
html[data-epoca="4"] .c-campo__input:focus,
html[data-epoca="4"] .c-campo__input:focus-visible{
  transition-duration: var(--vc-in);
}

/* ::before — EL FILAMENTO. Hilo de 1,4px tendido en el tercio bajo del hueco,
   con los soportes oscuros en los extremos (por eso el degradado no llega a
   los bordes) y el núcleo más claro que las puntas, como una bombilla real. */
html[data-epoca="4"] .c-campo::before{
  content: "";
  align-self: end;
  height: var(--vc-hem);
  border-radius: 0 0 var(--e-radio) var(--e-radio);
  mix-blend-mode: screen;
  background:
    linear-gradient(90deg,
      transparent 7%,
      rgba(255, 176, 112, .55) 15%,
      var(--e-acento-nucleo) 34%,
      var(--e-acento-nucleo) 66%,
      rgba(255, 176, 112, .55) 85%,
      transparent 93%)
    center bottom 3px / 100% 1.4px no-repeat;
  opacity: 0;
  filter: brightness(.55) blur(.6px);
  transition:
    opacity var(--vc-out) ease,
    filter  var(--vc-out) ease;
}
html[data-epoca="4"] .c-campo:focus-within::before{
  opacity: 1;
  filter: brightness(1) blur(.35px);
  transition-duration: var(--vc-in);
  transition-timing-function: cubic-bezier(.2,.85,.3,1), cubic-bezier(.16,1.9,.4,1);
  /* ↑ la segunda curva se pasa del destino y vuelve: el fogonazo del encendido */
}

/* ::after — LO QUE EL FILAMENTO SUELTA: el resplandor que llena el fondo del
   hueco. Mismo dobladillo, así que la línea del dato ni se entera. */
html[data-epoca="4"] .c-campo::after{
  content: "";
  align-self: end;
  height: var(--vc-hem);
  border-radius: 0 0 var(--e-radio) var(--e-radio);
  mix-blend-mode: screen;
  background:
    radial-gradient(66% 260% at 50% 116%,
      rgba(255, 176, 112, .50)  0%,
      rgba(255, 176, 112, .19) 44%,
      transparent 74%);
  opacity: 0;
  filter: blur(1.4px);
  transition: opacity var(--vc-out) ease;
}
html[data-epoca="4"] .c-campo:focus-within::after{
  opacity: 1;
  transition-duration: var(--vc-in);
  transition-timing-function: cubic-bezier(.16,1.6,.4,1);
}

/* Error: la placa está caliente sin corriente. El óxido no alumbra: mancha. */
html[data-epoca="4"] .c-campo--error::before{
  opacity: .9;
  filter: brightness(.92) blur(.4px);
  background:
    linear-gradient(90deg,
      transparent 7%,
      rgba(232, 138, 106, .5) 15%,
      #E88A6A 34%,
      #E88A6A 66%,
      rgba(232, 138, 106, .5) 85%,
      transparent 93%)
    center bottom 3px / 100% 1.4px no-repeat;
}
html[data-epoca="4"] .c-campo--error::after{
  opacity: .78;
  background:
    radial-gradient(66% 260% at 50% 116%,
      rgba(232, 138, 106, .36) 0%,
      rgba(232, 138, 106, .13) 46%,
      transparent 74%);
}

html[data-epoca="4"] .c-campo:has(.c-campo__input:disabled)::before,
html[data-epoca="4"] .c-campo:has(.c-campo__input:disabled)::after{ opacity: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   ÉPOCA 5 · CABINA — el filo sube seco y preciso
   Aquí no arde nada: se ENCIENDE UN INDICADOR. El filo sube 3px hasta su sitio
   en 130ms con una curva sin rebote, y el halo llega 40ms DESPUÉS — el orden
   importa: primero el dato, luego su luz. Al soltar, se retira sin prisa
   (la ley del calor manda también en la sala fría).
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-epoca="5"] .c-campo{
  --vc-in:  var(--e-vel);                        /* 130ms */
  --vc-out: calc(var(--e-vel) * 3.5);            /* 455ms */
  --vc-hem: calc(var(--e-alto-ctrl) * .17);      /* 8,0px — el dobladillo */
}

html[data-epoca="5"] .c-campo__input{
  transition:
    border-color     var(--vc-out) var(--e5-curva),
    box-shadow       var(--vc-out) var(--e5-curva),
    background-color var(--vc-out) var(--e5-curva);
}
html[data-epoca="5"] .c-campo__input:focus,
html[data-epoca="5"] .c-campo__input:focus-visible{
  transition-duration: var(--vc-in);
}

/* ::before — EL HALO DEL FILO. Va por detrás y llega tarde: 40ms de retraso al
   encender, y al apagar se va el primero (la luz nunca sobrevive a su fuente). */
html[data-epoca="5"] .c-campo::before{
  content: "";
  align-self: end;
  height: var(--vc-hem);
  border-radius: 0 0 var(--e5-radio-chico) var(--e5-radio-chico);
  mix-blend-mode: screen;
  background:
    radial-gradient(60% 240% at 50% 116%,
      rgba(255, 106, 31, .42)  0%,
      rgba(255, 106, 31, .14) 48%,
      transparent 76%);
  opacity: 0;
  filter: blur(1.4px);
  transition: opacity var(--vc-out) var(--e5-curva);
}
html[data-epoca="5"] .c-campo:focus-within::before{
  opacity: 1;
  transition-duration: var(--vc-in);
  transition-delay: calc(var(--vc-in) * .3);      /* ≈40ms detrás del filo */
}

/* ::after — EL FILO. Línea de 2px que sube a su carril y se para en seco.
   Se acorta en los extremos porque la casilla tiene radio: un filo recto no
   puede sobresalir de una esquina redondeada. */
html[data-epoca="5"] .c-campo::after{
  content: "";
  align-self: end;
  height: var(--vc-hem);
  border-radius: 0 0 var(--e5-radio-chico) var(--e5-radio-chico);
  background:
    linear-gradient(90deg,
      transparent 5%,
      var(--e-acento) 14%,
      var(--e-acento-nucleo) 50%,
      var(--e-acento) 86%,
      transparent 95%)
    center bottom 1px / 100% 2px no-repeat;
  opacity: 0;
  transform: translate3d(0, 3px, 0);
  transition:
    opacity   var(--vc-out) var(--e5-curva),
    transform var(--vc-out) var(--e5-curva);
}
html[data-epoca="5"] .c-campo:focus-within::after{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition-duration: var(--vc-in);
}

/* Error: en una época de un solo acento, la alarma es la misma luz puesta
   donde no toca — encendida sola, sin que nadie haya enfocado. */
html[data-epoca="5"] .c-campo--error::before{ opacity: .85; }
html[data-epoca="5"] .c-campo--error::after{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html[data-epoca="5"] .c-campo:has(.c-campo__input:disabled)::before,
html[data-epoca="5"] .c-campo:has(.c-campo__input:disabled)::after{ opacity: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO — la vida se queda quieta, sin perder ni un dato
   base.css ya corta las duraciones; aquí se remata cortando la transición por
   completo y quitando los desplazamientos de reposo, para que encender no
   mueva nada: solo encienda. Nada de información depende del movimiento — el
   estado enfocado se pinta entero, de golpe, exactamente igual que al final de
   la animación (verificado: las cinco épocas dan la MISMA captura con y sin
   `prefers-reduced-motion`, salvo 939 píxeles del campo de error de la época 1
   que difieren en ±1 de un canal por redondeo del `screen`).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){

  html[data-epoca="1"] .c-campo__input,
  html[data-epoca="2"] .c-campo__input,
  html[data-epoca="3"] .c-campo__input,
  html[data-epoca="4"] .c-campo__input,
  html[data-epoca="5"] .c-campo__input,
  html[data-epoca="1"] .c-campo::before, html[data-epoca="1"] .c-campo::after,
  html[data-epoca="2"] .c-campo::before, html[data-epoca="2"] .c-campo::after,
  html[data-epoca="3"] .c-campo::before, html[data-epoca="3"] .c-campo::after,
  html[data-epoca="4"] .c-campo::before, html[data-epoca="4"] .c-campo::after,
  html[data-epoca="5"] .c-campo::before, html[data-epoca="5"] .c-campo::after{
    transition: none !important;
    transition-delay: 0ms !important;
  }

  /* Nada espera fuera de su sitio: las capas apagadas dejan de estar
     desplazadas, así que encender no mueve nada, solo enciende. */
  html[data-epoca="1"] .c-campo::before{ transform: none; }
  html[data-epoca="1"] .c-campo::after { transform: none; }
  html[data-epoca="2"] .c-campo::before{ transform: none; }
  html[data-epoca="5"] .c-campo::after { transform: none; }

  /* Los valores del estado enfocado NO se repiten aquí a propósito: sin
     transición, la regla de `:focus-within` YA entrega su estado final (tinta
     asentada, filamento al rojo, filo en su carril). Duplicarlos solo serviría
     para que un día se separaran — de hecho ya pasó, y por eso no están. */
}