/* ========================================================================== FUNDACIÓN PUNTO 37 — el personaje rojo del cierre "Tu APOYO hace la diferencia" -------------------------------------------------------------------------- El cliente pidió cuatro cosas sobre esta figura: que no se recorte y quede centrada, que se vectorice, que se le complete el lápiz y que se anime como los muñequitos de Nosotros (el brazo escribiendo y un crecimiento suave). QUÉ ERA Y QUÉ ES AHORA Era img/personaje-rojo.webp, un recorte de 460x567 px del arte original. Ese archivo tenía dos defectos MEDIDOS sobre el propio píxel, que son justo los que el cliente veía: · la figura no está centrada en su archivo: ocupa x 0..318 de 460 y y 91..416 de 567. O sea 141 px muertos a la derecha y 151 px abajo, contra 0 a la izquierda y 91 arriba. Como el ancho de .personaje se aplica a la CAJA y no al dibujo, la figura salía pegada arriba y a la izquierda de su hueco, que es exactamente el "no está centrado". · el lápiz está CORTADO por el borde izquierdo del archivo: sus dos aristas llegan a x=0 y ahí se acaban. La punta nunca estuvo en el archivo. Ahora es un SVG en línea, redibujado a mano (no vectorizado automáticamente: la figura son círculos solapados, elipses y curvas sueltas, y redibujarla da un trazo más limpio y un peso muchísimo menor que cualquier calco). Los colores salen del propio .webp, muestreados sobre píxeles macizos: cuerpo rgb(255,1,0) -> #FF0100 trazo rgb(0,0,0) -> #000 ojo rgb(254,254,254) -> #fff sombra rgba(125,36,37,.5) (que sobre blanco da el rgb(190,146,146) que se lee en el archivo) Ninguno de esos cuatro es un color nuevo del sitio: son los del arte. El rojo del personaje NO es --rojo (#FF3C00): el arte lo dibujó con rojo puro y se respeta, igual que se respetaba cuando era una imagen. EL SISTEMA DE COORDENADAS DEL viewBox El dibujo se levantó midiendo sobre el raster, así que internamente vive en las coordenadas de aquel archivo, desplazadas para que el viewBox arranque en "0 0". Eso último no es capricho: con transform-box:view-box, un transform-origin:0 0 cae sobre la esquina superior izquierda del viewBox. Si el viewBox empezara en negativo, los pivotes escritos en los @keyframes girarían alrededor de otro punto y nadie entendería por qué. El viewBox es 409x374 y la tinta ocupa 355x326 dentro de él. Medido sobre el render, no calculado: márgenes 27 izq / 27 der / 24 arriba / 24 abajo. La figura está centrada en su propia caja POR CONSTRUCCIÓN, y ese margen de 24 es a la vez el aire que necesita el movimiento para no tocar el borde (el recorrido máximo del extremo del lápiz, sumando giro y crecimiento, es de unas 14 unidades). ORDEN DE CARGA Va la ÚLTIMA de todas, después de profundidad.css: ... estilo.css, marca.css, cierre.css, animaciones.css, transiciones.css, profundidad.css, personaje.css El tamaño de .personaje lo declaran estilo.css (línea 373) y cierre.css (línea 128) con la misma especificidad; esta hoja gana por ORDEN, no subiéndole peso al selector. Invertir la carga devuelve el tamaño viejo, que está calculado para una caja con 31% de aire muerto y aquí sobredimensiona. POR QUÉ EL MOVIMIENTO NO VA EN .personaje SINO DENTRO DEL SVG animaciones.js arma este elemento con la receta rv-zoom (su línea 89), así que .personaje termina con la clase .rv. Y profundidad.css cierra con: html.anim .rv, html.anim .rv-on { transform:none !important; animation:none !important } para dejar apagadas las entradas al hacer scroll. Cualquier animación puesta sobre .personaje moriría ahí mismo, en silencio. Por eso todo el movimiento cuelga de grupos INTERNOS (.pr-crece, .pr-brazo, .pr-sombra), que no llevan .rv y a los que esa regla no alcanza. Y POR QUÉ NADA DE ESTO DEPENDE DEL SCROLL Aquí no hay ni un fotograma con opacity distinta de 1 ni un estado de reposo que esconda nada. Son tres bucles perpetuos: arrancan solos y se ven desde el primer cuadro. Si mañana el vigía de animaciones.js quitara html.anim, la figura se queda quieta pero ENTERA; nunca invisible. ========================================================================== */ /* ========================================================================== 1. LA CAJA: TAMAÑO Y SITIO -------------------------------------------------------------------------- El SVG es un elemento en línea; sin display:block arrastra el espacio de la línea base y aparece un hueco de tres o cuatro píxeles bajo los pies. ========================================================================== */ .apoyo .personaje{ display:block; height:auto; /* La caja pasa de 230 px a 200 px y aun así la figura se ve MÁS grande, que es lo que pedía cierre.css cuando hablaba de "ganar presencia". La cuenta: antes el dibujo ocupaba el 69,1% del ancho de la caja (318 de 460 px), o sea 159 px de los 230; ahora ocupa el 86,8% (355 de 409), o sea 174 px de los 200. Menos hueco en la maqueta, 9% más de figura y cero aire muerto. */ /* 180px se veía chico contra el título en escritorio (pedido del cliente: "la muñeca debe ir más grande"). 230px, ~28% más. */ width:230px; /* Los 18 px de cierre.css se quedaban cortos: aquella caja traía 151 px de nada por debajo del dibujo y esta no trae ninguno, así que la figura bajaba de golpe respecto de la columna de texto. Este margen devuelve los pies a la altura a la que el arte los tenía. */ margin-bottom:74px; } /* ========================================================================== 2. LA PINTURA -------------------------------------------------------------------------- Nada de esto va en atributos dentro del marcado: los cinco HTML llevan la misma figura y un cambio de color debe ser un cambio en un sitio, no en cinco. ========================================================================== */ /* El cuerpo son seis círculos solapados del mismo relleno dentro de un grupo: así se unen sin costura, sin necesidad de un path de contorno. Los centros y los radios están ajustados por mínimos cuadrados contra la silueta roja del .webp (error máximo 2,5 px sobre una figura de 355 de ancho). */ .p37r .pr-nube circle{ fill:#FF0100 } /* Trazos: brazos, piernas, manos, rizo, línea de la barriga. Van SIN relleno porque en el arte el interior de brazos y piernas es transparente y deja ver el rojo del cuerpo por debajo (comprobado en el alfa del .webp: dentro del brazo hay alfa 0, no blanco). */ .p37r .pr-trazo path{ fill:none; stroke:#000; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } /* Las tres manchas macizas: los dos pies en punta y la boca. */ .p37r .pr-macizo path{ fill:#000 } /* Los ojos. El blanco lleva su propio filete negro; la pupila es un círculo RECORTADO por la elipse del ojo (en el arte la pupila desborda el blanco por la izquierda y se corta contra él), y el destello es el rombo de cuatro puntas del arte, en blanco sobre la pupila. */ .p37r .pr-blanco{ fill:#fff; stroke:#000; stroke-width:2.2 } .p37r .pr-blanco-plano{ fill:#fff } .p37r .pr-ojos g circle{ fill:#000 } /* La sombra del suelo: no es gris, es el mismo granate del arte a media opacidad. Sobre el blanco de .apoyo devuelve exactamente el rgb(190,146,146) que trae el archivo. */ .p37r .pr-sombra{ fill:#7D2425; opacity:.5 } /* El lápiz. En el arte su contorno no es una línea continua sino una cadena de perlas rojas, y eso se reproduce con guiones de longitud casi cero y remate redondo: cada guión se convierte en un punto del diámetro del trazo. El paso (6,4 + 0,1) y el diámetro (6,2) salen de medir las perlas del archivo: radio medio 2,37 px y máximo 3,61 px, casi tocándose entre sí. */ /* La figura deja salir el trazo rojo que va de la O de APOYO al lápiz (queda a la izquierda del viewBox). Sin esto el lo recortaría. */ .p37r{ overflow:visible } /* Traza roja punteada desde la O de APOYO hasta el lápiz, como el .ai. Mismo estilo de cuentas rojas que el lápiz. Va estática (fuera de las animaciones) para anclarse a la O; el leve balanceo del brazo no la despega a simple vista. */ .p37r .pr-trace{ display: none !important; } .p37r .pr-lapiz path{ fill:none; stroke:#FF0100; stroke-width:6.2; stroke-linecap:round; stroke-dasharray:.1 6.4; } /* ========================================================================== 3. EL MOVIMIENTO -------------------------------------------------------------------------- Tres bucles, sólo con transform, y con el mismo criterio que nosotros-anim.css usa para los muñequitos de la página Nosotros: · dos animaciones no pueden vivir en el mismo elemento, porque las dos escriben transform y la segunda pisa a la primera. Por eso el crecimiento va en .pr-crece y el giro del brazo en .pr-brazo, que es su hijo. · el giro se escribe como translate(pivote) rotate() translate(-pivote). Es más largo que apoyarse en transform-origin, pero es lo único que deja el pivote a la vista de quien lea el archivo, y el viewBox arranca en 0 0 justamente para que estas coordenadas sean las del dibujo. Los tres periodos (5,4 · 4,6 · 4,6 s) no son múltiplos entre sí del todo, así que el conjunto tarda en repetir una misma postura y no se lee como una calcomanía sacudiéndose en bloque. ========================================================================== */ /* Las dos declaraciones que hacen que los pivotes de más abajo signifiquen lo que dicen. transform-box:view-box ancla el origen al viewBox del SVG y no a la caja de cada figura, y transform-origin:0 0 lo lleva a su esquina superior izquierda, que como el viewBox empieza en "0 0" es el (0,0) del dibujo. Sin estas dos líneas el valor inicial es 50% 50%, o sea el CENTRO del viewBox, y cada rotación saldría desplazada media caja sin que nada avise. Van fuera de html.anim: no son movimiento, son el sistema de referencia. */ .p37r .pr-crece, .p37r .pr-brazo, .p37r .pr-sombra{ transform-box:view-box; transform-origin:0 0 } /* --- 3.1 El brazo escribe ------------------------------------------------- El pivote (126 · 172,70) es el hombro, medido sobre el propio dibujo: es el punto medio entre los dos extremos de las aristas del brazo. Está DEBAJO del ojo izquierdo, que en esta figura desborda el cuerpo hacia la izquierda y se dibuja después que el brazo. Así la articulación nunca asoma: por mucho que gire, el arranque del brazo queda tapado. El ciclo tiene pausa. Los primeros dos tercios está quieto y en el último hace siete trazos cortos con la amplitud cayendo de 4 a 0,5 grados, como quien escribe unas palabras y descansa. Un vaivén continuo se convierte en ruido de fondo a los diez segundos; con la pausa el ojo lo vuelve a ver cada vez. Cuatro grados en el hombro son unas 8 unidades de recorrido en la punta del lápiz, que está a 115 del pivote: se ve el gesto y no se despega la mano del cuerpo. Medido en el navegador a 1440 px de ancho: la punta se mueve 4,8 px en horizontal y 6,7 en vertical sumando giro y respiración. Sin html.anim no hay movimiento y la figura se ve entera y quieta, igual que en Nosotros. La clase la pone animaciones.js. */ html.anim .p37r .pr-brazo{ animation:p37r-escribe 5.4s ease-in-out infinite; } @keyframes p37r-escribe{ 0%,66%,100%{ transform:translate(126px,172.7px) rotate(0deg) translate(-126px,-172.7px) } 70% { transform:translate(126px,172.7px) rotate(-4deg) translate(-126px,-172.7px) } 74% { transform:translate(126px,172.7px) rotate(2.6deg) translate(-126px,-172.7px) } 78% { transform:translate(126px,172.7px) rotate(-3.2deg) translate(-126px,-172.7px) } 82% { transform:translate(126px,172.7px) rotate(2.1deg) translate(-126px,-172.7px) } 86% { transform:translate(126px,172.7px) rotate(-2.5deg) translate(-126px,-172.7px) } 90% { transform:translate(126px,172.7px) rotate(1.4deg) translate(-126px,-172.7px) } 94% { transform:translate(126px,172.7px) rotate(-1.1deg) translate(-126px,-172.7px) } 97% { transform:translate(126px,172.7px) rotate(.5deg) translate(-126px,-172.7px) } } /* --- 3.2 El conjunto respira --------------------------------------------- El "crecimiento suave" que pidió el cliente. Escala desde el punto donde los pies tocan el suelo (238 · 340,70), no desde el centro: creciendo desde el centro la figura se hundiría medio cuerpo bajo su propia sombra en cada ciclo, y creciendo desde arriba parecería colgada. Ensancha algo menos de lo que estira (2,4% contra 3,2%), que es como respira algo que toma aire. Y no lleva ningún translate: apoyada en el suelo, la escala vertical ya levanta la cabeza sola. */ html.anim .p37r .pr-crece{ animation:p37r-respira 4.6s ease-in-out infinite; } @keyframes p37r-respira{ 0%,100%{ transform:translate(238px,340.7px) scale(1,1) translate(-238px,-340.7px) } 50% { transform:translate(238px,340.7px) scale(1.024,1.032) translate(-238px,-340.7px) } } /* --- 3.3 La sombra acompaña ---------------------------------------------- Sin esto el personaje parecería despegar: el cuerpo se ensancha y la mancha del suelo se queda del mismo tamaño, que es lo que hace un objeto que sube. La sombra se ensancha CON él, en el mismo compás y en la misma fase, y sólo a lo ancho: su alto no cambia porque el suelo no se mueve. Va fuera de .pr-crece a propósito. Si estuviera dentro heredaría la escala vertical del cuerpo y se engordaría hacia abajo, que en una elipse tan plana se nota enseguida. */ html.anim .p37r .pr-sombra{ animation:p37r-sombra 4.6s ease-in-out infinite; } @keyframes p37r-sombra{ 0%,100%{ transform:translate(273.5px,342.7px) scale(1,1) translate(-273.5px,-342.7px) } 50% { transform:translate(273.5px,342.7px) scale(1.035,1) translate(-273.5px,-342.7px) } } /* ========================================================================== 4. MOVIMIENTO REDUCIDO -------------------------------------------------------------------------- Quien lo pide ve la figura completa y quieta. Ninguna regla de aquí puede dejar algo en cero: se apagan las animaciones y se limpian los transform, y cada pieza se queda exactamente donde la dejó el dibujo. La sombra conserva su opacidad de reposo, que es su color, no un estado a medias. ========================================================================== */ @media (prefers-reduced-motion:reduce){ html.anim .p37r .pr-crece, html.anim .p37r .pr-brazo, html.anim .p37r .pr-sombra{ animation:none !important; transform:none !important; } html.anim .p37r .pr-sombra{ opacity:.5 !important } } /* ========================================================================== 5. PANTALLAS ESTRECHAS -------------------------------------------------------------------------- Los mismos cortes que ya usan estilo.css y cierre.css (900 y 600). No se inventa ninguno: si el sitio cambia de cortes, esta hoja cambia con él. ========================================================================== */ @media (max-width:900px){ .apoyo .personaje{ width:min(170px,23%); margin-bottom:56px } } @media (max-width:600px){ /* En móvil .apoyo-caja se pone en columna y la figura se centra sola bajo el texto: aquí ya no hay margen que compensar, la figura es la última pieza del bloque. */ .apoyo .personaje{ width:min(148px,40vw); margin:10px auto 0 } } /* ========================================================================== 6. ESCRITORIO SOBRE LA PLANTILLA APLANADA (2026-08-09, ver cierre.css) -------------------------------------------------------------------------- Los 230px de la sección 1 se calcularon para la caja "suelta" del layout viejo (título real + muñeco flotando con margen negativo). Ahora, en escritorio, el muñeco va encima de un hueco medido en la plantilla aplanada, que escala con .apoyo-caja (container-type:inline-size, cierre.css). Esta hoja carga DESPUÉS de cierre.css y gana por orden a igual especificidad, así que sin este bloque el 230px fijo de la sección 1 pisaría el 15.97cqw de cierre.css y el muñeco quedaría fijo mientras la plantilla se escala a su alrededor entre 901 y 1240px de ancho. */ @media (min-width:901px){ .apoyo .personaje{ width:27cqw !important; margin-bottom:0 !important } }