/* La cara de Xarpie (public/xarpie-cara.js). Cargado DESPUES de cuarto-oscuro.css: usa sus tokens (--tinta, --apagado, --marca-punto, --t-*, --e-*, --lento).
   La cara es SIEMPRE papel claro con tinta oscura, en los dos temas (por eso tokens propios y no --pag/--tinta, que cambian en oscuro). Lo que se dibuja
   FUERA del cuerpo (burbujas, signo de pregunta, rayos) usa --tinta, que si cambia con el tema: asi se ve sobre la tinta oscura y sobre el papel claro.
   Todo movimiento va en pasos (~8 dibujos por segundo): salta, no desliza. Con movimiento reducido nada se mueve y no hay destello. */
:root{ --cara-papel:#FCFBF7; --cara-tinta:#2B2926; --cara-flash:#FCFBF7; --cara-punto:var(--marca-punto);
  /* Los ocho colores: una pareja (punto del lente + tinte del cuerpo, que sigue siendo papel). Medidos: punto/cuerpo >= 4.7:1 y tinta/cuerpo >= 10:1.
     Los valores viven AQUI, en :root, y nada mas (paridad-cuarto-oscuro): el color activo es :root[data-xc-color="..."] y el menu pinta cada muestra con estas variables.
     El almagre es el de la marca: usa --marca-punto, asi que si la marca cambia, el de siempre cambia con ella. */
  --xc-almagre-punto:var(--marca-punto); --xc-almagre-papel:#FCFBF7;
  --xc-tinta-punto:#2B2926; --xc-tinta-papel:#E4E1DA;
  --xc-cianotipo-punto:#27579B; --xc-cianotipo-papel:#D3E2F4;
  --xc-salvia-punto:#436540; --xc-salvia-papel:#D9E7D2;
  --xc-ciruela-punto:#5A3E93; --xc-ciruela-papel:#E0D7F0;
  --xc-turquesa-punto:#1B6E5B; --xc-turquesa-papel:#CDE8E1;
  --xc-ocre-punto:#7C5A18; --xc-ocre-papel:#F1E2B8;
  --xc-ladrillo-punto:#9A3A54; --xc-ladrillo-papel:#F3D7DF;
  /* Los ojos de los cuerpos de imagen (el Rollo): blanco brillante con su borde, pupila negra con dos brillos y cejas de grafito, los mismos de la imagen 3D original.
     No siguen el color de la persona a proposito: son parte del personaje, como su lata gris. */
  --xc-ri-blanco1:#FFFFFF; --xc-ri-blanco2:#F3F3F3; --xc-ri-blanco3:#D9D9D9; --xc-ri-borde:#5E5E5E;
  --xc-ri-iris1:#3C3C3C; --xc-ri-iris2:#151515; --xc-ri-iris3:#050505; --xc-ri-ceja:#2F2F2F; --xc-ri-sombra:#000000;
}
:root[data-xc-color="tinta"]{ --cara-punto:var(--xc-tinta-punto); --cara-papel:var(--xc-tinta-papel); --cara-flash:var(--xc-tinta-papel); }
:root[data-xc-color="cianotipo"]{ --cara-punto:var(--xc-cianotipo-punto); --cara-papel:var(--xc-cianotipo-papel); --cara-flash:var(--xc-cianotipo-papel); }
:root[data-xc-color="salvia"]{ --cara-punto:var(--xc-salvia-punto); --cara-papel:var(--xc-salvia-papel); --cara-flash:var(--xc-salvia-papel); }
:root[data-xc-color="ciruela"]{ --cara-punto:var(--xc-ciruela-punto); --cara-papel:var(--xc-ciruela-papel); --cara-flash:var(--xc-ciruela-papel); }
:root[data-xc-color="turquesa"]{ --cara-punto:var(--xc-turquesa-punto); --cara-papel:var(--xc-turquesa-papel); --cara-flash:var(--xc-turquesa-papel); }
:root[data-xc-color="ocre"]{ --cara-punto:var(--xc-ocre-punto); --cara-papel:var(--xc-ocre-papel); --cara-flash:var(--xc-ocre-papel); }
:root[data-xc-color="ladrillo"]{ --cara-punto:var(--xc-ladrillo-punto); --cara-papel:var(--xc-ladrillo-papel); --cara-flash:var(--xc-ladrillo-papel); }

.xc-p{ fill:var(--cara-papel); }
.xc-ln{ stroke:var(--cara-tinta); }
.xc-lo{ stroke:var(--cara-tinta); fill:none; }
.xc-pl{ stroke:var(--cara-papel); fill:none; }
.xc-i{ fill:var(--cara-tinta); }
.xc-d{ fill:var(--cara-punto); }
/* Las tres que faltaban para un avatar propio (public/avatar-spec.js: TRAZO y SOLO_TRAZO): trazo de papel o de punto sobre una forma con relleno, y trazo de punto solo. */
.xc-sp{ stroke:var(--cara-papel); }
.xc-sd{ stroke:var(--cara-punto); }
.xc-lp{ stroke:var(--cara-punto); fill:none; }
.xc-mk{ stroke:var(--tinta); fill:none; }
.xc-mkf{ fill:var(--tinta); }
.xc-pop{ opacity:0; pointer-events:none; }
.xc .xc-pop *{ fill:var(--cara-flash); stroke:var(--cara-flash); stroke-width:11px; stroke-dasharray:none; opacity:1; }
.xc-rayos{ opacity:0; }

/* El bloque de arriba al centro, bajo la fila de Chats (cuando la bienvenida ya salio). */
#xc-cabeza{ flex:none; display:flex; flex-direction:column; align-items:center; gap:2px; padding:0 0 var(--e-2); }
/* La cara es la puerta a Cerebro (#/cerebro): un enlace de verdad, con foco de teclado y sin subrayado. */
.xc-enlace{ display:flex; flex-direction:column; align-items:center; gap:2px; color:inherit; background:none; border:0; padding:0; font:inherit; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent; border-radius:var(--r-flota); }
.xc-cara, .xc-cara-h, .xc-nombre, .xc-estado{ display:block; }
/* El ▾ junto al nombre dice que la cara se toca (en telefono no hay hover). */
.xc-enlace .xc-nombre::after{ content:" \25BE"; font-size:var(--t-meta); font-weight:400; color:var(--apagado); }
.xc-enlace:focus-visible{ outline:2px solid var(--marca-punto); outline-offset:2px; }
/* Con la carta de entrada (.xb-carta, src/entrada.js) la bienvenida no trae su cara grande, asi que la de arriba NO se esconde. El :where no pesa: la regla
   conserva exactamente la fuerza que tenia para las cuentas sin la carta. */
#xc-cabeza[hidden], .chatpane.xb-modo:where(:not(.xb-carta)) #xc-cabeza, body:not(.xc-on) #xc-cabeza{ display:none; }
#xc-cara .xc-svg{ width:146px; height:auto; display:block; overflow:visible; }   /* 6 oct (pedido de Daniel): la cara llena el circulo; el nombre y el estado salen de el (abajo) */
#chatpane[data-xc-ancho="estrecho"] #xc-cara .xc-svg{ width:140px; }
.xc-nombre{ font-size:calc(var(--t-texto) * .88); font-weight:600; color:var(--tinta); line-height:1.2; margin-top:var(--e-1); }
.xc-estado{ font-size:calc(var(--t-meta) * .88); color:var(--apagado); line-height:1.2; }
/* En una columna angosta solo la cara: el nombre y el estado se esconden a la vista (un lector de pantalla oye el estado igual, por #xc-voz). */
#chatpane[data-xc-ancho="estrecho"] #xc-nombre, #chatpane[data-xc-ancho="estrecho"] #xc-estado{ display:none; }
/* El nombre y el estado ya no van DENTRO del circulo (la cara lo llena): son una etiqueta pequena que cuelga debajo, en vidrio como el circulo, para que el texto del chat que pasa por
   detras no estorbe su lectura. Cada uno es una pildora centrada en el circulo. */
#xc-cabeza :is(.xc-nombre, .xc-estado){
  position:absolute; left:50%; transform:translateX(-50%); margin:0; padding:1px 10px; border-radius:99px; width:max-content;
  background:color-mix(in srgb, var(--pag) 72%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
#xc-cabeza .xc-nombre{ top:calc(100% + 2px); }
#xc-cabeza .xc-estado{ top:calc(100% + 22px); }

/* La cara grande de la bienvenida. */
.xc-heroe{ display:flex; flex-direction:column; align-items:center; gap:var(--e-1); margin:0 auto var(--e-2); }
.xc-heroe .xc-svg{ width:min(150px, 40vw); height:auto; display:block; overflow:visible; }
.xc-heroe .xc-nombre{ font-size:var(--t-sub); }
.xc-heroe .xc-estado{ font-size:var(--t-texto); }
/* La cara grande solo vive mientras la bienvenida es el MODO del chat (xb-modo): en cuanto la persona escribe o abre un chat nuevo, la bienvenida se queda como primer bloque pero el modo se apaga, el circulo de arriba
   (#xc-cabeza) vuelve a verse, y dos caras a la vez (la del circulo y la grande de la bienvenida) quedaban una encima de la otra en el telefono (visto en un iPhone, 6 oct). */
.chatpane:not(.xb-modo) .xc-heroe{ display:none; }

/* ---- Escritorio (2026-10-04, pedido de Daniel; lienzo https://claude.ai/artifact/Rfwjkva5EpJCCd9jEAjsC3, tableros 7 a 9) ----
   UNA sola cara de 88 px (tambien en la bienvenida: la cara grande del heroe no se pone en escritorio, ver ponerHeroe), a media columna del chat y pegada arriba.
   Con el chat escondido se achica a un circulo de 36 px en la esquina de la barra; tocarla ahi lo abre, y al abrir se despliega. app.js la muda a <body> (ubicarCabeza)
   para que position:fixed no se esconda con la columna. El centro (--co-chat-cx: el de la zona de lectura del chat, sin su relleno) lo mide montarMarcoChat. Cruzan dos dibujos: la cara fina y el
   glifo grueso (#xc-esq), que se funden. Nada se anima con teclado (Cmd+\ pone .xa-sin-animar en #app), ni mientras se arrastra el divisor, ni con movimiento reducido. */
.xc-esq{ display:none; }
@media (min-width:861px){
  body.nav-lat-on.menu-arriba #xc-cabeza{
    position:fixed; z-index:64; top:-10px; width:152px; height:152px; padding:0; gap:0; box-sizing:border-box;
    left:calc(var(--co-chat-cx, 0px) - 76px);
    /* 2026-10-05 (pedido de Daniel): SOLO el circulo ocupa lugar. Es un vidrio: el texto del chat pasa por debajo y se ve a traves de el (borroso), sin quedar cortado
       ni reservarle un hueco a la cara en la columna (el relleno de arriba del chat se quito). */
    border-radius:50%; background:color-mix(in srgb, var(--pag) 42%, transparent);
    -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
    box-shadow:inset 0 0 0 1px var(--linea);
    transition:left var(--d-hoja) var(--curva-entra), top var(--d-hoja) var(--curva-entra), width var(--d-hoja) var(--curva-entra), height var(--d-hoja) var(--curva-entra), background-color var(--d-hoja) var(--curva-entra);
  }
  html:not(.co-cara-lista) body.nav-lat-on.menu-arriba #xc-cabeza{ visibility:hidden; transition:none; }
  body.nav-lat-on.menu-arriba #xc-cabeza .xc-enlace{ position:relative; width:100%; height:100%; justify-content:center; border-radius:inherit; padding-top:0; box-sizing:border-box; }
  body.nav-lat-on.menu-arriba #xc-cabeza :is(.xc-cara, .xc-nombre, .xc-estado){
    transition:opacity var(--d-aviso) var(--curva-cambia), transform var(--d-hoja) var(--curva-entra);
  }
  body.nav-lat-on.menu-arriba #xc-cabeza .xc-cara{ transform-origin:top center; }
  /* El nombre y el estado no se parten en renglones mientras la caja se achica (88 -> 36 px): solo se funden. */
  body.nav-lat-on.menu-arriba #xc-cabeza :is(.xc-nombre, .xc-estado){ white-space:nowrap; }
  body.nav-lat-on.menu-arriba #xc-cabeza .xc-esq{
    display:flex; position:absolute; inset:0; align-items:center; justify-content:center; opacity:0; pointer-events:none;
    transition:opacity var(--d-aviso) var(--curva-cambia);
  }
  body.nav-lat-on.menu-arriba #xc-cabeza .xc-esq .xc-glifo{ width:26px; height:auto; }
  /* El chat escondido: el circulo de la esquina. Se achica (88 -> 36 px), se funde con el glifo y se va a la izquierda de la barra. */
  body:has(#app.chat-colapsado).nav-lat-on.menu-arriba #xc-cabeza{
    left:10px; top:6px; width:36px; height:36px; background:var(--piedra-on);
    -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none;
    transition-duration:var(--d-hoja-sale);
  }
  body:has(#app.chat-colapsado).nav-lat-on.menu-arriba #xc-cabeza :is(.xc-cara, .xc-nombre, .xc-estado){ opacity:0; }
  body:has(#app.chat-colapsado).nav-lat-on.menu-arriba #xc-cabeza .xc-cara{ transform:scale(.4); }
  body:has(#app.chat-colapsado).nav-lat-on.menu-arriba #xc-cabeza .xc-enlace{ padding-top:0; }
  body:has(#app.chat-colapsado).nav-lat-on.menu-arriba #xc-cabeza .xc-esq{ opacity:1; }
  @media (hover:hover){ body:has(#app.chat-colapsado).nav-lat-on.menu-arriba #xc-cabeza:hover{ box-shadow:inset 0 0 0 100px var(--tinte-toque); } }
  /* La lista de Chats tapa la columna: la cara se esconde (la fila de esa capa trae su propia puerta de vuelta). */
  body:has(#app.tel-en-convs:not(.chat-colapsado)).nav-lat-on.menu-arriba #xc-cabeza{ visibility:hidden; }
  /* Nada se anima con teclado ni mientras se arrastra el divisor (cada pointermove moveria el centro y se sentiria como hule). */
  body:has(#app.xa-sin-animar) #xc-cabeza, body:has(#app.xa-arrastrando) #xc-cabeza{ transition:none; }
  body:has(#app.xa-sin-animar) #xc-cabeza :is(.xc-cara, .xc-nombre, .xc-estado, .xc-esq), body:has(#app.xa-arrastrando) #xc-cabeza :is(.xc-cara, .xc-nombre, .xc-estado, .xc-esq){ transition:none; }
  /* Una cara grande que quedo de la bienvenida de telefono (la ventana cruzo los 860 px) no se muestra: aqui hay una sola. */
  .xc-heroe{ display:none; }
  @media (prefers-reduced-motion:reduce){
    body.nav-lat-on.menu-arriba #xc-cabeza{ transition:none; }
    body.nav-lat-on.menu-arriba #xc-cabeza :is(.xc-cara, .xc-nombre, .xc-estado, .xc-esq){ transition:opacity var(--d-toque) linear; }
    body:has(#app.chat-colapsado).nav-lat-on.menu-arriba #xc-cabeza .xc-cara{ transform:none; }
  }
  html.movimiento-reducido body.nav-lat-on.menu-arriba #xc-cabeza{ transition:none; }
  html.movimiento-reducido body.nav-lat-on.menu-arriba #xc-cabeza :is(.xc-cara, .xc-nombre, .xc-estado, .xc-esq){ transition:opacity var(--d-toque) linear; }
  html.movimiento-reducido body:has(#app.chat-colapsado).nav-lat-on.menu-arriba #xc-cabeza .xc-cara{ transform:none; }
}

/* Telefono: la cara mas chica y pegada arriba (Daniel, 3 oct). */
@media (max-width:860px){
  /* 2026-10-05 (pedido de Daniel): igual que en escritorio, SOLO el circulo ocupa lugar. Ya no es un bloque del ancho de la columna: es un circulo de vidrio que flota bajo la fila
     de Chats, y el texto del chat pasa por debajo (se ve borroso a traves de el, sin recortarse). La cara no cambia de tamano (72 px). */
  #xc-cabeza{
    position:absolute; z-index:5; top:2px; left:50%; width:124px; height:124px; margin-left:-62px; padding:0; gap:0; box-sizing:border-box;
    border-radius:50%; background:color-mix(in srgb, var(--pag) 42%, transparent);
    -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
    box-shadow:inset 0 0 0 1px var(--linea);
  }
  #xc-cabeza .xc-enlace{ width:100%; height:100%; justify-content:center; padding-top:0; box-sizing:border-box; }
  /* El relleno va dentro del desplazable: en reposo el primer renglon queda bajo el circulo; al subir, el texto lo cruza. */
  body.xc-on .chatpane:not(.xb-modo) #chat-msgs{ padding-top:64px; }
  #xc-cara .xc-svg{ width:120px; }
  .xc-heroe .xc-svg{ width:min(116px, 32vw); }
  .xc-heroe{ margin-bottom:var(--e-1); }
}

/* El glifo de cada respuesta: quieto, a trazo fino. */
.ava .xc-glifo{ width:30px; height:auto; display:block; }

/* ---- Movimiento (en pasos) ---- */
@keyframes xc-parp{ 0%,90%,100%{ transform:scaleY(1); } 93%,96%{ transform:scaleY(.12); } }
@keyframes xc-mira{ 0%{ transform:translate(0,0); } 25%{ transform:translate(6px,-6px); } 50%,80%{ transform:translate(12px,-12px); } }
@keyframes xc-escanea{ 0%{ transform:translate(0,0); } 25%{ transform:translate(-14px,0); } 50%{ transform:translate(0,0); } 75%{ transform:translate(14px,0); } }
/* En reposo mira a los lados, como quien no tiene nada que hacer: 10 s de ciclo, miradas largas a la izquierda y a la derecha, una corta de reojo y un rato de calma.
   Cada salto va en dos cuadros (125 ms, el mismo paso del trazo): medio camino y luego el final, asi parece un vistazo y no un deslizamiento. Los DOS ojos se mueven juntos (xc-ojo).
   Los numeros son unidades del dibujo, no pixeles de pantalla: 13 deja el ojo grande dentro del anillo del lente (r 42); el lente solo-lente (xc-ojo-l) tiene mas lugar. */
@keyframes xc-lados{
  0%,13.75%{ transform:translate(0,0); }
  15%{ transform:translate(-6px,0); }
  16.25%,28.75%{ transform:translate(-13px,0); }
  30%{ transform:translate(-6px,0); }
  31.25%,40%{ transform:translate(0,0); }
  41.25%{ transform:translate(6px,0); }
  42.5%,56.25%{ transform:translate(13px,0); }
  57.5%{ transform:translate(6px,0); }
  58.75%,66.25%{ transform:translate(0,0); }
  67.5%{ transform:translate(-6px,0); }
  68.75%,72.5%{ transform:translate(-9px,0); }
  73.75%{ transform:translate(-4px,0); }
  75%,100%{ transform:translate(0,0); }
}
@keyframes xc-lados-l{
  0%,13.75%{ transform:translate(0,0); }
  15%{ transform:translate(-8px,0); }
  16.25%,28.75%{ transform:translate(-17px,0); }
  30%{ transform:translate(-8px,0); }
  31.25%,40%{ transform:translate(0,0); }
  41.25%{ transform:translate(8px,0); }
  42.5%,56.25%{ transform:translate(17px,0); }
  57.5%{ transform:translate(8px,0); }
  58.75%,66.25%{ transform:translate(0,0); }
  67.5%{ transform:translate(-8px,0); }
  68.75%,72.5%{ transform:translate(-12px,0); }
  73.75%{ transform:translate(-5px,0); }
  75%,100%{ transform:translate(0,0); }
}
@keyframes xc-gira{ to{ transform:rotate(360deg); } }
@keyframes xc-vel{ 0%{ opacity:1; } 50%{ opacity:.25; } }
@keyframes xc-b1{ 0%,15%{ opacity:0; } 16%,100%{ opacity:1; } }
@keyframes xc-b2{ 0%,35%{ opacity:0; } 36%,100%{ opacity:1; } }
@keyframes xc-b3{ 0%,55%{ opacity:0; } 56%,100%{ opacity:1; } }
@keyframes xc-q{ to{ stroke-dashoffset:0; } }
@keyframes xc-qp{ to{ opacity:1; } }
@keyframes xc-ceja{ from{ transform:translateY(8px); } to{ transform:translateY(0); } }
@keyframes xc-rayos{ 0%,60%{ opacity:1; } 100%{ opacity:0; } }
@keyframes xc-pop{ 0%{ opacity:0; } 25%{ opacity:.9; } 100%{ opacity:0; } }
@keyframes xc-fundido{ from{ opacity:0; } to{ opacity:1; } }

.xc .xc-parp{ animation:xc-parp calc(4s * var(--lento)) steps(1) infinite; }
.xc .xc-mira{ animation:xc-mira calc(2.4s * var(--lento)) steps(1) infinite; }
.xc .xc-escanea{ animation:xc-escanea calc(1.6s * var(--lento)) steps(1) infinite; }
.xc .xc-ojo{ animation:xc-lados calc(10s * var(--lento)) steps(1) infinite; }
.xc .xc-ojo-l{ animation-name:xc-lados-l; }
.xc .xc-gira{ animation:xc-gira calc(3s * var(--lento)) steps(12) infinite; }
.xc .xc-vel{ animation:xc-vel calc(.5s * var(--lento)) steps(1) infinite; }
.xc .xc-b1{ animation:xc-b1 calc(2.4s * var(--lento)) steps(1) infinite; }
.xc .xc-b2{ animation:xc-b2 calc(2.4s * var(--lento)) steps(1) infinite; }
.xc .xc-b3{ animation:xc-b3 calc(2.4s * var(--lento)) steps(1) infinite; }
.xc .xc-q{ stroke-dasharray:1; stroke-dashoffset:1; animation:xc-q calc(.8s * var(--lento)) steps(8) calc(.2s * var(--lento)) forwards; }
.xc .xc-qp{ opacity:0; animation:xc-qp calc(.1s * var(--lento)) steps(1) calc(1s * var(--lento)) forwards; }
.xc .xc-ceja{ animation:xc-ceja calc(.3s * var(--lento)) steps(2) both; }
.xc.xc-destello .xc-rayos{ animation:xc-rayos calc(.9s * var(--lento)) steps(5) both; }
.xc.xc-destello .xc-pop{ animation:xc-pop calc(.5s * var(--lento)) steps(4) calc(.05s * var(--lento)) both; }

/* ---- Cuerpos de imagen (el Rollo, 5 oct 2026, public/xarpie-cara.js: ojoImagen). La imagen trae el cuerpo y la boca de cada animo; los ojos y las cejas los dibuja la cara y se mueven aqui.
   Suave y no en pasos (es un personaje en 3D, no un dibujo a tinta). Solo dentro de `.xc` (la cara que se mueve): el glifo y la miniatura del menu quedan quietos, y .xc-quieto y el
   movimiento reducido (abajo) los paran como al resto. Las unidades son del espacio de la imagen (512 de ancho): 8px son 8 de esas unidades. ---- */
.xc-ri-borde{ fill:var(--xc-ri-borde); opacity:.6; }
.xc-ri-blanco{ fill:url(#xc-ri-blanco); }
.xc-ri-iris{ fill:url(#xc-ri-iris); }
.xc-ri-brillo{ fill:var(--xc-ri-blanco1); }
.xc-ri-brillo2{ opacity:.85; }
.xc-ri-sombra{ fill:url(#xc-ri-sombra); }
.xc-ri-cj{ fill:none; stroke:var(--xc-ri-ceja); }
.xc-ri-sb1{ stop-color:var(--xc-ri-blanco1); } .xc-ri-sb2{ stop-color:var(--xc-ri-blanco2); } .xc-ri-sb3{ stop-color:var(--xc-ri-blanco3); }
.xc-ri-si1{ stop-color:var(--xc-ri-iris1); } .xc-ri-si2{ stop-color:var(--xc-ri-iris2); } .xc-ri-si3{ stop-color:var(--xc-ri-iris3); }
.xc-ri-ss1{ stop-color:var(--xc-ri-sombra); stop-opacity:.18; } .xc-ri-ss0{ stop-color:var(--xc-ri-sombra); stop-opacity:0; } .xc-ri-ss2{ stop-color:var(--xc-ri-sombra); stop-opacity:.12; }
/* Lo que no se mueve (tambien en la miniatura, el glifo y con movimiento reducido): las cejas de cada animo en su sitio. */
.xc-ri-working .xc-ri-ceja-L{ transform:translateY(3px) rotate(9deg); }
.xc-ri-working .xc-ri-ceja-R{ transform:translateY(3px) rotate(-9deg); }
.xc-ri-asking .xc-ri-ceja-L{ transform:translateY(-8px) rotate(-8deg); }
.xc-ri-asking .xc-ri-ceja-R{ transform:translateY(3px) rotate(8deg); }
.xc-ri-done .xc-ri-ceja{ transform:translateY(-6px); }
/* Los ojos: parpadean, y las pupilas saltan y se quedan, como ojos de verdad (miran a los lados, arriba al pensar, leen de un lado a otro al trabajar, te miran al preguntar). */
@keyframes xc-ri-parp{ 0%,91%,100%{ transform:scaleY(1); } 93.5%{ transform:scaleY(.08); } 96%{ transform:scaleY(1); } }
@keyframes xc-ri-atento{ 0%,100%{ scale:1; } 50%{ scale:1.06; } }
@keyframes xc-ri-mirar{ 0%,14%{ transform:translate(0,0); } 17%,33%{ transform:translate(8px,1px); } 36%,48%{ transform:translate(8px,-5px); } 51%,64%{ transform:translate(0,0); } 67%,82%{ transform:translate(-8px,1px); } 85%,100%{ transform:translate(0,0); } }
@keyframes xc-ri-pensar{ 0%,38%{ transform:translate(7px,-9px); } 42%,58%{ transform:translate(-6px,-10px); } 62%,100%{ transform:translate(7px,-9px); } }
@keyframes xc-ri-leer{ 0%{ transform:translate(-7px,6px); } 25%{ transform:translate(-1px,6px); } 50%{ transform:translate(5px,6px); } 75%{ transform:translate(9px,6px); } 100%{ transform:translate(-7px,6px); } }
@keyframes xc-ri-esperar{ 0%,40%{ transform:translate(-1px,0); } 45%,55%{ transform:translate(-6px,-1px); } 60%,100%{ transform:translate(-1px,0); } }
@keyframes xc-ri-ceja-calma{ 0%,30%,100%{ transform:translateY(0); } 36%,46%{ transform:translateY(-3px); } }
@keyframes xc-ri-ceja-alta{ 0%,100%{ transform:translateY(-5px) rotate(-6deg); } 50%{ transform:translateY(-8px) rotate(-9deg); } }
@keyframes xc-ri-ceja-duda{ 0%,100%{ transform:translateY(-8px) rotate(-8deg); } 50%{ transform:translateY(-12px) rotate(-11deg); } }
@keyframes xc-ri-feliz{ 0%,100%{ transform:translateY(0) scaleY(1); } 40%{ transform:translateY(-3px) scaleY(1.15); } }
/* El gesto del cuerpo en cada animo, sobre la base del carrete: respira (y a ratos da un saltito), se mece pensando, se mueve con ritmo al trabajar, se acerca esperando tu si, y salta UNA vez al terminar. */
@keyframes xc-ri-vida-idle{ 0%,50%,100%{ transform:translateY(0) scale(1); } 25%{ transform:translateY(-4px) scale(1.012); } 70%{ transform:translateY(-1px) rotate(-1.5deg); } 74%{ transform:translateY(-14px) rotate(1deg) scale(.98,1.03); } 79%{ transform:translateY(0) scale(1.03,.97); } 84%{ transform:none; } 92%{ transform:translateY(-3px) scale(1.008); } }
@keyframes xc-ri-vida-thinking{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(2.5deg) translateY(-3px); } }
@keyframes xc-ri-vida-working{ 0%,100%{ transform:translateY(0) rotate(-1.2deg); } 25%,75%{ transform:translateY(-7px) rotate(0); } 50%{ transform:translateY(0) rotate(1.2deg); } }
@keyframes xc-ri-vida-asking{ 0%,100%{ transform:scale(1) rotate(0); } 50%{ transform:scale(1.035) rotate(1.8deg) translateY(-3px); } }
@keyframes xc-ri-vida-done{ 0%,100%{ transform:none; } 14%{ transform:translateY(10px) scale(1.06,.92); } 38%{ transform:translateY(-52px) scale(.96,1.05); } 58%{ transform:translateY(0) scale(1.05,.94); } 70%{ transform:rotate(-5deg); } 82%{ transform:rotate(4deg); } 92%{ transform:rotate(-1.5deg); } }
.xc .xc-ri-par{ animation:xc-ri-parp calc(4.6s * var(--lento)) ease-in-out infinite; }
.xc .xc-ri-thinking .xc-ri-par{ animation-duration:calc(5.4s * var(--lento)); }
.xc .xc-ri-working .xc-ri-par{ animation-duration:calc(3.1s * var(--lento)); }
.xc .xc-ri-asking .xc-ri-par{ animation:xc-ri-parp calc(4.6s * var(--lento)) ease-in-out infinite, xc-ri-atento calc(2.4s * var(--lento)) ease-in-out infinite; }
.xc .xc-ri-idle .xc-ri-pu{ animation:xc-ri-mirar calc(7s * var(--lento)) cubic-bezier(.3,.9,.3,1) infinite; }
.xc .xc-ri-idle .xc-ri-ceja{ animation:xc-ri-ceja-calma calc(7s * var(--lento)) ease-in-out infinite; }
.xc .xc-ri-thinking .xc-ri-pu{ animation:xc-ri-pensar calc(5.4s * var(--lento)) cubic-bezier(.3,.9,.3,1) infinite; }
.xc .xc-ri-thinking .xc-ri-ceja-R{ animation:xc-ri-ceja-alta calc(5.4s * var(--lento)) ease-in-out infinite; }
.xc .xc-ri-working .xc-ri-pu{ animation:xc-ri-leer calc(1.8s * var(--lento)) steps(1) infinite; }
.xc .xc-ri-asking .xc-ri-pu{ animation:xc-ri-esperar calc(4.8s * var(--lento)) cubic-bezier(.3,.9,.3,1) infinite; }
.xc .xc-ri-asking .xc-ri-ceja-L{ animation:xc-ri-ceja-duda calc(2.4s * var(--lento)) ease-in-out infinite; }
.xc .xc-ri-done .xc-ri-feliz{ animation:xc-ri-feliz calc(1.2s * var(--lento)) ease-in-out infinite; }
.xc .xc-ri-idle{ animation:xc-ri-vida-idle calc(9s * var(--lento)) ease-in-out infinite; }
.xc .xc-ri-thinking{ animation:xc-ri-vida-thinking calc(5.4s * var(--lento)) ease-in-out infinite; }
.xc .xc-ri-working{ animation:xc-ri-vida-working calc(1s * var(--lento)) ease-in-out infinite; }
.xc .xc-ri-asking{ animation:xc-ri-vida-asking calc(2.4s * var(--lento)) ease-in-out infinite; }
.xc .xc-ri-done{ animation:xc-ri-vida-done calc(1.2s * var(--lento)) cubic-bezier(.3,.7,.3,1) both; }

/* Quieta (pestana oculta, fuera de la vista, o chat plegado): se detiene donde esta. */
.xc.xc-quieto *{ animation-play-state:paused !important; }

/* Movimiento reducido: sin ebullicion, sin movimiento, sin destello. La cara cambia con un fundido de 120 ms, y se sigue sabiendo que hace Xarpie. */
@media (prefers-reduced-motion: reduce){
  .xc *{ animation:none !important; }
  .xc .xc-q{ stroke-dashoffset:0; }
  .xc .xc-qp{ opacity:1; }
  .xc .xc-svg{ animation:xc-fundido calc(120ms * var(--lento)) linear both !important; }
}
html.movimiento-reducido .xc *{ animation:none !important; }
html.movimiento-reducido .xc .xc-q{ stroke-dashoffset:0; }
html.movimiento-reducido .xc .xc-qp{ opacity:1; }
html.movimiento-reducido .xc .xc-svg{ animation:xc-fundido calc(120ms * var(--lento)) linear both !important; }

/* ---- Los ocho colores en el menu: cada muestra pinta el tinte del cuerpo y, adentro, el punto del lente (tokens de :root, ningun valor aqui). ---- */
.xc-sw[data-c="almagre"]{ --sw-p:var(--xc-almagre-papel); --sw-d:var(--xc-almagre-punto); }
.xc-sw[data-c="tinta"]{ --sw-p:var(--xc-tinta-papel); --sw-d:var(--xc-tinta-punto); }
.xc-sw[data-c="cianotipo"]{ --sw-p:var(--xc-cianotipo-papel); --sw-d:var(--xc-cianotipo-punto); }
.xc-sw[data-c="salvia"]{ --sw-p:var(--xc-salvia-papel); --sw-d:var(--xc-salvia-punto); }
.xc-sw[data-c="ciruela"]{ --sw-p:var(--xc-ciruela-papel); --sw-d:var(--xc-ciruela-punto); }
.xc-sw[data-c="turquesa"]{ --sw-p:var(--xc-turquesa-papel); --sw-d:var(--xc-turquesa-punto); }
.xc-sw[data-c="ocre"]{ --sw-p:var(--xc-ocre-papel); --sw-d:var(--xc-ocre-punto); }
.xc-sw[data-c="ladrillo"]{ --sw-p:var(--xc-ladrillo-papel); --sw-d:var(--xc-ladrillo-punto); }

/* ---- El menu de la cara (public/xarpie-cara-menu.js). Reusa .co-menu (fondo, radio, sombra y su transicion de abrir/cerrar). Se monta en <body>. ---- */
.xc-menu{ box-sizing:border-box; padding:var(--e-3); display:flex; flex-direction:column; gap:var(--e-3); overflow-y:auto; max-width:calc(100vw - 16px); color:var(--texto); font-size:var(--t-texto); }
.xc-menu.xc-sin-anim, .xc-menu.xc-sin-anim.abierto{ transition:none; }
.xc-m-cab{ display:flex; align-items:center; gap:var(--e-3); }
.xc-m-cara .xc-svg{ display:block; height:auto; overflow:visible; }
.xc-m-nom{ font-weight:600; color:var(--tinta); font-size:var(--t-sub); }
.xc-m-sec{ display:flex; flex-direction:column; gap:var(--e-2); }
.xc-m-lab{ font-size:var(--t-meta); font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--apagado); }
.xc-m-fila{ display:flex; gap:var(--e-2); align-items:center; }
.xc-m-inp{ flex:1; min-width:0; box-sizing:border-box; height:40px; border-radius:var(--r-pildora); border:1px solid var(--punto); background:transparent; color:var(--tinta); font:inherit; font-size:var(--t-campo); padding:0 var(--e-3); }
.xc-m-inp[disabled]{ color:var(--apagado); border-style:dashed; }
.xc-m-inp[aria-invalid="true"]{ border-color:var(--urge); }
.xc-m-btn{ flex:none; min-height:40px; padding:0 var(--e-4); border-radius:var(--r-pildora); border:0; background:var(--boton); color:var(--boton-t); font:inherit; cursor:pointer; white-space:nowrap; }
.xc-m-btn[disabled]{ opacity:.5; cursor:default; }
.xc-m-ayuda{ font-size:var(--t-meta); line-height:1.4; color:var(--apagado); }
.xc-m-ayuda.err{ color:var(--urge); }
.xc-m-sw{ display:flex; flex-wrap:wrap; gap:var(--e-2); }
.xc-sw{ flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--punto); padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; background:var(--sw-p); }
.xc-sw i{ display:block; width:14px; height:14px; border-radius:50%; background:var(--sw-d); }
.xc-sw[aria-checked="true"], .xc-bd[aria-checked="true"]{ outline:2px solid var(--tinta); outline-offset:2px; }
.xc-m-bd{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--e-2); }
/* El rotulo de un bloque de cuerpos («Para tu negocio», «Camaras», «Lentes»): ocupa toda la fila de la rejilla y no se toca. */
.xc-m-sub{ grid-column:1 / -1; font-size:var(--t-meta); color:var(--apagado); padding-top:var(--e-1); }
.xc-m-sub:not(:first-child){ padding-top:var(--e-3); }
.xc-bd{ height:48px; border-radius:var(--r-flota); border:1px solid var(--linea); background:transparent; padding:var(--e-1); cursor:pointer; }
.xc-mini{ display:block; width:100%; height:100%; }
.xc-m-sep{ height:1px; background:var(--linea); }
.xc-m-tg{ display:flex; flex-direction:column; }
.xc-m-pie{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; column-gap:var(--e-3); }
.xc-m-lnk{ min-height:36px; padding:var(--e-2) 0; background:none; border:0; font:inherit; color:var(--texto); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
@media (hover:hover){ .xc-m-lnk:hover{ color:var(--tinta); } .xc-sw:hover, .xc-bd:hover{ border-color:var(--medio); } }
.xc-menu :is(button, input):focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
/* Telefono: una hoja desde abajo con su telon (mismos tokens que el resto de las hojas). */
.xc-telon{ position:fixed; inset:0; z-index:calc(var(--z-menu) - 1); background:var(--velo); }
.xc-menu.xc-hoja{ left:0; right:0; bottom:0; top:auto; width:auto; max-width:none; max-height:82vh; border-radius:var(--r-flota) var(--r-flota) 0 0; padding-bottom:calc(var(--e-4) + env(safe-area-inset-bottom)); background:var(--hoja); transform:translateY(100%); transition:transform var(--d-hoja-sale) var(--curva-cambia), opacity var(--d-hoja-sale) var(--curva-cambia), visibility 0s linear var(--d-hoja-sale); }
.xc-menu.xc-hoja.abierto{ transform:none; transition:transform var(--d-hoja) var(--curva-arrastre), opacity var(--d-hoja) var(--curva-entra), visibility 0s; }
.xc-menu.xc-hoja.xc-sin-anim, .xc-menu.xc-hoja.xc-sin-anim.abierto{ transition:none; }
.xc-grab{ flex:none; width:36px; height:4px; border-radius:4px; background:var(--linea); margin:0 auto; }
@media (prefers-reduced-motion: reduce){ .xc-menu.xc-hoja, .xc-menu.xc-hoja.abierto{ transform:none; transition:opacity 120ms linear, visibility 0s; } }
html.movimiento-reducido .xc-menu.xc-hoja, html.movimiento-reducido .xc-menu.xc-hoja.abierto{ transform:none; transition:opacity 120ms linear, visibility 0s; }

/* ---- La fila «Mi avatar» del menu, bajo los cuerpos (public/xarpie-cara-menu.js). Sin avatar: linea punteada, discreta, sin competir con los cuerpos. Con uno: su miniatura, su nombre y «Editar». ---- */
.xc-mio{ display:flex; align-items:center; gap:var(--e-1); min-height:54px; border-radius:var(--r-flota); border:1px dashed var(--punto); }
.xc-mio-tiene{ border-style:solid; border-color:var(--linea); }
.xc-mio-on{ outline:2px solid var(--tinta); outline-offset:2px; }
.xc-mio-b{ flex:1; min-width:0; display:flex; align-items:center; gap:var(--e-3); background:none; border:0; padding:var(--e-1) var(--e-2); color:inherit; font:inherit; text-align:left; cursor:pointer; border-radius:var(--r-flota); -webkit-tap-highlight-color:transparent; }
.xc-mio-mas{ flex:none; width:30px; height:30px; margin:0 var(--e-1); border-radius:50%; border:1px solid var(--punto); display:flex; align-items:center; justify-content:center; color:var(--texto); }
.xc-mio-mi{ flex:none; width:46px; height:36px; display:flex; align-items:center; justify-content:center; }
.xc-mio-tx{ display:flex; flex-direction:column; min-width:0; }
.xc-mio-t1{ font-size:var(--t-texto); color:var(--tinta); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xc-mio-t2{ font-size:var(--t-meta); color:var(--apagado); line-height:1.3; }
.xc-mio-ed{ flex:none; padding-left:var(--e-3); padding-right:var(--e-3); }
@media (hover:hover){ .xc-mio-b:hover{ background:var(--tinte-toque); } }

/* ---- La hoja «Mi avatar» (public/xarpie-avatar-hoja.js). Escritorio: un dialogo de 560 px sobre un velo. Telefono: una hoja desde abajo (el mismo gesto del menu). Lienzo: pagina «Mi avatar propio (F0)». ---- */
.xav-ov{ position:fixed; inset:0; z-index:var(--z-velo); background:var(--velo); display:flex; align-items:center; justify-content:center; padding:var(--e-5); box-sizing:border-box; animation:co-fundido var(--d-ventana) var(--curva-cambia) both; }
.xav{ box-sizing:border-box; width:560px; max-width:100%; max-height:100%; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:var(--e-4); padding:var(--e-4) var(--e-5) var(--e-5); background:var(--hoja); color:var(--texto); font-size:var(--t-texto); border-radius:var(--r-flota); box-shadow:var(--sombra-menu); animation:co-ventana var(--d-ventana) var(--curva-entra) both; }
.xav.xav-sin-anim{ animation:none; }
.xav [hidden]{ display:none !important; }
.xav-cab{ display:flex; align-items:center; justify-content:space-between; margin-right:calc(-1 * var(--e-2)); }
.xav-tit{ margin:0; font-size:var(--t-sub); font-weight:600; color:var(--tinta); letter-spacing:-.01em; }
.xav-x{ width:44px; height:44px; padding:0; border:0; border-radius:var(--r-pildora); background:none; color:var(--medio); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.xav-lead{ margin:0; line-height:1.5; color:var(--medio); }
.xav-intro{ display:flex; flex-direction:column; gap:var(--e-4); }
.xav-paso{ display:flex; gap:var(--e-3); align-items:flex-start; }
.xav-n{ flex:none; width:24px; height:24px; margin-top:1px; border-radius:50%; border:1px solid var(--punto); display:flex; align-items:center; justify-content:center; font-size:var(--t-meta); color:var(--texto); }
.xav-pc{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--e-2); }
.xav-p-t{ font-weight:600; color:var(--tinta); }
.xav-d{ margin:0; line-height:1.45; color:var(--medio); }
.xav-fila{ display:flex; flex-wrap:wrap; gap:var(--e-2); align-items:center; }
.xav-fila-err{ justify-content:space-between; }
.xav-ta{ box-sizing:border-box; width:100%; resize:none; overflow-y:auto; border-radius:var(--r-flota); border:1px solid var(--punto); background:var(--pag); color:var(--tinta); font-family:ui-monospace, Menlo, monospace; font-size:var(--t-meta); line-height:1.5; padding:var(--e-3); }
.xav-ta::placeholder{ color:var(--apagado); }
.xav-ta[aria-invalid="true"]{ border-color:var(--urge); }
.xav-ta.xav-bien{ border-color:var(--ok); }
.xav-res{ display:flex; flex-direction:column; gap:var(--e-3); }
.xav-res:empty{ display:none; }
.xav-est{ display:flex; align-items:flex-start; gap:var(--e-2); line-height:1.4; color:var(--tinta); }
.xav-est svg{ flex:none; margin-top:2px; }
.xav-est b{ font-weight:600; }
.xav-ok svg{ color:var(--ok); }
.xav-mal{ color:var(--urge); }
.xav-prev{ display:flex; gap:var(--e-1); justify-content:space-between; background:var(--pag); border:1px solid var(--linea); border-radius:var(--r-flota); padding:var(--e-3) var(--e-2) var(--e-2); }
.xav-fig{ margin:0; flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:var(--e-2); }
.xav-fig figcaption{ font-size:var(--t-meta); color:var(--apagado); text-align:center; }
.xav-fig .xc-prev{ width:100%; max-width:72px; }
.xav-fig .xc-svg{ display:block; width:100%; height:auto; overflow:visible; }
.xav-notas{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--e-1); font-size:var(--t-meta); line-height:1.4; color:var(--medio); }
.xav-errs{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--e-2); }
.xav-errs li{ border:1px solid var(--urge); border-radius:var(--r-flota); padding:var(--e-2) var(--e-3); line-height:1.45; color:var(--tinta); overflow-wrap:anywhere; }
.xav-errs code{ display:block; margin-top:var(--e-1); font-family:ui-monospace, Menlo, monospace; font-size:var(--t-meta); color:var(--apagado); overflow-wrap:anywhere; }
.xav-pista{ margin:0; font-size:var(--t-meta); line-height:1.4; color:var(--apagado); }
.xav-leg{ margin:0; font-size:var(--t-meta); line-height:1.45; color:var(--apagado); }
.xav-manual{ display:flex; flex-direction:column; gap:var(--e-2); }
.xav-pie, .xav-acc{ display:flex; gap:var(--e-3); justify-content:flex-end; align-items:center; flex-wrap:wrap; }
.xav-sep{ height:1px; background:var(--linea); }
.xav-quitar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--e-3); }
.xav-lnk{ min-height:44px; display:inline-flex; align-items:center; padding:0; background:none; border:0; font:inherit; color:var(--texto); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.xav-btn{ flex:none; min-height:40px; padding:0 var(--e-4); border-radius:var(--r-pildora); border:1px solid transparent; font:inherit; display:inline-flex; align-items:center; justify-content:center; gap:var(--e-2); cursor:pointer; white-space:nowrap; }
.xav-btn[disabled]{ opacity:.45; cursor:default; }
.xav-pri{ background:var(--boton); color:var(--boton-t); }
.xav-sec{ background:none; border-color:var(--punto); color:var(--tinta); }
.xav-ghost{ background:none; color:var(--medio); }
.xav-peligro{ background:var(--urge); color:var(--urge-t); }
@media (hover:hover){ .xav-x:hover, .xav-ghost:hover, .xav-lnk:hover{ color:var(--tinta); } .xav-sec:hover{ border-color:var(--medio); } }
.xav :is(button, textarea):focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
/* Telefono: sale desde abajo, ocupa casi toda la pantalla y los botones se apilan a lo ancho con el principal arriba, al alcance del pulgar. El campo de 16 px: debajo de eso iOS hace zoom al enfocarlo. */
.xav-ov.xav-tel{ align-items:flex-end; padding:0; }
.xav.xav-hoja{ position:relative; width:100%; max-width:none; max-height:92vh; padding:var(--e-2) var(--e-4) calc(var(--e-4) + env(safe-area-inset-bottom)); border-radius:var(--r-flota) var(--r-flota) 0 0; transform:translateY(100%); animation:none; transition:transform var(--d-hoja-sale) var(--curva-cambia); }
.xav.xav-hoja.abierto{ transform:none; transition:transform var(--d-hoja) var(--curva-arrastre); }
.xav.xav-hoja.xav-sin-anim, .xav.xav-hoja.xav-sin-anim.abierto{ transition:none; }
.xav-hoja .xav-ta{ font-size:var(--t-campo); }
.xav-hoja .xav-fig figcaption{ font-size:var(--t-eti); }   /* cinco columnas en 375 px: «Preguntando» a 12 px se montaba sobre su vecina */
.xav-hoja .xav-pie, .xav-hoja .xav-acc{ flex-direction:column-reverse; align-items:stretch; }
.xav-hoja .xav-fila-err{ flex-direction:column; align-items:stretch; }
.xav-hoja .xav-btn{ min-height:46px; }
@media (prefers-reduced-motion: reduce){
  .xav-ov, .xav{ animation:co-fundido 120ms linear both; }
  .xav.xav-hoja, .xav.xav-hoja.abierto{ transform:none; transition:opacity 120ms linear; animation:co-fundido 120ms linear both; }
}
html.movimiento-reducido .xav-ov, html.movimiento-reducido .xav{ animation:co-fundido 120ms linear both; }
html.movimiento-reducido .xav.xav-hoja, html.movimiento-reducido .xav.xav-hoja.abierto{ transform:none; transition:opacity 120ms linear; animation:co-fundido 120ms linear both; }