/* ========================================================================== RETRATOS.CSS — el marco de retrato del brandbook -------------------------------------------------------------------------- FUENTE. Todo lo que hay aquí sale de UNA sola página: la sección "TRATAMIENTO FOTOGRÁFICO" del Punto37_BRANDBOOK.pdf, donde el arte monta el retrato de Shirley Macías. Las formas se extrajeron del propio PDF (se borró la foto, se redactó el texto y se trazaron los vectores que quedaban), no se dibujaron a ojo. Por eso los números de esta hoja son medidas, no gustos: · el giro de las barras -5.91° (dirección del texto del arte) · alto de barra / cuerpo 1.53 el nombre · 1.31 el cargo · separación entre las dos barras 0.27 del alto de la barra del nombre · cuerpo del cargo / del nombre 1.28 (sí: el cargo es el grande) · crema #F2EBE2 · azul del garabato #3FA9F5 · azul de barra #3EA8F4 → #62B5F0 (izquierda → derecha) · verde del gancho #79C843 → #32A81B (izquierda → derecha) · negro del nombre y del cargo #000 EL MARCO SUSTITUYE A LA NUBE, no convive con ella. La nube es el recurso de las fotos de PROGRAMAS (--nube-foto en .foto-nube, --nube-chip en las cifras); el marco de gota es el recurso de los RETRATOS DE PERSONAS. Son dos recortes distintos del mismo brandbook y cada uno tiene su sitio. Montar el marco encima de la nube dejaría dos siluetas peleando sobre la misma foto y el retrato dejaría de leerse como cualquiera de los dos recursos. Así que aquí, y SÓLO dentro de .equipo, la nube se retira: la máscara pasa a ser la gota del brandbook y la sombra de nube de profundidad.css la releva la sombra elíptica que el propio arte pone bajo la figura. La nube sigue intacta en todo lo demás del sitio. ORDEN DE CAPAS, comprobado ampliando el PDF pieza por pieza. No es el orden que uno supondría: el gancho verde y los garabatos van ENCIMA de la foto (el verde corta el torso del muchacho, el rayado pasa por encima de la cara de la niña, la estrellita se posa en la mejilla). De abajo a arriba: 1 sombra · 2 blob crema · 3 foto · 4 trazos · 5 gancho · 6 barras LO QUE CAMBIÓ EN LA SEGUNDA PASADA (el cliente rechazó la primera) ----------------------------------------------------------------- Se volvió a medir el PDF, esta vez a nivel de píxel y de vector, y salieron cuatro números que no cuadraban. Están anotados en su sitio, pero conviene tenerlos juntos porque son los que mandan en toda esta hoja. Todo lo que sigue es "% del blob", es decir del conjunto crema+foto, que es la pieza a la que el arte refiere todo lo demás: brandbook antes ahora proporción del lienzo 0.852 0.948 0.851 alto de la barra del nombre 5.45% 7.21% 5.73% alto de la barra del cargo 5.99% 6.38% 5.73% hueco entre las dos barras 1.45% 1.39% 1.49% el bloque de las dos 12.89% 14.97% 12.95% cuerpo del nombre 3.56% 4.16% 3.74% cuerpo del cargo 4.57% 3.61% 4.23% el bloque arranca en 66.1% 61.6% 66.4% y termina en 79.0% 86.6% 79.4% La columna "ahora" está medida en el navegador sobre la tarjeta de 360 px, no calculada. Las tres anchuras de la rejilla dan lo mismo, porque el cuerpo va en cqw (más abajo). Las dos filas que más se notaban: el lienzo (el marco era un 11% más ancho de lo que le toca para su alto, y por eso se veía apretado) y el cuerpo del cargo (en el arte el cargo es MÁS grande que el nombre, 25.2 pt contra 19.6; aquí estaba al revés). El cargo no llega al 4.57% exacto porque "EVENTOS DEPORTIVOS Y MÚSICA" son 27 caracteres y a ese cuerpo se parte en dos renglones; 4.24% es lo máximo que aguanta el renglón más largo del equipo con margen de sobra. Es la única cifra de la tabla que no se clava, y se sabe por qué. POR QUÉ LAS BARRAS VAN ARRIBA DEL TODO Y NO BAJO EL VERDE. En el arte los tres dedos del gancho cruzan por delante del arranque de las barras, porque ahí el nombre es uno solo y cabe de sobra. Aquí los nombres miden entre 5 y 26 caracteres y la barra crece con el texto: si el verde quedara encima, en algún nombre largo taparía letras. Se invierte ese único par y el resto del orden queda igual. Va enlazada ANTES de profundidad.css, así que todo lo que tenga que ganarle a esa hoja lleva especificidad de sobra (.equipo .persona ... contra .persona pelado). Está anotado en cada caso. ========================================================================== */ :root{ --p37-crema:#F2EBE2; --p37-barra-a:#3EA8F4; --p37-barra-b:#62B5F0; --p37-giro:-5.91deg; } /* El sprite: una sola copia de las seis piezas para los diez retratos. NO puede llevar display:none — con display:none Safari deja de resolver el clipPath al que apunta la foto y los retratos salen sin recortar. El truco de siempre (posición absoluta y tamaño cero) sí lo conserva. */ .p37-piezas{ position:absolute; width:0; height:0; overflow:hidden } /* --- LA CAJA DEL MARCO --------------------------------------------------- Las rutas del arte están trazadas sobre un lienzo de 470 × 496 unidades y ahí siguen: no se ha vuelto a tocar ni una coordenada. Lo que cambia es la caja que las recibe. POR QUÉ 470/552 Y NO 470/496. Midiendo el PDF a píxel, el conjunto crema+foto del arte ocupa 424 × 551 (proporción 0.770) y la composición entera 471 × 553 (0.852). Nuestro trazado daba 412 × 481 (0.856) dentro de una caja 470 × 496 (0.948): la gota había salido un 11% más gorda de lo que es en el brandbook, y con ella todo el marco. Eso es lo que el cliente leyó como "apretado". Se corrige estirando el lienzo en vertical, no retrazando: los dos .marco llevan preserveAspectRatio="none" y la caja pasa a 470/552 = 0.8514, que es la proporción del brandbook (0.8517). El arte se alarga un 11.4% y la gota queda en 0.769 contra el 0.770 medido en el PDF. Los dos números —el de la composición y el de la gota— piden el mismo estiramiento por caminos distintos, que es la señal de que el estiramiento es el que faltaba. El precio son los trazos: al estirar, una línea horizontal engorda un 11% más que una vertical. Con grosores de 2 a 2.6 unidades (menos de 2 px en pantalla) no se distingue, y se prefiere eso a redibujar seis piezas. Y sí: .retrato deja de ser lo que era. Se le quita la máscara de nube, el fondo de color (morado/azul rotatorios), la rejilla interna y el recorte. Gana .equipo por delante para pasarle por encima a estilo.css y a profundidad.css sin recurrir a !important. */ .equipo .persona .retrato{ aspect-ratio:470/552; position:relative; display:block; /* 2 px era la separación de la primera pasada y dejaba el párrafo pegado al pie del marco, que es medio motivo de la queja "choca con el texto". El arte no tiene párrafo debajo; aquí sí, y necesita un renglón de aire para leerse como otro registro y no como continuación de la barra del cargo. */ margin-bottom:18px; overflow:visible; background:none; background-image:none; -webkit-mask-image:none; mask-image:none; } /* La sombra con forma de nube que profundidad.css cuelga de .persona::before sobra: el brandbook trae la suya, elíptica y mucho más suave, dentro del propio marco. Dos sombras a la vez ensuciarían el pie de la figura. */ .equipo .persona::before{ content:none } /* Las dos capas de vectores. pointer-events:none para que no se coman el hover de la tarjeta ni la selección del texto que llevan al lado. OJO CON EL RECORTE: un que no es la raíz del documento trae overflow:hidden de fábrica, así que RECORTA a su propio viewBox. No se toca —dejarlo visible mandaría los trazos al pasillo entre tarjetas—, pero manda una condición sobre las marcas: todo lo que se coloque tiene que caber dentro de 0…470 × 0…496. Una pieza puesta en x = −8 no sangra: se ve cortada por una línea recta invisible, que es peor que no ponerla. El generador de las composiciones lo comprueba pieza por pieza. */ .equipo .persona .marco{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; } /* --- LA FOTO ------------------------------------------------------------- Va colocada en el hueco exacto que la gota ocupa dentro del lienzo del arte (x 30.2, y 13.0, 389.8 × 470.7 de 470 × 496) y recortada con esa misma gota. Los porcentajes no cambian al estirar el lienzo: son proporción de ancho y de alto por separado, y el estiramiento es sólo vertical. El clipPath está en unidades objectBoundingBox, así que se alarga con la caja él solo. Lo que sí cambia con el estiramiento es el RECORTE: la caja de la foto pasa de proporción 0.828 a 0.744, y como el archivo viene en 560 × 624 (0.897), el object-fit:cover deja fuera un 8.56% del ancho por cada lado en vez del 3.86% de antes. Ese número hace falta más abajo, en la nota de los trazos: es lo que convierte "dónde está la cara en el archivo" en "dónde está la cara en el marco". object-position lleva 22% en el eje vertical desde la primera pasada. Hoy no hace nada —el alto es el lado que ajusta, así que no sobra nada que correr— pero se deja: si mañana entra una foto con otra proporción, vuelve a mandar. grayscale(1) no es decoración: el brandbook manda las fotos en blanco y negro y las nuestras ya vienen así. Queda como red de seguridad para el día en que alguien reemplace un archivo por uno a color. */ .equipo .persona .retrato .foto{ position:absolute; left:6.428%; top:2.621%; width:82.915%; height:94.899%; object-fit:cover; object-position:center 22%; -webkit-clip-path:url(#p37-gota); clip-path:url(#p37-gota); filter:grayscale(1); } /* --- LAS BARRAS DEL NOMBRE Y EL CARGO ------------------------------------ Las barras NO son SVG: llevan texto real, seleccionable y traducible, y su ancho depende del nombre. Son cajas CSS que reproducen la geometría medida. El giro se aplica al CONTENEDOR, nunca a las barras sueltas, por dos razones: a) animaciones.js le cuelga la clase .rv a .persona .rol, y profundidad.css neutraliza el revelado con `transform:none !important`. Un giro puesto en .rol se perdería en cuanto el JS arrancara. .etiqueta no está en ninguna receta de revelado, así que ahí el transform sobrevive. b) en el arte las dos barras están giradas lo mismo y la de abajo aparece 4 pt más a la derecha que la de arriba. Ese desplazamiento no está puesto a mano: entre centro y centro de barra hay 39.5 pt (15 + 8 + 16.5) y 39.5 × sen(5.91°) = 4.07. O sea que basta apilarlas y girar el conjunto para que el corrimiento salga solo. Y van POSICIONADAS DENTRO del marco, no debajo con un margen negativo. Con margen negativo el bloque entero subía, y detrás de él subía también el párrafo de la ficha, que terminaba impreso sobre el gancho verde. Absolutas dentro de .retrato el párrafo arranca donde acaba el marco y ya está. EL ANCLAJE, MEDIDO OTRA VEZ. La primera pasada tomó la altura del bloque de los bitmaps del PDF, y esos bitmaps traen un margen transparente alrededor para poder girar: por eso salían 54 y 55 pt de barra y el bloque quedaba demasiado alto y demasiado bajo a la vez. Midiendo el AZUL pintado, columna a columna y por fuera del texto, las barras del arte son de 30 y 33 pt con 8 pt de hueco: 71 pt de bloque sobre un blob de 551, o sea 12.9%. Empieza en el 66.1% del blob y acaba en el 79.0%. Trasladado a esta caja —el blob va del 1.81% al 98.87% del alto del marco— el bloque tiene que ir del 66.0% al 78.5%. De ahí bottom:21.5%. Antes iba del 61.6% al 86.6%, o sea que sobresalía por arriba y por abajo, y por abajo se comía el pico de la gota. Eso es lo que el cliente vio. */ .equipo .persona .etiqueta{ position:absolute; /* Los 4 px de la derecha no son estética: al girar sobre el borde derecho, la esquina inferior baja y sale (alto/2 × sen 5.91° ≈ 3 px) por fuera de la tarjeta. Con esa holgura la pieza girada cabe entera y no asoma por el costado ni cuando el hover agranda el retrato un 4%. */ right:4px; bottom:21.5%; max-width:calc(100% - 8px); text-align:right; transform:rotate(var(--p37-giro)); transform-origin:100% 50%; } .equipo .persona .etiqueta h4, .equipo .persona .etiqueta .rol{ display:block; width:-moz-fit-content; width:fit-content; max-width:100%; margin-left:auto; color:#000; text-transform:uppercase; text-align:left; background-image:linear-gradient(to right,var(--p37-barra-a),var(--p37-barra-b)); } /* El nombre: Oliviar Black, el mismo corte que usa el arte. El relleno vertical baja de .32em a .2em. No es un capricho de aire: en el arte la barra del nombre mide 30 pt para un cuerpo de 19.6, o sea que sobran 5 pt por lado, 0.21em. La barra del brandbook es AJUSTADA; el peso que tiene se lo da la letra, no el relleno. Con .32em la barra salía un 32% más alta de lo que le toca y el bloque entero se desbordaba por abajo. */ .equipo .persona .etiqueta h4{ margin-bottom:0; padding:.2em .62em; font-size:15px; font-weight:900; line-height:1.1; letter-spacing:.012em; } /* El cargo: peso ligero, como pide el brandbook, y MÁS GRANDE QUE EL NOMBRE. Esto último estaba al revés en la primera pasada (13 px contra 15) y es la inversión que más se notaba: en el arte el cargo va a 25.2 pt y el nombre a 19.6, una relación de 1.28. Aquí llega a 1.13 y no a 1.28 por una razón que se puede medir: el cargo más largo del equipo es "EVENTOS DEPORTIVOS Y MÚSICA", 27 caracteres. A 19 px se parte en dos renglones dentro de la tarjeta; a 17 px cabe entero con margen en las dos anchuras del sitio. El interletrado también baja de .055em a .035em, que son los caracteres de más que hacen falta para que ese renglón respire. Sigue siendo tracking abierto, que es lo que pide el corte ligero. El peso se queda en Light (300) y no en el Thin (200) del arte: a 17 px de pantalla el Thin se deshace. La relación que el brandbook establece —nombre pesado, cargo ligero y más grande— se conserva entera. */ .equipo .persona .etiqueta .rol{ /* el hueco entre barras también en em, para que siga al cuerpo: .35 × 17 px = 5.95, el 1.45% de blob que mide en el arte */ margin-top:.35em; /* estilo.css le pone 8 px de margen inferior al .rol de la ficha vieja, que ahí separaba el cargo del párrafo. Aquí el cargo es una barra anclada por abajo: esos 8 px se colaban dentro de la caja y subían las dos barras 8 px por encima de donde las manda el arte. */ margin-bottom:0; padding:.13em .6em; font-size:17px; font-weight:300; line-height:1.1; letter-spacing:.035em; } /* El párrafo vuelve a la izquierda para acompañar a las barras, que el arte ancla a la derecha. Centrado bajo unas barras en diagonal se leía descolgado. */ .equipo .persona p{ text-align:left } /* --- RESPALDO POR VENTANA ------------------------------------------------- Sólo llega a verse en navegadores sin consultas de contenedor (anteriores a 2023). Ahí el cuerpo no puede seguir a la tarjeta y hay que aproximarlo por tramos, porque la misma ventana da tarjetas muy distintas según en cuántas columnas caiga la rejilla. Medido, tramo a tramo: ventana columnas tarjeta cuerpo que cabe hasta 420 1 264 … 340 11.5 / 13 421 – 600 1 340 14 / 16 601 – 780 2 260 … 349 11.5 / 13 781 – 900 2 349 … 360 15 / 17 (el de arriba) 901 – 1140 3 268 … 335 11.5 / 13 desde 1141 3 340 … 360 15 / 17 (el de arriba) Los tramos "11.5 / 13" son los que aguanta la tarjeta más estrecha de cada uno con "EVENTOS DEPORTIVOS Y MÚSICA" en un solo renglón. Quedan pequeños para las tarjetas grandes del mismo tramo: es el precio de aproximar por ventana, y por eso existe el bloque de abajo. */ @media (max-width:420px), (min-width:601px) and (max-width:780px), (min-width:901px) and (max-width:1140px){ .equipo .persona .etiqueta h4{ font-size:11.5px } .equipo .persona .etiqueta .rol{ font-size:13px } } @media (min-width:421px) and (max-width:600px){ .equipo .persona .etiqueta h4{ font-size:14px } .equipo .persona .etiqueta .rol{ font-size:16px } } /* --- EL CUERPO SIGUE A LA TARJETA, NO A LA VENTANA ----------------------- Éste es el camino bueno; los px de más arriba y los tramos de aquí encima son sólo el respaldo. El problema que resuelve: la tarjeta no mide siempre 360. La rejilla la reparte en tres, en dos o en una columna, y por el camino baja hasta 260 px (a 601 px de ventana, con dos columnas recién estrenadas y todavía sin el tope de 340). A 260 px de tarjeta, "EVENTOS DEPORTIVOS Y MÚSICA" a 17 px no cabe: la barra se parte en dos renglones, el bloque crece y se acaba el 12.9% del blob que manda el arte. Aproximar por ventana es lo que hace el respaldo, y se le nota: la misma ventana da tarjetas muy distintas según en cuántas columnas caiga la rejilla, así que los tramos tienen que ir por lo peor de cada uno y quedan pequeños para el resto. Medir contra la TARJETA lo arregla de raíz: 4.17cqw son los 15 px de un marco de 360 y 4.72cqw los 17, y así las dos barras miden el mismo porcentaje del marco en cualquier anchura. Va DESPUÉS de los dos respaldos a propósito: los tres declaran la misma propiedad con la misma especificidad, o sea que gana el último de la hoja. Donde haya consultas de contenedor tiene que ganar ésta; donde no, quedan los px, que funcionan. Nunca al revés. container-type:inline-size trae contención de disposición y de tamaño en línea, no de pintado, así que no recorta nada ni cambia dónde caen los trazos. Comprobado midiendo las marcas antes y después: mismas cajas. */ @supports (container-type:inline-size){ .equipo .persona .retrato{ container-type:inline-size } .equipo .persona .etiqueta h4{ font-size:4.17cqw } .equipo .persona .etiqueta .rol{ font-size:4.72cqw } } /* --- ALTO CONTRASTE ------------------------------------------------------ Quien pide más contraste quiere leer, no mirar. Las barras pierden el degradado y se quedan en el azul más oscuro de los dos (9.4:1 contra el negro, frente a 8.1:1 del claro), y el marco recibe un canto firme. */ @media (prefers-contrast:more){ .equipo .persona .etiqueta h4, .equipo .persona .etiqueta .rol{ background-image:none; background-color:var(--p37-barra-a); } .equipo .persona .etiqueta .rol{ font-weight:400 } } /* ========================================================================== LOS TRAZOS — por qué no hay una sola regla CSS aquí -------------------------------------------------------------------------- Las marcas azules (ala, rayado, estrella, tildes, coma) NO se colocan desde esta hoja. Van como atributo transform de cada dentro del de nosotros.html, en diez grupos #p37-trazos-1 … #p37-trazos-10. Es deliberado. Un transform de SVG puesto como atributo se resuelve siempre sobre el origen del sistema de usuario, en cualquier navegador y desde siempre. El mismo transform en CSS depende de transform-box y de transform-origin, cuyo valor inicial para elementos SVG cambió con el tiempo y no se comporta igual en todas las versiones. Con diez composiciones distintas, un desfase silencioso en un navegador viejo dejaría marcas encima de caras sin que nadie se entere. El atributo no tiene ese riesgo. EL CRITERIO QUE VALE PARA LAS DIEZ ---------------------------------- La primera pasada ponía las cinco piezas soldadas en un grupo único y lo estampaba igual en las diez fichas. Dos consecuencias, las dos ciertas: se leía como una calcomanía repetida, y como las diez fotos están encuadradas distinto, varias marcas caían sobre rostros. Ahora cada juego se calcula contra SU foto. Se detectó el rostro en las diez imágenes, se proyectó a coordenadas del lienzo pasando por el recorte del object-fit:cover (el 8.56% por lado de más arriba), y a cada marca se le exigió quedar fuera de esa caja con 10 unidades de aire —y fuera también de la franja de las barras y del borde—. La caja se extiende hasta y=0 aunque el rostro empiece más abajo: por el pelo, las gorras y el sombrero de Jhon. La variación no se inventó: sale de ahí. Quien tiene la cara ancha en su encuadre deja menos columna libre y la pieza entra más pequeña o se pasa al otro lado; quien la tiene centrada y pequeña admite el ala casi a tamaño natural. Sólo los giros, el espejo de Fabio y qué pieza lleva cada ficha se escogieron a mano, para que la rejilla tenga ritmo y ninguna ficha repita a su vecina en ninguna de las tres anchuras de la rejilla (3, 2 y 1 columna). ficha cara (x0..x1) marcas (escala · giro) Ginna 145..311 ala 0.78 −4° · tildes ×2.00 +14° Sergio 128..289 rayado 0.88 +2° · coma ×1.05 −9° Neyder 115..312 ala 0.58 +7° · estrella ×1.05 +15° Casadiego 93..354 rayado 0.68 −3° · estrella ×0.95 −16° Jhon 138..316 ala 0.70 −8° · rayado 0.55 +4° Jesús 113..344 rayado 0.72 +4° · coma ×1.20 +8° Felipe 166..311 ala 0.92 −2° · rayado 0.62 −6° · tildes ×1.70 −10° Fabio 46..296 ala 0.84 ESPEJO +6° · estrella ×0.90 +9° Oswaldo 171..333 ala 0.92 +5° · coma −6° Shirley 98..282 rayado 0.94 +3° · tildes ×2.20 −12° · estrella ×0.85 −8° Las escalas de la tabla son las que quedaron DESPUÉS de recortarlas contra la columna libre. Se pidieron más grandes; a Casadiego, por ejemplo, se le pidió 0.80 para el rayado y su cara, que es un primer plano, sólo dejó sitio para 0.68; a Neyder el ala se le quedó en 0.58. Ese recorte automático es lo que hace que la partitura valga igual para un plano medio y para un primerísimo plano, y de paso es lo que da la variación: no hay dos columnas libres iguales porque no hay dos encuadres iguales. Medido en el navegador a 375, 600, 900 y 1440 px: ninguna marca toca la caja de la cara en ninguna ficha, y el aire más corto que queda es de 5.0 px. LA ESTRELLITA. En el arte se posa en la mejilla del muchacho, que va descentrado y grande. Aquí las diez caras están centradas, así que ese mismo punto cae sobre un ojo o sobre la nariz según la foto —era el defecto que el cliente señaló—. No se quita: se le aplica el mismo criterio que a las demás y baja al hombro o al costado, fuera del rostro, en las cuatro fichas donde entra. Sigue siendo lo que es en el brandbook: un acento pequeño posado sobre la figura. SI MAÑANA CAMBIA UNA FOTO (o vuelve la ficha de Francisco), hay que rehacer la cuenta de esa ficha: cambia el encuadre, cambia la columna libre y las marcas pueden acabar sobre la cara. No basta con copiar el grupo de otra. ========================================================================== */ /* ========================================================================== DIRECTIVOS — blobs morados del brandbook (nosotros.ai) -------------------------------------------------------------------------- El cliente corrigió las 3 formas (las versiones anteriores -trébol de 3 lóbulos, squircle, quatrefoil/doble-trébol- no correspondían al diseño real): · Ginna → nube-retrato (#p37-nube-retrato) morado claro — la misma "etiqueta de nube en forma de triángulo" que --nube-retrato (estilo.css), un círculo arriba + dos abajo + base redondeada. · Sergio → halo redondo (#p37-halo) morado claro — un círculo simple (rx≠ry a propósito: la caja .retrato no es cuadrada, y con rx=ry se vería ovalado, no redondo). · Neider → nube-chip (--nube-chip, vía mask-image, NO clip-path) morado oscuro — la MISMA nube que usan los chips de cifras del hero de Inicio ("la etiqueta de nubes donde están los números"), reusada tal cual. Se ocultan la gota crema, el gancho verde y los garabatos (los dos .marco); la foto se recorta a la forma y detrás va un blob morado que asoma como reborde. Selectores con .rejilla para ganar a las reglas de la gota. ========================================================================== */ .equipo .persona .marco{ display:none } /* MARCO = UNA SOLA IMAGEN YA COMPUESTA (persona + blob), no dos capas. El cliente mandó los 3 recortes finales (persona ya encajada dentro de su marco, fondo gris de mockup) — se le quitó ese fondo gris (color-key + componente conexo más grande, para no dejar ruido de grano alrededor) y quedó cada uno en equipo/{ginna,sergio,neyder}-marco.webp con transparencia real. Ya no hay ::after de fondo ni % de hueco que calcular a mano: el ES el marco completo, se ajusta con object-fit:contain y listo. */ /* 🔓 Actualizado 2026-08-13: el cliente mandó los 3 PNG finales de FINALES/NOSOTROS/{GINNA,SERGIO,NEYDER}.png — más resolución, sin bordes pixelados. Reemplazan a los equipo/{ginna,sergio,neyder}-marco.webp anteriores (mismos nombres de archivo, mismo criterio: recorte a bbox + transparencia real ya limpia en el PNG de origen, sin necesitar chroma-key). La técnica de object-fit:contain no cambia, sólo el aspect-ratio de cada caja porque el recorte final de cada PNG nuevo no es igual al anterior. */ .equipo .persona .retrato .foto{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:contain; background:none; -webkit-clip-path:none; clip-path:none; } .equipo .persona .etiqueta{ z-index:3 } /* Cada composición trae su propia proporción (no son cuadradas ni comparten relación de aspecto entre las tres). */ .equipo .d-ginna .retrato{ aspect-ratio:574/496 } .equipo .d-sergio .retrato{ aspect-ratio:551/513 } .equipo .d-neider .retrato{ aspect-ratio:552/514 }