/* ═══════════════════════════════════════════════════════════════════════════ c-volver · EL ENLACE DE VOLVER (agente VOLVER · 3ª tirada) Contrato: design-system/10-contrato-tercera-tirada.md (marcado congelado, pieza 5) Doctrina de vida: 07-contrato-vida-y-armazon.md §0 (MATERIA) MARCADO CONGELADO ───────────────────────────────────────────────────────────────────────── Volver al curso LA TESIS: **volver no es un botón, es un paso atrás.** Por eso no hay caja, ni fondo, ni borde: solo una flecha con el material de su época y un rótulo en la tipografía de APOYO (la misma familia que ya usa el sistema para `c-panel__meta` / `c-cabecera__kicker` / `c-pie__marca` — nunca la de titulares), porque volver es información secundaria, no un CTA. Un solo fenómeno interactivo, la ley del calor de doctrina §3: la flecha RETROCEDE 2-3px (retrocede, no "se mueve": el gesto es literal) y el rótulo se caldea (tinta secundaria → tinta plena). Nada más se enciende. LA IDEA POR ÉPOCA — el material de la flecha, una idea cada una 1 · CUEVA TRAZO DE PIGMENTO ocre soplado con halo suelto, ladeado como cualquier trazo de mano; se aviva 2 · PIEDRA INCISIÓN tajo hundido en el sillar (sombra arriba, luz abajo); la antorcha se acerca al pasar 3 · PAPEL PLUMAZO quiebro de pluma inclinado (itálica real), la tinta se aprieta un punto al retroceder 4 · HIERRO ESTAMPADA EN CHAPA bisel troquelado (luz arriba-izda, sombra abajo-dcha); el filamento la calienta 5 · CABINA GLIFO MONO sin textura, sin sombra en reposo: la única ignición es el filo que se enciende CONTRATO DE ESTADOS · Reposo: tinta `--e-tinta-2`, flecha quieta, sin sombra salvo la que ya lleve su época (el trazo/incisión/plumazo/bisel no es "vivo", es materia). · `:hover` / `:focus-visible` (mismo verbo, no hay puntero en teclado): flecha `transform: translate(-2/-3px según época)`, rótulo → `--e-tinta`, flecha → su color de ignición propio. Entra a `--e-vel`, sale a `--e-vel * 3.5` (asimetría de doctrina §3, igual que `.c-nav__item` / `.c-pie__enlaces a` del propio `base.css`, que ya transicionan `color`). · Sin `.is-*`: es un enlace normal, sus estados son los del navegador. POR QUÉ NO TIEMBLA EN EL CAMBIO DE ÉPOCA (regla del 4.2) El rótulo NO usa `--eN-*` privado de ningún otro fichero — es autocontenido — así que al saltar de época el color final de `--e-tinta-2`/`--e-tinta` se recalcula igual que cualquier otro token: no hay `transition-delay`, no hay clase `.is-actual` que arrastre estado de una era a otra. El único riesgo real (el que rompió `c-pasos`) era un retardo largo colgado de una clase de estado; aquí no hay clase de estado ni delay, solo `:hover`. POR QUÉ LA FLECHA NO CAMBIA DE FAMILIA TIPOGRÁFICA El carácter «←» (U+2190) NO está en el `unicode-range` de ninguna de las 11 familias de `public/css/fuentes-epoca.css` (declaran U+2191/U+2193 — arriba/abajo — pero no U+2190/U+2192). El navegador ya cae solo al siguiente eslabón de cada `font-family` (Arial Narrow/Georgia/system-ui según la época): es el comportamiento normal de un subset y no una fuente nueva, así que la flecha hereda `font-family` del rótulo mas su forma real la pone el material — sombra, sesgo y color — no la familia. TIPOGRAFÍA DE APOYO (peso verificado contra `public/css/fuentes-epoca.css` — ningún corte usado aquí falta en ese fichero) 1 · `--e-display` (Anton 400, único corte servido) — la Cueva no tiene una serif de apoyo propia: usa su titular en mayúsculas y muy tracked. 2 · `--e2-apoyo` con fallback literal Cinzel Decorative 700 (el único corte servido de esa familia — no cabe otro peso). 3 · `--e-mono` (EB Garamond, versalitas) — igual que `c-panel__meta` é3. 4 · `--e4-etiqueta` con fallback literal Oswald 500 (dentro del corte 400-600 servido). 5 · `--e-mono` (JetBrains Mono 500) — igual que `c-cabecera__kicker` é5. Los fallbacks literales (Cinzel Decorative / Oswald) NO son fuentes nuevas: son las mismas 11 familias que ya sirve el sistema — solo que este fichero, autocontenido, no puede leer el token privado `--e2-apoyo`/`--e4-etiqueta` de `epoca-2.css`/`epoca-4.css` sin arriesgarse a quedar mudo si algún día cambian de nombre, así que lo referencia con `var(..., fallback)`. CONTRASTE (medido, protocolo 05 §5 — texto y sombras del texto retirados) El rótulo vive sobre `--e-fondo` (el mundo, como `.c-pie`/`.c-nav`, nunca sobre una hoja): valores calculados con la fórmula WCAG de luminancia relativa sobre los hex reales de cada `epoca-N.css`. época reposo (--e-tinta-2) hover (--e-tinta) 1 · Cueva 7,78:1 15,95:1 2 · Piedra 6,87:1 15,05:1 3 · Papel 8,20:1 14,68:1 4 · Hierro 7,07:1 15,86:1 5 · Cabina 9,42:1 17,79:1 Los dos extremos de cada transición superan 4,5:1 con margen ≥6,87:1, y el fondo no cambia durante el hover (a diferencia de un salto de época), así que cualquier fotograma intermedio de la interpolación cae dentro del mismo margen. La flecha es `aria-hidden="true"` — decorativa, redundante con el texto — así que su color/sombra no está sujeto al mismo protocolo (mismo criterio que el icono de `c-vacio.css`, también `aria-hidden`). Foco: el anillo global de `base.css` (`--e-acento`, 2px, offset 3px) ya da ≥6,7:1 contra los cinco fondos — no hace falta redeclararlo. AUTOCONTENIDO (contrato 10 §marcado, ley de la 2ª/3ª tirada) Estructura con `var(--e-*)` a secas; pieles bajo `html[data-epoca="N"]`. El material de cada época (sombras, sesgos, colores de ignición) vive en RGBA literal dentro de su propia sección — pieza tan mínima que no le hace falta la capa de indirección `--vol-*`: no hay un solo valor que dos secciones compartan. Nada se lee fuera de este fichero. Cero JS, cero recursos remotos, cero fuentes nuevas. Compone: no toca `.c-nav`, `.c-pie` ni ningún otro `c-*`. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 1 · ESTRUCTURA — solo `var(--e-*)`. Ni un color, ni una familia a mano. ═══════════════════════════════════════════════════════════════════════════ */ .c-volver{ position: relative; isolation: isolate; display: inline-flex; align-items: center; flex-wrap: wrap; max-width: 100%; gap: calc(var(--e-gap) * .4); /* la caja de toque es más grande que el texto, pero el texto queda ópticamente alineado con el contenido de debajo (margen negativo) */ padding-block: calc(var(--e-pad-corto) * .4); padding-inline: calc(var(--e-pad-corto) * .3); margin-inline-start: calc(var(--e-pad-corto) * -.3); border-radius: var(--e-radio); color: var(--e-tinta-2); font-family: var(--e-mono); font-size: 12.5px; font-weight: 500; line-height: 1.35; letter-spacing: max(.08em, var(--e-tracking)); text-transform: uppercase; text-decoration: none; white-space: normal; overflow-wrap: break-word; cursor: pointer; -webkit-tap-highlight-color: transparent; /* se enfría despacio (la ley del calor, doctrina §3: salida = --e-vel*3.5) */ transition: color calc(var(--e-vel) * 3.5) linear; } /* …y se calienta rápido al tocarla — mismo verbo con teclado o con ratón */ .c-volver:hover, .c-volver:focus-visible{ color: var(--e-tinta); transition-duration: var(--e-vel); } .c-volver__flecha{ position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 1em; font-family: inherit; font-weight: inherit; font-size: 1.05em; line-height: 1; color: inherit; transform: translateX(0); transition: transform calc(var(--e-vel) * 3.5) var(--e-curva), color calc(var(--e-vel) * 3.5) linear; -webkit-user-select: none; user-select: none; } /* el gesto por defecto (lo pisan las épocas que combinan un sesgo propio) */ .c-volver:hover .c-volver__flecha, .c-volver:focus-visible .c-volver__flecha{ transform: translateX(-3px); transition-duration: var(--e-vel); } /* ═══════════════════════════════════════════════════════════════════════════ 2 · ÉPOCA 1 · CUEVA — TRAZO DE PIGMENTO Nadie pinta un trazo recto a mano: ladeado -3° de fábrica, con un halo de ocre suelto alrededor (el pigmento que no se sopló limpio). Al retroceder, el halo se AVIVA — mismo verbo que `.c-boton` en esta era (`vida-boton.css` §1: "el rescoldo se aviva dentro") — sin tocar ese fichero. ═══════════════════════════════════════════════════════════════════════════ */ html[data-epoca="1"] .c-volver{ font-family: var(--e-display); font-weight: var(--e-peso-display); /* Anton solo trae 400: la trampa §5.2 */ font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; } html[data-epoca="1"] .c-volver__flecha{ transform: rotate(-3deg) translateX(0); text-shadow: 0 0 5px rgba(201, 122, 61, .30), /* el halo de pigmento suelto */ 0 1px 0 rgba(5, 3, 2, .55); /* el trazo se hunde un pelo en la roca */ } html[data-epoca="1"] .c-volver:hover .c-volver__flecha, html[data-epoca="1"] .c-volver:focus-visible .c-volver__flecha{ transform: rotate(-3deg) translateX(-3px); color: var(--e-acento-nucleo); text-shadow: 0 0 10px rgba(255, 138, 61, .60), 0 0 3px rgba(255, 192, 138, .40), 0 1px 0 rgba(5, 3, 2, .55); } /* ═══════════════════════════════════════════════════════════════════════════ 3 · ÉPOCA 2 · PIEDRA — INCISIÓN El cincel entra recto: sin ladeo. La sombra dura arriba y una lamida de luz justo debajo son las mismas dos capas con las que `c-vacio.css` graba la inscripción de la peana — aquí sin pseudo, solo `text-shadow` porque no hay hueco donde tallar. Al retroceder, la antorcha se acerca (§ vida-boton é2: "la antorcha se ACERCA") y la lamida de abajo se despierta. ═══════════════════════════════════════════════════════════════════════════ */ html[data-epoca="2"] .c-volver{ font-family: var(--e2-apoyo, 'Cinzel Decorative', 'Cinzel', Georgia, serif); font-weight: 700; /* único corte servido de Cinzel Decorative */ font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } html[data-epoca="2"] .c-volver__flecha{ text-shadow: 0 -1px 1px rgba(0, 0, 0, .85), /* el tajo, en sombra */ 0 1px 0 rgba(232, 226, 213, .20); /* la luz que atrapa el borde */ } html[data-epoca="2"] .c-volver:hover .c-volver__flecha, html[data-epoca="2"] .c-volver:focus-visible .c-volver__flecha{ text-shadow: 0 -1px 1px rgba(0, 0, 0, .85), 0 1px 0 rgba(232, 226, 213, .48), 0 0 7px rgba(255, 138, 61, .30); /* la antorcha, ya cerca */ } /* ═══════════════════════════════════════════════════════════════════════════ 4 · ÉPOCA 3 · PAPEL (taller del impresor, de noche) — PLUMAZO Itálica REAL (EB Garamond la trae en el subset), no una oblicua falsa: es el quiebro de la pluma al levantar el trazo. Al retroceder, el ángulo se endereza un poco — la mano aprieta — y la tinta se carga (minio del taller, `--e-acento`; aquí SÍ vale directo porque la flecha vive sobre el TALLER, no sobre una hoja — DESIGN-SYSTEM.md §4.4, regla 2: «--e-acento es el minio, no la rúbrica» — es el caso que SÍ vale, no el que prohíbe). ═══════════════════════════════════════════════════════════════════════════ */ html[data-epoca="3"] .c-volver{ font-family: var(--e-mono); font-weight: var(--e-peso-fuerte); font-variant-caps: small-caps; font-feature-settings: "smcp" 1, "c2sc" 1; text-transform: none; font-size: 14.5px; letter-spacing: .04em; } html[data-epoca="3"] .c-volver__flecha{ font-style: italic; transform: skewX(-8deg) translateX(0); text-shadow: 0 0 2.5px rgba(240, 128, 63, .22); } html[data-epoca="3"] .c-volver:hover .c-volver__flecha, html[data-epoca="3"] .c-volver:focus-visible .c-volver__flecha{ transform: skewX(-4deg) translateX(-2.5px); color: var(--e-acento-nucleo); text-shadow: 0 0 5px rgba(240, 128, 63, .42); } /* ═══════════════════════════════════════════════════════════════════════════ 5 · ÉPOCA 4 · HIERRO — ESTAMPADA EN CHAPA Bisel de troquel: filo claro arriba-izquierda (donde pega la lámpara), sombra abajo-derecha. Sin ladeo — una prensa no tuerce el golpe. Al retroceder el filamento la calienta (§ vida-boton é4: "chispa de yunque"), mismo verbo, sin las chispas — aquí basta el resplandor. ═══════════════════════════════════════════════════════════════════════════ */ html[data-epoca="4"] .c-volver{ font-family: var(--e4-etiqueta, 'Oswald', 'Arial Narrow', 'Helvetica Neue', system-ui, sans-serif); font-weight: 500; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; } html[data-epoca="4"] .c-volver__flecha{ text-shadow: -1px -1px 0 rgba(255, 255, 255, .10), 1px 1px 1px rgba(0, 0, 0, .62); } html[data-epoca="4"] .c-volver:hover .c-volver__flecha, html[data-epoca="4"] .c-volver:focus-visible .c-volver__flecha{ transform: translateX(-2.5px); color: var(--e-acento-nucleo); text-shadow: -1px -1px 0 rgba(255, 255, 255, .14), 1px 1px 1px rgba(0, 0, 0, .62), 0 0 8px rgba(255, 176, 112, .50); } /* ═══════════════════════════════════════════════════════════════════════════ 6 · ÉPOCA 5 · CABINA — GLIFO MONO Ni sombra ni ladeo en reposo: el cristal no tiene textura que enseñar. La única ignición de toda la hoja es el filo que se enciende al retroceder — la misma idea que `vida-boton.css` é5 ("la luz SUBE seca y CAE lenta"), aquí sin capa nueva, solo el glow del propio carácter. ═══════════════════════════════════════════════════════════════════════════ */ html[data-epoca="5"] .c-volver{ font-family: var(--e-mono); font-weight: 500; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; } html[data-epoca="5"] .c-volver__flecha{ text-shadow: none; } html[data-epoca="5"] .c-volver:hover .c-volver__flecha, html[data-epoca="5"] .c-volver:focus-visible .c-volver__flecha{ transform: translateX(-2px); color: var(--e-acento); text-shadow: 0 0 7px rgba(255, 106, 31, .40); } /* ═══════════════════════════════════════════════════════════════════════════ 7 · 390px — sin desbordes. Las familias más anchas (Cinzel Decorative, Oswald tracked) ceden tracking antes que forzar scroll horizontal. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 430px){ html[data-epoca="1"] .c-volver{ letter-spacing: .09em; } html[data-epoca="2"] .c-volver{ letter-spacing: .12em; font-size: 11.5px; } html[data-epoca="4"] .c-volver{ letter-spacing: .13em; } } /* ═══════════════════════════════════════════════════════════════════════════ 8 · MOVIMIENTO REDUCIDO — el estado final es QUIETO. El hover sigue funcionando (sigue siendo información: dónde está el foco), solo deja de animarse — se enciende de golpe, en vez de calentarse. ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce){ .c-volver, .c-volver *{ transition: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 9 · IMPRESIÓN — un enlace no sirve en papel; el rótulo, como texto, sí. ═══════════════════════════════════════════════════════════════════════════ */ @media print{ .c-volver{ color: #333; text-decoration: underline; } .c-volver__flecha{ text-shadow: none; transform: none; color: #333; } }