/* ═══════════════════════════════════════════════════════════════════════════ AVATAR · .c-avatar — EL RETRATO DEL ALUMNO (3ª tirada · componente 6) Contrato: design-system/10-contrato-tercera-tirada.md (marcado + reparto) doctrina MATERIA: 07-contrato-vida-y-armazon.md §0 Fichero autocontenido: estructura + las 5 pieles + su vida. Un agente, un fichero. No toca base.css, ni epoca-*.css, ni vida/*.css, ni el muestrario. MARCADO CONGELADO (10-contrato-tercera-tirada.md §6) ─────────────────────────────────────────────────────────────────────────── Marta M ── LA TESIS: EL MARCO ES LA ÉPOCA, EL RETRATO ES EL ALUMNO ──────────────── Un avatar no tiene mucho que decir por sí mismo — es una letra o una foto en un disco. Toda la esencia vive en CÓMO CADA ÉPOCA MONTA ESE DISCO: el marco es el objeto de época; la cara de dentro es neutra y siempre limpia (`object-fit:cover`, recorte exacto, ni un filtro sobre la foto de nadie). 1 · CUEVA → BORDE DE PIGMENTO IRREGULAR. Un disco de pared con un aro soplado a mano alrededor — ni un grosor igual al de al lado — y una brasa que solo se nota si te acercas. 2 · PIEDRA → MEDALLÓN TALLADO. Un tondo de bronce con relieve duro: filo claro arriba, corte negro abajo. No reacciona al ratón — la piedra no se mueve, solo se acerca la antorcha. 3 · PAPEL → RETRATO OVAL CON MARCO DE HOJA. El avatar es SU PROPIA hojita de papel (como la tarjeta de `c-visor`), recortada a mano en óvalo y pegada sobre el taller — o sobre otra hoja, si el contexto lo pide (ver más abajo, es la pieza más delicada del fichero). 4 · HIERRO → MARCO DE LATÓN REMACHADO MINI. Un cameo de máquina: chapa, filo de latón y cuatro remaches diminutos, uno en cada punto cardinal. El filamento vive dentro del metal. 5 · CABINA → ANILLO DE CRISTAL CON FILO. Disco de cristal esmerilado de 1px, sin marco de verdad — en 2026 el aparato ya no se ve. ── LA PIEZA DELICADA: EL CONTEXTO DE LA ÉPOCA 3 ─────────────────────────── `DESIGN-SYSTEM.md` §4.4 fija el protocolo: en el Papel hay DOS direcciones de contraste a la vez (taller oscuro / hoja crema) y las cuatro superficies canónicas (`c-panel`, `c-instrumento`, `c-campo__input`, `c-progreso__pista`) lo resuelven REDECLARANDO los ocho tokens de contexto (`--e3-texto` … `--e3-foco`) a los valores de la hoja. El propio contrato de esta tirada lo ordena para cualquier pieza nueva: «cualquier superficie de papel nueva lo redeclara» (10-contrato-tercera-tirada.md, cabecera). El avatar ES una superficie de papel — es SU PROPIA hoja, no un texto que caiga dentro de una — así que en §5 de este fichero se convierte en la QUINTA superficie que redeclara el contexto, con una elección deliberada: su papel local es `--e3-hoja-baja` (la «papeleta», #E7DBC2), no la hoja plana (`--e3-hoja`, #F2EAD9). Es el mismo tono que ya usa `.c-campo__input` para lo mismo que necesita el avatar: significar «esto es un recorte de papel pegado ENCIMA de otra cosa» tanto si esa cosa es el taller oscuro (la papeleta se lee clara y flota) como si es una hoja más clara — un panel, una fila de tabla — donde una papeleta idéntica al fondo desaparecería. Con la tinta ya medida en la cabecera de `epoca-3.css` (papeleta #E7DBC2 → 13,01 · 7,18 · 4,88 · 6,56, los cuatro tonos de contexto), el avatar hereda ese contraste sin volver a calcularlo: por eso el retrato se pinta con `var(--e3-texto)`, nunca con un literal, exactamente como pide la regla de oro de esa hoja. Es la lectura literal de la nota del contrato: «(contexto e3 si va sobre papel)» — el avatar YA es papel, así que el protocolo se aplica siempre, no solo cuando un `.c-panel` lo envuelve. ── ESTADOS ────────────────────────────────────────────────────────────── El avatar no tiene estado propio en la tabla de `DESIGN-SYSTEM.md` §3: es una pieza de identidad, no de progreso. Solo reposo, hover (heredado si vive dentro de un ``/`