/* =========================================================
Capa de marca · Universidad Andina Virtual
---------------------------------------------------------
Se carga DESPUÉS de core.css. Solo ajusta lo que distingue
a Andina; el motor no se toca. Ver ../INSTITUCION.md
Nace de la capa de Scala (misma estructura RED, mismos
componentes, prefijo ua- en vez de sl-) con el ADN de la
línea gráfica UA: Manrope, azules, cuadros pixelados,
greca andina, sol y estrella.
========================================================= */
/* --- Manrope auto-hospedada ---------------------------------------------
Los .woff los entregó el cliente (docs/Tipografía). Viajan en
fuente/assets/fonts/ de cada curso (la semilla los trae). */
@font-face { font-family: 'Manrope'; font-weight: 300; font-display: swap; src: local('Manrope Light'), url('../fonts/Manrope-Light.woff') format('woff'); }
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: local('Manrope Regular'), url('../fonts/Manrope-Regular.woff') format('woff'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: local('Manrope Medium'), url('../fonts/Manrope-Medium.woff') format('woff'); }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: local('Manrope SemiBold'), url('../fonts/Manrope-SemiBold.woff') format('woff'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: local('Manrope Bold'), url('../fonts/Manrope-Bold.woff') format('woff'); }
@font-face { font-family: 'Manrope'; font-weight: 800; font-display: swap; src: local('Manrope ExtraBold'), url('../fonts/Manrope-ExtraBold.woff') format('woff'); }
/* --- Recursos gráficos de la línea UA, embebidos -------------------------
Viajan dentro de la hoja para que ningún curso dependa de copiarlos:
greca la trama andina de la línea gráfica (pp. 2-3), como máscara:
toma el color del fondo que se le dé
pixeles los cuadros escalonados que muerden las fotos (pp. 7, 8, 16)
sol el destello amarillo (pp. 1, 7, 8)
estrella la estrella coral de cuatro puntas (pp. 7, 8, 16) */
:root {
--ua-greca: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUYAAAGiCAQAAAAxC6fvAAAaCElEQVR42u3d4ZHkOI4FYMZ6keMG3Wg75AbtKDc2zgyeGRlnhu5Hz0z39HRVkgTewwOT1f92IyWI/CaTkkCg3J//1btM/eu/PUqbPMrocdHHnz1uu1//zY5oHTim/fr95uK+7/t5P1ZHroApojkqHXt/jlCKn2OsW357oePemyOY4mcYq3uYCDaNMLyHI43i7zFWgTBfn8dj+BHTvCdHAsXfYVSl+M9zeQ394ShD8d8YlSn+OJ/nsB+OIhR/xahO8fs5P5yPeDhKUPwnxgwUMf8ORwGKP2N8X4qHowTFHxjfm+LhKEDxL4yH4uEYTvE7xkPxcBSgeN/lUDwcNSjeEmEejlocgyjeVY+infLjcDRwDKN4FzWKdWFSfr3w5+G4HGcgxRmMLIq3iWNzjuS9OIZSHMfIpLjOsYGieQ+OwRRHMbIprnFs4Ij25hhOcQxjBMX5SWmkqPbkKEBxBGMUxblJaeTI9uIoQfE1xkiK45PSgqLbg6MIxVcYoymOTUoLjjA3RxmKX2NUoPh6UppIlDk5ClH8CmPMNqvZSWmkhKo9OUpR/BxjzDar2fAbMdV0P45iFD/DGLPNavYSGjkJfyeOH3oUf48xZpvV7GW0gO1JO3GUo/g7jFFJYnMcW9DGzXfhGEDx3xgj8xXHObbALe3vwDGE4q8Yo1Nnxzi24GIfu3MMovhPjApZ3P32+GsnG3yZYxjFnzGqbCjo8hR35hhI8QdGpb0tXZ7irhxDKf6FUW2bVZenuCPHYIrfMSpus+oUiuedtRDFu/DSIRqcYztbtz799+3lER/xURZizguWYztbtwwcBSjevVDTr3Ac29m6ZeAoQfGr1huYicJwbGfrloGjCMVXGDtgkppgRwI7x2eGG4Tfcnzo3GC9+pnugO+LJtirxcYRdROI51gFIvrbyusbmA746WqCXaxWOT6gzyOwHFUo/umlDBy+A1ZRTbC/3wqZB+QHmsNRiWK5y13HFt99eor8F/SdcEvwlKOIW6WpUfzzDQyCY4NzjL875VAkQVCIYPzRhBbHd6IYz5F09pknZToc341iLEfamece3GpwfEeKcRyJZ519j6DA8T0pxnCknnH+tVYujjtR5HMk4195y5qH424UuUDo38NrL/1zcNyRIg9JwAp1NQdFn+OuFDlQQm6W1lOitDnuTBGPJegxkiVDT5fj7hSxYMKeaH719vKZlKM6xW/SHJkUv41Xrn2k5KhOsd33/SHLkUmxz3U7yMcxA0WPHHrM9fIo/hjViT4wuTiqU7wct3T4X3MExckOWVEcr+0oVtANj8918yj+ejfy9zh4TUnfcLWDpajFkUnx03Hwm5a+2WrHl+Lj0yMovLqLpfh3jr3n1PSNVjveFJ/Cb5J5FK+v9fhOT99kteN7ra+PFslRJ/Gil4lnXpoc1SmOVcW4gjhK5QDNlYXT46hPcbQ+YsSLUB7Fj4EzPRH7hHvi1Q7i+sZerfI58ij2sfqQ5c7LMQvF0SN7PQhvbj0jeBT7zN20HsdMFBU5cihOXTXuFD3ZagdLceY74iHBkUfxY/x1oCLHnBQnVk/hHCvgtd/LlTJWfU+y2mFRHL6vDOZYSb0gfrlpQ38J9wSrHSbF0Wv0eU3YxCnW8eTarBy1KY5fYwzHCn7t98WZGEvULrzaiaA41gojhmON/Obn3DF10dVOFEXue5kmSPExtyErI8c8FLnvZXjLAtPtWbn34ZiL4sJzOCiSSnvX8pjfqpqNYz6K3PcyH2CKj/HXfmiM0RxzUnSaRDPHqvEdz/6v/Cmw2lGiyH0v8wGiWH2WG/8p3L//K/F/fxStvwdt5Opv/9dLZiTOz3T4zzRr1diBt0guV3FuYN7lBqbD79hFbmDOox31J42d8gDJuPY9D70jH3qz3sF8SJ0J+ND7vA5EUryorwNbbE7SSZSIKQKqmrcT+vLxpJBFcFROIWtR2YwnuTaC44d4cm2LWg+fbQdsjhl2wbSYJwVnQxaXY5YNWY32DNW8Ietdt6ramOTaOd34j/RRX8C7buJf55hvE39j5yRhlqY7lzdZ46hXbafR4hlemuSlmImjZh0yOY5larK0KGbhmLskHi+uZ5k4mR7FHBy7cFNeKY4lOcUcHLOXUW6sMsrZKWYvMP9MUWC+wZNDhgvMa1PMzFGjE0w8x+FiofoUT1Mixsq7wRKKh5sS5aCYkaNW90Aex8dqu7Y8FLNxzNnI0p/jT6O3E8VMLX4/0rb4bc6lCwZb/OajmIVjS938vPGbn+ekmOPHWpUim+Ng5dq8FHPnO2ZZeTfENe1I8R04xq+8Gwdjfoq7c9RYeTc8xj0oos7aBTjqrLwbFuM+FHflqLXybjiMe1HckaPeyrthMO5HcTeOmivv5o+xAk6LgdDelKPuyrv5YsxDUSsSHkftlXfzw5iL4jty1F95Nx+M+Si+G8ccK+9mx4igOPJ42D7x/hyfdxHkiKBYpz9B4FhAp3jF0ec7yJfjGhs0RwTFb0ufQnOsBXb4rzj6/Rz6cVwng+SIo6jGsd53AUr/jKPvysyHo+3bC8URS1GJY73vVxg/AFWo/G8S7Bzt6zpECgWeogrHP+9bCvge7VeOFVClxcrRTjHL84hvLkdBcOwjGH05YijapvrdKQpxLIQnWH9xxFFcn+5D8fsfYgkx2zakc8oSPRaKeMxRXJvyQxHLsc6/geFVyUJSXHs4/x4UK6SSuHuk7KJtSIqwjUJvQFGCI7+GIJIik+NuFAU4RpS0RFJkcdyRYjjHmAqrtncZ8Rx3pRjMMargr+W1Wg3muDPFUI5x9actb3gjOe5OMZBjZDl0S7JBFMd3oBjGMbY6vyXvJYLju1AM4hjdLMKSgsXmuBPFD0jam/Fq4nuXWLIBK7V82z4UGywL03RF8a10bENShZp556IoyDG6s9PrrVuvhqMStkTtSVGOY3yjsa85jgxFPRQNcQpxVOh79znH0WGoh6IhThmOGm0Yq3kI6qFoiFOEo0pX0Gq+/HooGuKU4KjTpLaaIdVD0RCnAEelnsnVDKkeioY4EXM8dcXl1uNogVQPRUOcwRy9016rQ8/NR/AR3pViOMdyq3GM//e+FIM5KoR6KOpQDOVYUnZCORSx7+SDOJakjXkORWx6SAjHkrZP1KGIzVQK4FgSty07FLE5nHSOJXUXvUMRm91O5ljS9Yl6HIrEfT9UjiVZn6jH/ZxuGXcoJuFYUvWJ+ivzsR+KxL3iNI4lUZ+on5Nw+6FIrKJB4ljS9In6NR+8vxHFK7y+EIVjIbUtQ2xN6IQmZAoUm0TlNQLHQumih9olg+Z4KFI5FkIXK+T+QSTHQ5HMscD7+6F3VqM4Hop0jgXcbhK/yR/DMQvFTqVY7jJUrHXxSgu0ES+DIoJjFor8b8bRqJautgD7QrMoenPMRJHLcSaqhSsusP70TIqeHLNR5HGcjWr6qjGD2ekUvThmpMjhuBLVQoesJrevZYVixHJehSKe42pUCx2ytDiuUmRzVKKI5WiJaqFDlg5HC0UmRzWKOI7WqBY6ZGlwtFJkcVSkiOHoEdVCh6x4jiMUnwIc4x5xszl6RbXQISuW4xjFsQ5ZfUOKjf6CcPRKPzAdsuI4jlIczUPsG1Lkvq+euVJQh6wYjjMUIzkqpENwOM5eKahDFp/jLMUojiqZOXiOK1cK6pDF5bhCMYKjUpIYluPqlYI6ZPE4rlJkc1TLV8RxtFwpqEMWh6OFIpOjYuoshqP1SkEdsvAcrRRZHFWzuP05elwpqEMWlqMHRQZH5Q0Fvhy9rhTUIQvH0YsimqP63ha/Y3leKahDFoajJ0UkxwzbrHyO532loA5Z/hPiTRHFMcuOP/sxW3QPmPFuB76hIigiOEpMEIVjZFQLHbL8wkVR9OaYiaKNY3RUCx2yfEJGUvTkmI3iOkeFqBY6ZNnDRlP04piR4hpHlagWOmRZQ39SiudZOWalOM9RKaqFDlmW8HllRS0cM1McPdclGdVCh6zVS+AWXF7lmJ3i+PkEoyqkweWXol/huANFr01UAVEVygDHNOmY5bgLRR+OAVEVwiDHtS+a4bgTRTvHkKgKfKBjO2mNctyNoo1jUFQFPNjP8KZu1SVKBYqdxHGe4odChyz7ymSeYoP0UNGn+Lzv+0ngWJdq2XaFDlmNThHV0kef4loaXCNQvH04lsAKMasU2Rx1KKI5VlOF767QIavRKTI5alFEcqzmYvNdoUNWo1NkcdSjuMbxdTWcby59D7pCh6xGp8jgqEkRwfGbWwuOrtAhq9EpojnqUvTm+M21G0xX6JDV6BSRHLUpenK83BsTdYUOWY1OEcVRn6IXxwvSI6srdMhqdIoIjjkoenDEUFzkWIjfESiK3hzzULRyxFFc4lhoP1lIip4cc1G0cMRSXODIyldBU/TimI/iKkc8xenIOJl8DIoeHHNS5LQbIUTGSCxlUbRyzEsRz5ESGT7lnknRwjE3RSxHUmTogkRsiqsc81PEcaRFhq6P9QjZ16YQpT/FjxCOxMjYLR1YO35bqg5Zo9seLjpHamTl1uE4Psk5ovSe8ELnSI6M3WHEa5JzROk94VyO9MjKrcFxfpJzROk94TyOAZGxG954TnKOKL0nnMMxJLJyx3Ncn+QcUXpPOJ5jUGTs/ktloTrZV5PMilKLIpZjWGTljuVo7+LOiFKPIo5jYGQldKK7yySjo9SkiOEYGlnkRHe3SUZGqUvRn2NwZHET3V0nOUeU3hPuyzE8sqiJ9p/kHFEi6p35cBSILGaiO6TYhn6UT1BtRDtHicgiJrrDylVqR/kElum0cRSJjD/R1kl+pIiSO+E2jjKRsb937BSfL35wFKLkT/g6R6HIuD+D9knuA+uf+CgjJnyNo1RkxacA7tBEe1HEcsxLcZ6jWGTFqx7zy4n2pIjjmJviHEe5yIpXPeYXE+1NEcMxP8VxjoKRFb/y4F9MNILi66gvepQKFEevXDCy4lce/NOJRlF8HXWlRqlC0YdjQGTFs1r9bycaSdGP414U7RxDIiue1epvRO+pbnzRFdMhK5qijWNQZMW3eYL7hffbXq+A3yFLgeI6x7DIim/zhBCKeI45Ka5xDIysePfyCKGI5ZiX4jzH0MiKQ/37a7FDlidFHMcanAH5+2vBzE8FRjEQWXHZxFPdO2T127/WVaWsn159M163x35KxNfFfDKzM8fitL2xClD051jdt3peblt7vTmu5dW7cixuG7+rAEVfjtV9E/zlusvck+P6Fg9HjsWxJEYVoOjHsbqXB7ncCx54cbTtNnLjWFyLBXUCxSeF48ftXTjpgoyuB0f7xjcnjiUdxccQJr931j4cL9joWjn67MF04VjSURzFpMTxgo6uhaPfdmAHjt+Dy0UxG8cLPrrXIinfnelmjj4PL9kUM3H8RnmHssLRv0jCw44xI8VMHDllA6/J/0RqcMUhCMYoioej/6OjUIp2jJEUD0cOx8ZKsMhN8XDEc2y8XJ/sFHkc+1tybMy0s/wUD0ccx8bNgNyB4uGI4djYybh7UDwc/Tk2fl54DMUPd4qHoy/HFrFFIYJig1A8HP04tpjdMmWyL7MyxcPRh2OL2rg1R/EpTjE3xyrBEUGxemPMQTEvxwrqxnCFU+yjn9mPYk6OFdgc5AqnOPi5HSnm41jBvWqucIpDn92TYi6OldA66QqnOPD5fBTb8JDk4FhJnbyucIov02/zUZwZFn2OldhY7gqn+GKmM1Lch2Ml9zm8gim+mO2cFPfgWAPabl7BFL+c8awU83N8BHWBvYIpfp/1KYz6FPNzrOEcoyhOfTPmoHg42jiKUfw9xjwUD8d1jnIUf4cxF8XDEVPJLYDivzHmo8jm+HwTjnSKv2LMSdGb44f52Wt+jgEU/4kxL0Vvju3NOYZQ/BljboqHox/HIIo/MOaneDj6cAyj+BfGPSgejnaOgRS/Y9yH4uFo4xhK8S4+Q6pD8XBc5xhM8S5lO4qH4xqccIr3o2xI8XCcxyNA8X6WLSkejnOAJCh+1lV1dAi/yVI8HMcRiVC87/+Ur/4e5fHl//8/5X/L+Svlj/JHijjVZ8tsvL/9z3SWXJ6P3D/TY4d9vvUNTH6KQjcw9gfeDzmOh+J8RUyJRzuP7TgeitisUOBD7904Hor4rFDY68C9OB6KnKxQWKLEPhwPRV5WKCyFbA+OhyL3P2lYcm1+jocif7ED23aQm+OhGHMbCNuQlZfjoRj3gAy2VTUnx0Mx9tUBbBN/Po6H4lqRu5ahvInXly6H46G4Xm8xReGnPBwPRVvpzxQl8XJwzE3xEU4xTbFQP44Zyii3Lcoor8FKUUbZi2OVLzDftigwv44qRYF5XY57UPRsvWEDlaL1hibHfSh6NSWyY+JwfNqaEilyVKLYBNq1+UDCc1x4A7MHxzwUrY0s/RBhOS68m96DYy6Klha/voBwHBeydvbgmI/iavNzfzwYjgv5jHtwzEnx+3lLOBzMUaczvffgmJdikaCIPbIzRm2Oh6IPmCCOKx9S5Xgo+mEJ4bj2MUWOh6IvlACOqx9U43go+iOhc1z/qBLHQxEDhMzR8mEVjoci7qeTekbbx7tAy45DEXuPSzyr9QAjHCuQ46EIf/rHO7P9EJ2QvvQZx0MRT5F4do9QozgeiusYvgm8s/4txpaSYw6K9f5GSfyoC3VsvTk+7Ri7x2HoHLNQvO/7vuAcV1l5cnTItypeqqkcM1HEc7SQ8uLokfrXi9+XLI1jNopYjnOcLki+owvFf7besHN8UjhaIV0DR/hwp4PhaKXow/Hh80VWHJegI3dcPvvULBQbqAbX628xf44eFO0cq9dvanG7I2puxdaaAEXLIH++CPDl6EXRxrH6Le+K0w16c6391wQorg701+tRP46eFNc5Vs87jeLyvKi5l6JsAhRXBvv1rZEPR2+Kaxyr701vcbiTbJDKqE2A4vwU/XfgiHaODwDF+Wt9eD9/KeaCHQ1WqLcJUJyfok7hiKCIfb89MFIlkOLri+8CFHNzvOALE8en0iWUohfHFhylKseLUlje7QVJAVN8EjjaKfYtOV60PgdO7+oKlGJzeUnYwRQbJEUqmuNFbbvhMjIFTLGAOTa3KPfieN3sLjAOo1LgFJEcm2uU/hyfQRztFFEcv5RQCBRRHJt7lHtwvIZWyc8Aji8UFArFH9nFfhwbJMr8HK/h0s9sji+/kAqAYoXto+iDK9xmeByUm+M1VYWcyXHgt5G7MciLI45ibo7XdEF8FseRZVpn7xDz4IilmJfjtdSbgcGxj0XG36wYX1mwhUSJ5ngttwlBc+yjkUXsm22hNVdbWJRIjpepYw2SYx+PLGZiWlg16hYaJYrjZW6ehOLYZyKLohNTpz++mwCC4+XSx+sZ0l/1H5HF/ajqdzDJwfFyaynnzbHPRhZ5u6Hd2ykHx8u1u6Enxz4fWWy5H92udzk4Xu6NNr049pXIoitPafYDzcHxgvR89eDY1yKLrwio1yk5B8cL1n7YyrGvRlYEilNq9ZDPwfGCdsK2cOzrkWnUSV07X44oERwveFP2VY7dEplKyd75c+aIEsERT3GVY7dFplM9eu68OaJEcORQXOHYrZEpFTIfP3eOKBEceRRnOXZ7ZEo19UfPnyNKBEcuxRmO3SMykbbXrhvuNaL059jpFEcje/pEhk6HeAZwXKkcliOFgk+RGhk+M4fNcbWIXX6OHbYwIUXGSBJjcrTUU8zNsQNXyaTIOPmKLI7W0p55OWIpkiJjpc4yOHpUmc3JsS9kYH9QOPaVpkT4LG40R6+Cx/k4rmbm4DlO7skvxA0FSI6etbdzcbQkiWE5TpeHKNS9LSiO3mXg83C05iviOC5UKinkbVYIjhXQpbQleQxup4ThuFQ0p5B3/PlzRFBEcbxcJ90ri9uf42L9pkKm6M0RRRHFsblNuueGAl+Oy6XECp2iJ0ckRW2O3ntb/DgaqtqVAIpeHNEUdTkitln5cDQVWCwhFD04MihqcuyQIiMrhVWevo1bShBFK0cWRT2OKIp2juaysyWMooUjk6IWRyRFG0eHCsglkOIqRzZFHY5oiuscXYpxFzDFJ4CjP0VEbTB/jo1AcY2jUxfeAi9q10M51rAOWZgifXiK6M5d7XVTImR9xTiONbRDVizHblqWXBGb2Qql1GcMxxreISuOo40iimN73ZSIUXWWz7FKdMiK4WiniOA40JSIVQCZy7HKdMjic+xD52O32XRvSmSbLB7HKtUhi8txHBmT41DvSG7WHodjleuQxeM4B4zFcbCNKTuBFM+xSnbI4nCcx8XgONxRl5/LjOVYZTtk4TmuwUJznGjuHJFWj+NYpTtkYTmuo0JynOozHjMxGI5VvkMWjqMNFIrjZMv7qEnx55hjmxWGox0TgmOfHb24hj++HCvoGycDRx9I3hz7/MhFNvzx41iBazF1jn6IPDn2lVGL7T3lw7GC71KVOfp+n3kdra+NWHTvKTvHSnh+p8rRf6XnccS+OlrxHbJsHCvpzYYiR8w9sPWofX2kFDpkrXOsxHe+ahxxTwctR+6WUdLokLXGsZKzYZQ4Yt+brB6920ZIpUPWPMcakCeowhH/RnnlDN06OjodsuY41qAMasToXJPXwsm1mT1Lt4+MUoescY41cG9JC6gX+fP18LIQZ87UPUZFq0PWGMcavOsukiM3P3v0bN1nRJQojnKMpRjJ8UnfudKdoqozTYk0KPpsJmqEKKM48vf0dV77PDWK9stvpCgVOV6SXw91pimRFkXb5TdilGocL8mvhzrTB0aP4vrlN3KUShwvya+HOteUCJM62wIu3+OcLSnHS/LrYfLKCyyLm83R63wZOV6Sv1bT76IKcEMBk6PnubJxvCQXTwuvRQt0bwuLo/d5MnG8JNfyS2/oC3ibFYMj4hxZOP6XfMtWIOVf/xy9/we+yJDYNhOElwAAAABJRU5ErkJggg==");
--ua-pixeles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Crect x='0' y='0' width='34' height='34' fill='%231C4578'/%3E%3Crect x='0' y='34' width='34' height='34' fill='%233A93D0'/%3E%3Crect x='34' y='34' width='34' height='34' fill='%2300417B'/%3E%3Crect x='0' y='68' width='34' height='34' fill='%2300417B'/%3E%3Crect x='34' y='68' width='34' height='34' fill='%233A93D0'/%3E%3Crect x='68' y='68' width='34' height='34' fill='%231C4578'/%3E%3C/svg%3E");
--ua-pixeles-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 102'%3E%3Crect x='0' y='0' width='34' height='34' fill='%233FC0F0'/%3E%3Crect x='0' y='34' width='34' height='34' fill='%2300417B'/%3E%3Crect x='34' y='34' width='34' height='34' fill='%233A93D0'/%3E%3Crect x='0' y='68' width='34' height='34' fill='%233A93D0'/%3E%3Crect x='34' y='68' width='34' height='34' fill='%2300417B'/%3E%3Crect x='68' y='68' width='34' height='34' fill='%233FC0F0'/%3E%3C/svg%3E");
--ua-sol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23F0B443' stroke-width='4.5' stroke-linecap='round'%3E%3Cline x1='70.0' y1='50.0' x2='96.0' y2='50.0'/%3E%3Cline x1='68.5' y1='57.7' x2='85.1' y2='64.5'/%3E%3Cline x1='64.1' y1='64.1' x2='82.5' y2='82.5'/%3E%3Cline x1='57.7' y1='68.5' x2='64.5' y2='85.1'/%3E%3Cline x1='50.0' y1='70.0' x2='50.0' y2='96.0'/%3E%3Cline x1='42.3' y1='68.5' x2='35.5' y2='85.1'/%3E%3Cline x1='35.9' y1='64.1' x2='17.5' y2='82.5'/%3E%3Cline x1='31.5' y1='57.7' x2='14.9' y2='64.5'/%3E%3Cline x1='30.0' y1='50.0' x2='4.0' y2='50.0'/%3E%3Cline x1='31.5' y1='42.3' x2='14.9' y2='35.5'/%3E%3Cline x1='35.9' y1='35.9' x2='17.5' y2='17.5'/%3E%3Cline x1='42.3' y1='31.5' x2='35.5' y2='14.9'/%3E%3Cline x1='50.0' y1='30.0' x2='50.0' y2='4.0'/%3E%3Cline x1='57.7' y1='31.5' x2='64.5' y2='14.9'/%3E%3Cline x1='64.1' y1='35.9' x2='82.5' y2='17.5'/%3E%3Cline x1='68.5' y1='42.3' x2='85.1' y2='35.5'/%3E%3C/g%3E%3C/svg%3E");
--ua-estrella: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23ED6A48' d='M50 0C53 36 64 47 100 50C64 53 53 64 50 100C47 64 36 53 0 50C36 47 47 36 50 0Z'/%3E%3C/svg%3E");
--ua-eyebrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Crect x='0' y='4' width='6' height='6' fill='%233FC0F0'/%3E%3Crect x='6' y='0' width='6' height='6' fill='%2300417B'/%3E%3Crect x='12' y='4' width='6' height='6' fill='%233FC0F0'/%3E%3Crect x='20' y='4' width='6' height='6' fill='%2300417B' fill-opacity='.35'/%3E%3C/svg%3E");
}
/* Manrope en todo, con el dibujo de las piezas: titulares en 700-800,
cuerpo en 400 y un poco más de interlínea (la x de Manrope es alta). */
body { font-family: var(--font-body); }
.ova-screen p, .ova-screen li { line-height: 1.7; }
.ova-screen__title { font-weight: 800; letter-spacing: -0.02em; }
/* --- Eyebrow: lo precede un pequeño escalón de cuadros (el recurso
pixelado de la marca), no el gradiente de acento --------------- */
.ova-screen__eyebrow::before {
background: var(--ua-eyebrow) left center / contain no-repeat;
width: 26px; height: 10px;
border-radius: 0;
}
.ova-screen__eyebrow { letter-spacing: 0.18em; font-weight: 800; color: var(--c-acento); }
/* --- Remate tipográfico: el gesto de las piezas UA es el contraste de
pesos de una sola familia — «Aquí empieza» en Light y «tu propósito.»
en ExtraBold (miniatura de video de apertura). Sin serif, sin itálica.
Uno por titular. ------------------------------------------------- */
.ua-remate {
font-style: normal;
font-weight: 800;
letter-spacing: -0.015em;
color: var(--c-acento);
}
/* --- Cita / highlight editorial ------------------------------------------
Manrope ligera y grande; el remate (.ua-remate) en ExtraBold. Filo celeste:
la guía de lectura de la marca. */
.ua-quote {
font-family: var(--font-display);
font-style: normal;
font-weight: 300;
font-size: 1.32rem;
line-height: 1.55;
color: var(--text-head);
background: var(--c-hielo);
border-radius: var(--r-md);
padding: 32px 36px;
margin: 36px 0;
border-left: 4px solid var(--c-cielo);
}
/* --- Callout "Para reflexionar": el sol como marca, no como estado.
Se distingue del warning (ámbar oscuro) por color e icono --- */
.ova-callout--reflexion {
background: color-mix(in srgb, var(--c-sol) 12%, transparent);
border-left-color: var(--c-sol);
}
.ova-callout--reflexion .ova-callout__tag { color: #8A6100; }
.ova-callout--reflexion .ova-callout__ico {
background: color-mix(in srgb, var(--c-sol) 22%, transparent);
color: #8A6100;
}
/* --- KPI: filo celeste arriba, el dato en azul de marca --- */
.ova-kpi { border-top: 3px solid var(--c-cielo); }
.ova-kpi__value { color: var(--c-acento); }
/* --- Los cuadros · recurso gráfico de marca ---------------------------
El escalón de cuadros pixelados que en la línea gráfica muerde las
fotografías. Es la firma de Andina como la rueda lo es de Scala. ------ */
.ua-pixeles {
display: inline-block;
width: var(--ua-pixeles-size, 96px);
aspect-ratio: 1;
flex-shrink: 0;
background: var(--ua-pixeles) center / contain no-repeat;
}
/* --- Imagen enmarcada: el radio de módulo también aplica a la foto --- */
.ua-figura {
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--shadow-md);
margin: 32px 0;
}
.ua-figura img { display: block; width: 100%; height: auto; }
.ua-figura figcaption {
font-size: 0.86rem;
color: var(--text-mut);
padding: 14px 20px;
background: var(--c-hielo);
}
/* --- Bloque de dos columnas texto + imagen --- */
.ua-split {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 40px;
align-items: center;
margin: 40px 0;
}
.ua-split .ua-figura { margin: 0; }
@media (max-width: 860px) { .ua-split { grid-template-columns: 1fr; gap: 28px; } }
/* --- Logo de marca: el negativo de Andina no necesita la caja blanca que el
motor pone para logos a color; sobre el sidebar abismo se pierde ----- */
.ova-brand-logo--desktop {
background: none;
padding: 0;
max-width: 196px;
}
.ova-brand-logo--mobile { background: none; padding: 0; }
/* --- Split: la foto no debe estirar la columna de texto --- */
.ua-split { align-items: start; }
.ua-split .ua-figura img { max-height: 420px; object-fit: cover; }
/* --- Stepper: la numeración es celeste (el «Virtual» del logo, guía de
lectura). Sobre el abismo da 6,9:1. Se excluye el tema "clara": ahí el
círculo es blanco y el celeste daría 2:1 — sobre claro vuelve el azul. */
:root:not([data-version="clara"]) .ova-step__num span {
background: none;
color: var(--c-cielo);
-webkit-text-fill-color: var(--c-cielo);
}
/* --- Logo por tema · el negativo (blanco + «Virtual» celeste) se pierde
sobre el sidebar blanco del tema "clara": ahí entra la versión azul
oficial. En "hibrida" y "oscura" el sidebar es abismo y sigue el negativo. */
[data-version="clara"] .ova-brand-logo--desktop {
content: url('../img/logos/andina-logo-azul.png');
}
[data-version="clara"] .ova-brand-logo--mobile {
content: url('../img/logos/andina-aguila-azul.png');
}
/* --- Selector de tema minimalista ----------------------------------------
El motor lo dibuja como "🎨 Tema · [🌙 Oscura] [☀ Clara]". Compite con los
botones de la barra y no aporta: solo hay dos temas y cada botón ya tiene
su `title`. Se queda en dos iconos sin caja exterior; los textos se ocultan
de forma accesible (clip, no display:none) para que el botón conserve su
nombre accesible. ------------------------------------------------------- */
.ova-version-switch {
padding: 0;
gap: 0;
background: none;
border: none;
backdrop-filter: none;
}
.ova-version-switch__label { display: none; }
.ova-version-switch__pills {
gap: 2px;
padding: 3px;
background: color-mix(in srgb, var(--bg-muted) 60%, transparent);
box-shadow: none;
}
.ova-version-switch button { padding: 7px; gap: 0; }
.ova-version-switch button span {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.ova-version-switch button iconify-icon { font-size: 1.05rem; opacity: .6; }
.ova-version-switch button.is-active {
background: color-mix(in srgb, var(--c-acento) 12%, transparent);
color: var(--c-acento);
box-shadow: none;
}
/* --- Apertura de unidad --------------------------------------------------
El bloque con el que abre cada introducción: una idea clave o una pregunta
que enmarca la unidad. No lleva etiqueta —el texto es el protagonista— y
resalta por escala y aire, no por encajonarse como un aviso más.
Uso:
…
modificador --pregunta cuando la apertura es una pregunta. ---------- */
.ua-apertura {
position: relative;
margin: 44px 0;
padding: 38px 44px 38px 46px;
background: var(--c-hielo);
border-radius: var(--r-md);
max-width: 920px;
overflow: hidden;
font-size: clamp(1.18rem, 1.9vw, 1.46rem);
line-height: 1.52;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--text-head);
}
.ua-apertura::before {
content: '';
position: absolute;
left: 0; top: 26px; bottom: 26px;
width: 5px;
background: var(--c-cielo);
border-radius: 0 5px 5px 0;
}
/* el escalón de cuadros asoma por la esquina inferior derecha */
.ua-apertura::after {
content: '';
position: absolute;
right: 0; bottom: 0;
width: 72px; height: 72px;
background: var(--ua-pixeles-claro) center / contain no-repeat;
opacity: .9;
transform: scaleX(-1);
}
.ua-apertura p { margin: 0; }
.ua-apertura p + p { margin-top: 16px; }
/* el remate: la frase que se quiere subrayar va en ExtraBold azul */
.ua-apertura .ua-remate { font-size: 1.02em; }
.ua-apertura p { padding-right: 56px; }
/* Variante pregunta: el signo de interrogación hace de marca visual */
.ua-apertura--pregunta { padding-left: 92px; }
.ua-apertura--pregunta::after {
content: '?';
position: absolute;
left: 44px; top: 30px;
font-family: var(--font-display);
font-weight: 800;
font-size: 2.6rem;
line-height: 1;
color: var(--c-acento);
background: none;
width: auto; height: auto;
transform: none;
}
@media (max-width: 720px) {
.ua-apertura { padding: 28px 24px 28px 28px; }
.ua-apertura--pregunta { padding-left: 28px; }
.ua-apertura--pregunta::after { position: static; display: block; margin-bottom: 8px; }
}
/* --- Ilustración de marca a ancho completo -------------------------------
Alternativa a la foto en las aperturas: no deja huecos por diferencia de
altura con el texto, no depende de licencias y cumple la dirección
luminosa del brandbook (que descarta las estéticas oscuras). ----------- */
.ua-ilustracion {
margin: 40px 0;
border-radius: var(--r-md);
overflow: hidden;
}
.ua-ilustracion img { display: block; width: 100%; height: auto; }
.ua-ilustracion figcaption {
font-size: .86rem;
color: var(--text-mut);
padding: 14px 4px 0;
}
/* --- Sistema de énfasis tipográfico --------------------------------------
Tres pesos y un remate, nada más. El brandbook (p. 12) advierte contra
forzar contrastes extremos: la jerarquía se construye combinando pocos
pesos, no apilando tamaños.
.ua-suave 300 lo que acompaña: conectores del titular, leads
(cuerpo) 400 el texto por defecto
strong 600 la palabra o frase que carga el sentido
.ua-remate 800 el remate, en azul de marca: uno por bloque
Tope: 3 pesos por pantalla, y **una sola idea resaltada por frase**. En un
párrafo que enumera (las tres capacidades, los cuatro pasos) se admite una
negrita por elemento; fuera de ese caso, si hay dos negritas en la misma
frase ninguna destaca. ------------------------------------------------- */
.ua-suave { font-weight: 300; }
.ova-screen__title .ua-suave {
font-weight: 300;
color: color-mix(in srgb, var(--text-head) 62%, transparent);
}
/* Lead: más grande y más ligero, para que la entrada respire */
.ova-screen__lead {
font-weight: 300;
font-size: 1.22rem;
line-height: 1.6;
color: color-mix(in srgb, var(--text-pri) 88%, transparent);
}
/* Negrita del cuerpo: 600 y en el color de los títulos, para que se despegue
del párrafo sin recurrir al color de marca (que significa "clicable") */
.ova-screen p strong,
.ua-apertura strong {
font-weight: 600;
color: var(--text-head);
}
/* En la apertura el peso base baja: el tamaño ya hace el trabajo */
.ua-apertura { font-weight: 400; }
/* --- Escenas · pasos de un proceso en formato explicativo -----------------
Traducción del patrón "imagen grande, pocas palabras" al design system:
cada paso es una escena con número protagonista, icono grande y el texto
del DI íntegro. El impacto lo da la composición, no recortar el contenido.
Conector punteado entre escenas para que se lean como recorrido. -------- */
.ua-escenas { display: flex; flex-direction: column; gap: 18px; margin: 44px 0; }
.ua-escena {
position: relative;
display: grid;
grid-template-columns: 104px 1fr;
gap: 30px;
align-items: start;
padding: 34px 38px;
background: var(--bg-surface);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
}
/* conector: hilo punteado que baja de una escena a la siguiente */
.ua-escena:not(:last-child)::after {
content: '';
position: absolute;
left: 90px; bottom: -18px;
width: 2px; height: 18px;
background: repeating-linear-gradient(
to bottom, color-mix(in srgb, var(--c-acento) 45%, transparent) 0 5px, transparent 5px 10px);
}
.ua-escena__marca { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ua-escena__num {
font-size: 3.2rem;
font-weight: 300;
line-height: 1;
letter-spacing: -0.03em;
color: color-mix(in srgb, var(--c-acento) 46%, transparent);
}
.ua-escena__icono {
width: 62px; height: 62px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 1.75rem;
background: color-mix(in srgb, var(--c-acento) 12%, transparent);
color: var(--c-acento);
}
.ua-escena__titulo {
margin: 4px 0 12px;
font-size: 1.3rem;
font-weight: 600;
color: var(--text-head);
}
.ua-escena__texto { margin: 0; }
/* (la variante --final se descartó: las escenas van uniformes) */
@media (max-width: 720px) {
.ua-escena { grid-template-columns: 1fr; gap: 16px; padding: 26px 24px; }
.ua-escena__marca { flex-direction: row; align-items: center; gap: 16px; }
.ua-escena:not(:last-child)::after { left: 42px; }
}
/* --- Ciclo · escalera de cuadros + pasos ----------------------------------
En Andina el recurso de marca para un recorrido por pasos es el escalón
de cuadros pixelados: cada paso es un cuadro un peldaño más arriba. La
escalera hace de imagen grande y los cuatro pasos quedan visibles a la
vez —un carrusel escondería tres de cada cuatro—. ----------------------- */
.ua-ciclo {
display: grid;
grid-template-columns: minmax(280px, 38%) 1fr;
gap: 44px;
align-items: center;
margin: 44px 0;
}
.ua-ciclo__escalera { width: 100%; height: auto; display: block; }
.ua-ciclo__pasos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ua-paso {
--tinte: var(--c-acento);
position: relative;
padding: 22px 22px 22px 24px;
background: var(--bg-surface);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--tinte);
}
.ua-paso__num {
font-size: .78rem;
font-weight: 600;
letter-spacing: .14em;
color: var(--tinte);
}
.ua-paso__titulo {
margin: 6px 0 8px;
font-size: 1.06rem;
font-weight: 600;
color: var(--text-head);
display: flex; align-items: center; gap: 9px;
}
.ua-paso__titulo iconify-icon { font-size: 1.3rem; color: var(--tinte); }
.ua-paso__desc { margin: 0; font-size: .94rem; color: var(--text-mut); line-height: 1.55; }
@media (max-width: 1000px) {
.ua-ciclo { grid-template-columns: 1fr; gap: 28px; }
.ua-ciclo__escalera { max-width: 340px; margin: 0 auto; }
}
@media (max-width: 640px) {
.ua-ciclo__pasos { grid-template-columns: 1fr; }
}
/* --- Dato en cifras ------------------------------------------------------
El motor ofrece KPIs y callouts por separado, y al usarlos seguidos la
misma cifra se lee dos veces. Aquí van en un solo bloque: el número es el
protagonista y el texto del DI lo explica al lado. -------------------- */
.ua-cifras {
display: grid;
grid-template-columns: minmax(220px, 34%) 1fr;
gap: 36px;
align-items: center;
margin: 32px 0;
padding: 32px 36px;
background: var(--c-hielo);
border-radius: var(--r-md);
border-left: 5px solid var(--c-sol);
}
.ua-cifras__datos { display: flex; flex-direction: column; gap: 22px; }
.ua-cifra__valor {
display: block;
font-size: clamp(2rem, 3.4vw, 2.7rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
color: var(--c-acento);
}
.ua-cifra__label {
display: block;
margin-top: 8px;
font-size: .92rem;
line-height: 1.45;
color: var(--text-mut);
}
.ua-cifras__tag {
display: block;
font-size: .7rem;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 700;
color: var(--c-acento);
margin-bottom: 10px;
}
.ua-cifras__texto p { margin: 0; }
.ua-fuente { margin-top: 12px !important; font-size: .86rem; color: var(--text-mut); }
@media (max-width: 820px) {
.ua-cifras { grid-template-columns: 1fr; gap: 24px; padding: 26px 24px; }
.ua-cifras__datos { flex-direction: row; flex-wrap: wrap; gap: 28px; }
}
/* --- Diagrama a ancho completo (SVG inline) ------------------------------
Va inline, no como , para heredar la tipografía de la página y poder
usar las variables de color. Rompe la lectura entre bloques de tarjetas. */
.ua-diagrama {
margin: 40px 0;
padding: 30px 34px;
background: var(--bg-surface);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
}
.ua-diagrama svg { width: 100%; height: auto; display: block; }
.ua-diagrama figcaption {
margin-top: 18px;
font-size: .9rem;
color: var(--text-mut);
line-height: 1.55;
}
/* Cuadrícula de proporción: 29 puntos, 6 destacados */
.ua-proporcion { width: 100%; max-width: 190px; height: auto; display: block; margin-bottom: 12px; }
/* --- Anatomía · una pieza gráfica con su explicación al lado -------------
Para cuando el DI describe algo que tiene partes ("el criterio incluye
una condición de éxito, una de fracaso y una señal observable"): se dibuja
el objeto y el texto lo acompaña, en vez de apilar callouts. ----------- */
.ua-anatomia {
display: grid;
grid-template-columns: minmax(300px, 46%) 1fr;
gap: 44px;
align-items: center;
margin: 44px 0;
}
.ua-anatomia svg { width: 100%; height: auto; display: block; }
.ua-nota + .ua-nota { margin-top: 26px; }
.ua-nota__tag {
display: block;
font-size: .7rem;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 600;
color: var(--c-acento);
margin-bottom: 8px;
}
.ua-nota p { margin: 0; }
@media (max-width: 900px) { .ua-anatomia { grid-template-columns: 1fr; gap: 28px; } }
/* --- Dato · el "Dato curioso" del DI, sin caja ---------------------------
La tarjeta azul (ova-callout) se reserva para lo que hay que retener
(Idea clave, Importante). Un dato curioso es lectura lateral: eyebrow,
texto, fuente y un filete fino a la izquierda. Con seis tablas por tema,
mapearlas todas a la tarjeta convierte la pantalla en un muro. --------- */
.ua-dato {
margin: 36px 0;
padding: 4px 0 4px 24px;
border-left: 2px solid color-mix(in srgb, var(--c-acento) 30%, transparent);
max-width: 68ch;
}
.ua-dato__tag {
display: block;
font-size: .7rem;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 600;
color: var(--c-acento);
margin-bottom: 8px;
}
.ua-dato p { margin: 0; }
.ua-dato .ua-fuente { margin-top: 10px !important; }
/* Dos datos o dos notas seguidos: en pareja, como los callouts (7.3) */
.ova-grid-2 > .ua-dato { margin: 0; max-width: none; }
.ova-grid-2 > .ua-nota { margin: 8px 0; }
/* --- Comparativo ligero · sin caja -------------------------------------
Tercer comparativo de una misma pantalla: si repite el formato con caja y
sombra, la pantalla se vuelve un muro de tarjetas. Aquí manda el signo. */
.ua-vs-ligero { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 40px 0; }
.ua-vs-ligero__col { position: relative; padding-left: 52px; }
.ua-vs-ligero__signo {
position: absolute; left: 0; top: -2px;
width: 36px; height: 36px; border-radius: 50%;
display: grid; place-items: center;
font-size: 1.2rem; font-weight: 700;
}
.ua-vs-ligero__col--si .ua-vs-ligero__signo { background: color-mix(in srgb, var(--success) 16%, transparent); color: #1F7A4C; }
.ua-vs-ligero__col--no .ua-vs-ligero__signo { background: color-mix(in srgb, var(--danger) 14%, transparent); color: #B3303C; }
.ua-vs-ligero__tag {
display: block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
font-weight: 600; margin-bottom: 10px; color: var(--text-mut);
}
.ua-vs-ligero p { margin: 0; }
@media (max-width: 760px) { .ua-vs-ligero { grid-template-columns: 1fr; gap: 28px; } }
/* --- Caso a dos vías -----------------------------------------------------
Un comparativo donde cada lado trae su propia ilustración del caso y la
ruta que sigue. Evita el error de poner un diagrama y, debajo, unas cards
que repiten las mismas etiquetas: es una sola pieza. ------------------- */
.ua-caso { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 40px 0; }
.ua-caso__via {
display: flex; flex-direction: column;
padding: 28px 30px 26px;
background: var(--bg-surface);
border-radius: var(--r-md);
box-shadow: var(--shadow-sm);
border-top: 4px solid var(--via);
}
.ua-caso__via--error { --via: #C1444F; }
.ua-caso__via--ok { --via: var(--c-acento); }
.ua-caso__tag {
display: inline-flex; align-items: center; gap: 8px;
font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
font-weight: 600; color: var(--via); margin-bottom: 18px;
}
.ua-caso__via--ok .ua-caso__tag { color: var(--c-acento); }
.ua-caso__ilustracion { width: 100%; height: auto; display: block; margin-bottom: 20px; }
.ua-caso__texto { margin: 0 0 22px; }
.ua-caso__ruta {
margin-top: auto; padding-top: 18px;
border-top: 1px dashed var(--border-c);
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
font-size: .82rem;
}
.ua-caso__paso {
padding: 6px 12px; border-radius: 999px;
background: var(--bg-muted); color: var(--text-pri);
}
.ua-caso__paso--clave { background: var(--c-hielo); color: var(--c-acento); font-weight: 700; }
.ua-caso__paso--tarde { background: transparent; color: #C1444F; border: 1px dashed #E2A6AC; }
.ua-caso__flecha { color: var(--text-mut); opacity: .6; }
.ua-caso__pie {
grid-column: 1 / -1;
margin: 4px 0 0;
font-size: .9rem; color: var(--text-mut); line-height: 1.55;
}
@media (max-width: 860px) { .ua-caso { grid-template-columns: 1fr; } }
/* --- Respiro · banda de descanso -----------------------------------------
Una pantalla densa necesita un corte: una banda que rompe la columna, en
abismo, con una sola frase grande. No aporta información nueva —es la frase
de remate del propio texto, sacada a primer plano— y sirve de pausa entre
dos bloques de contenido. Máximo uno por pantalla. --------------------- */
.ua-respiro {
position: relative;
overflow: hidden;
isolation: isolate;
margin: 72px calc(-1 * clamp(20px, 5vw, 64px));
padding: clamp(56px, 7vw, 84px) clamp(28px, 6vw, 88px);
background: var(--c-deep);
color: #FFFFFF;
}
.ua-respiro::before { /* la greca andina, apenas insinuada */
content: '';
position: absolute;
inset: 0;
background: #FFFFFF;
-webkit-mask: var(--ua-greca) 0 0 / 163px 209px repeat;
mask: var(--ua-greca) 0 0 / 163px 209px repeat;
opacity: .07;
pointer-events: none;
z-index: 0;
}
.ua-respiro::after { /* el escalón de cuadros, a la derecha */
content: '';
position: absolute;
right: clamp(20px, 4vw, 56px); bottom: 0;
width: clamp(72px, 9vw, 120px); aspect-ratio: 1;
background: var(--ua-pixeles-claro) center / contain no-repeat;
transform: scaleX(-1);
opacity: .85;
pointer-events: none;
}
.ua-respiro p {
position: relative; z-index: 1;
margin: 0;
max-width: 940px;
font-size: clamp(1.35rem, 2.6vw, 2rem);
line-height: 1.42;
font-weight: 300;
letter-spacing: -0.01em;
}
/* La regla de negrita del cuerpo (.ova-screen p strong) tiene más especificidad
que .ua-respiro strong y pintaba el destacado en abismo sobre abismo: ilegible.
Se sube la especificidad para que gane el celeste. */
.ova-screen .ua-respiro strong,
.ua-respiro strong { font-weight: 700; color: var(--c-cielo); }
.ova-screen .ua-respiro .ua-remate,
.ua-respiro .ua-remate { color: #FFFFFF; }
.ua-respiro p { padding-right: clamp(0px, 10vw, 140px); }
/* --- Más aire entre las piezas de una pantalla densa --- */
.ua-diagrama, .ua-caso, .ua-cifras, .ua-anatomia { margin-top: 56px; margin-bottom: 56px; }
.ua-vs-ligero { margin: 52px 0; }
.ua-quote { margin: 48px 0; }
/* --- Cifras en fila · para tres o más datos ------------------------------
Con tres cifras, apilarlas deja una columna alta y estrecha frente a un
texto corto. En fila arriba y el texto debajo, el bloque respira. ------ */
.ua-cifras--fila { grid-template-columns: 1fr; gap: 28px; }
.ua-cifras--fila .ua-cifras__datos {
flex-direction: row;
gap: 40px;
padding-bottom: 26px;
border-bottom: 1px solid color-mix(in srgb, var(--c-sol) 30%, transparent);
}
.ua-cifras--fila .ua-cifra { flex: 1; }
@media (max-width: 720px) {
.ua-cifras--fila .ua-cifras__datos { flex-direction: column; gap: 22px; }
}
/* --- Aclaración · texto que el DI repite de un bloque cercano ------------
No se recorta (es literal), pero baja de peso: se lee como nota, no como
una segunda afirmación. ------------------------------------------------ */
.ua-aclaracion {
display: block;
margin-top: 8px;
font-size: .9rem;
line-height: 1.5;
color: var(--text-mut);
}
/* --- Foto a ancho completo, recortada a franja ---------------------------
Una foto vertical junto a un párrafo corto siempre descuadra. A ancho
completo y recortada a franja, acompaña sin competir con el texto. ----- */
.ua-foto-ancha { margin: 40px 0; }
.ua-foto-ancha img {
display: block;
width: 100%;
max-height: 340px;
object-fit: cover;
object-position: center 38%;
border-radius: var(--r-md);
}
.ua-foto-ancha figcaption {
margin-top: 14px;
font-size: .88rem;
color: var(--text-mut);
line-height: 1.55;
}
/* =========================================================
MOVIMIENTO
---------------------------------------------------------
En un curso el movimiento acompaña; no compite con la
lectura: nada se mueve donde hay texto que leer.
========================================================= */
/* Los destellos de luz de la portada se desplazan muy lento */
@keyframes ua-derivar { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-2.5%, 1.5%, 0); } }
.ua-portada__luz { animation: ua-derivar 38s ease-in-out infinite; }
/* La escalera del ciclo se arma al entrar en la pantalla, un peldaño tras
otro: el componente explica su propio orden. Solo una vez. */
@keyframes ua-peldano { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.ua-ciclo__escalera .ua-peldano {
transform-box: fill-box;
animation: ua-peldano .6s cubic-bezier(.4,0,.2,1) both;
}
.ua-ciclo__escalera .ua-peldano:nth-of-type(1) { animation-delay: .10s; }
.ua-ciclo__escalera .ua-peldano:nth-of-type(2) { animation-delay: .26s; }
.ua-ciclo__escalera .ua-peldano:nth-of-type(3) { animation-delay: .42s; }
.ua-ciclo__escalera .ua-peldano:nth-of-type(4) { animation-delay: .58s; }
/* --- Accesibilidad -------------------------------------------------------
Obligatorio: quien pide menos movimiento no ve ninguno. El motor no
contempla `prefers-reduced-motion` —su reveal se aplica siempre—, así que
aquí se neutraliza también. --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.ua-portada__luz,
.ua-ciclo__escalera .ua-peldano {
animation: none !important;
}
.ua-ciclo__escalera .ua-peldano { opacity: 1; transform: none; }
html { scroll-behavior: auto; }
[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* =========================================================
MÓVIL
---------------------------------------------------------
Regla: en una pantalla estrecha, una imagen o se ve a un
tamaño legible o no se ve. Nunca "a escala hormiga".
========================================================= */
/* --- Diagramas anchos: se deslizan, no se encogen ------------------------
Un diagrama pensado a 1160 px reducido a 430 deja textos de 5 px. En vez
de encogerlo hasta lo ilegible, se le fija un ancho mínimo legible y el
contenedor se desplaza en horizontal. --------------------------------- */
@media (max-width: 860px) {
.ua-diagrama {
padding: 22px 0 22px 20px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
position: relative;
}
.ua-diagrama svg { min-width: 620px; }
.ua-diagrama figcaption {
position: sticky; left: 0;
padding-right: 20px;
max-width: 100%;
}
/* pista de que hay más a la derecha */
.ua-diagrama::after {
content: '';
position: sticky; left: 100%; top: 0;
display: block; width: 28px; height: 100%;
background: linear-gradient(to left, var(--bg-surface), transparent);
pointer-events: none;
}
}
/* --- Portada: la fotografía no desaparece, se reordena -------------------
El molde la ocultaba en móvil (heredado de otro curso). Aquí baja de
tamaño y se coloca sobre el texto: sigue siendo la primera impresión. -- */
@media (max-width: 900px) {
.ua-portada { min-height: auto; padding: 40px 0 48px; }
.ua-portada__inner { grid-template-columns: 1fr; gap: 28px; }
.ua-portada__figura {
display: block !important;
order: -1;
max-width: min(78vw, 300px);
margin: 0 auto;
}
.ua-portada__logo img { height: 44px; }
.ua-portada__logo { margin-bottom: 22px; }
.ua-portada__quote { font-size: 1rem; max-width: none; }
}
/* --- Fotos y piezas: alturas y aire proporcionados a la pantalla --- */
@media (max-width: 720px) {
.ua-foto-ancha img { max-height: 220px; }
.ua-ilustracion { margin: 28px 0; }
.ua-anatomia svg { max-width: 340px; margin: 0 auto; }
.ua-cifras, .ua-caso, .ua-diagrama, .ua-anatomia { margin-top: 40px; margin-bottom: 40px; }
.ua-respiro { margin: 48px calc(-1 * clamp(20px, 5vw, 64px)); }
.ua-escena__num { font-size: 2.6rem; }
}
/* --- Anterior / Siguiente: uno debajo del otro en pantallas estrechas ------
El motor los pone en dos columnas de 1fr: a 390 px cada botón deja ~70 px
para el texto, y Manrope en mayúsculas espaciadas («INTRODUCCIÓN») no cabe:
la columna crecía y la página se desplazaba en horizontal (medir-pantalla,
2-96 px en demo-unidad-2 y demo-unidad-3, 2026-10-10). Apilados, cada uno
ocupa el ancho entero. */
@media (max-width: 560px) {
.ova-screen-nav { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
/* =========================================================
AJUSTES HEREDADOS DEL RED DE SCALA (revisión 2026-08-31)
========================================================= */
/* 1 · Contraste del botón "Siguiente" -------------------------------------
El motor pinta el rótulo con --c-acento sobre el fondo del sidebar: el azul
UAC sobre el abismo queda en 1,4:1 y la palabra SIGUIENTE desaparece.
Pasa al celeste del logo (6,9:1). */
.ova-screen-nav__btn--next small { color: var(--c-cielo); }
/* 2 · Jerarquía del menú ---------------------------------------------------
Los subtemas se indentan bajo su tema y bajan de peso, con un filo que los
agrupa visualmente. El nivel viene del config (`nivel: 2`). */
.ova-sidebar__menu-item[data-nivel="2"] {
/* el filo cae exactamente donde el conector del tema (::after en left:30px,
centro del chip): margen 29px + borde 2px = línea centrada en 30px */
margin-left: 29px;
border-left: 2px solid rgba(255,255,255,.16);
border-radius: 0 var(--r-md) var(--r-md) 0;
}
/* el tick conector del motor nace del chip; los sub-ítems no tienen chip
y les quedaba flotando debajo: fuera */
.ova-sidebar__menu-item[data-nivel="2"]::after { display: none; }
.ova-sidebar__menu-item[data-nivel="2"] .title { font-size: .92em; opacity: .82; }
.ova-sidebar__menu-item[data-nivel="2"] .num { opacity: .6; transform: scale(.9); }
[data-version="clara"] .ova-sidebar__menu-item[data-nivel="2"] { border-left-color: rgba(19,43,65,.16); }
[data-sidebar-collapsed="true"] .ova-sidebar__menu-item[data-nivel="2"] { margin-left: 0; border-left: 0; }
/* 3 · Menú sin iconos ------------------------------------------------------
Prometían contenido inexistente (un reproductor en una pantalla sin vídeo).
En el sidebar colapsado el número ocupa su lugar: si no, quedaría vacío. */
.ova-sidebar__menu-item { grid-template-columns: 32px 1fr; }
/* --- Marca de la izquierda: número para el contenido temático, icono para
las secciones estructurales (inicio, contenido, conclusión, evaluación,
referencias, glosario). Solo el contenido temático se numera. -------- */
/* El icono vive en el MISMO chip que el número: mismo tamaño, mismo fondo,
mismos estados. Es lo que hace que el menú se lea uniforme. */
/* El icono hereda el color del chip en TODOS los estados, igual que el
número. El motor lo atenuaba al 50% y lo pintaba de acento en activo
(reglas del diseño viejo, con el icono a la derecha): aquí ambas
producían azul sobre azul. */
.ova-sidebar__menu-item .num--icono iconify-icon { font-size: 1.05rem; color: inherit; }
.ova-sidebar__menu-item.is-active .num--icono iconify-icon { color: #fff; }
/* Las pantallas de un grupo no llevan marca: el chip vacío se retira y el
título ocupa toda la fila (la sangría ya indica que pertenecen al grupo). */
.ova-sidebar__menu-item[data-tipo="grupo"] { grid-template-columns: 1fr; }
.ova-sidebar__menu-item[data-tipo="grupo"] .num--vacio { display: none; }
/* La cabecera de grupo activa se atenúa menos cuando una de sus pantallas
está abierta, para que se lea de qué sección se cuelga la pantalla actual. */
.ova-sidebar__menu-item.is-padre-activo { color: var(--sb-text); }
[data-sidebar-collapsed="true"] .ova-sidebar__menu-item .num { display: grid !important; place-items: center; }
/* 4 · Referencias ------------------------------------------------------------
Estilo de la línea (ronda de Scala sobre la Unidad 3, 2026-10-02, que Andina
hereda): alineadas a la izquierda sin sangría francesa, autor y año SIN
negrilla, el título de la obra en cursiva (, como pide APA) y la URL
como texto, sin hipervínculo (`span.ua-ref__url`). La URL va completa y se
puede seleccionar; se parte donde haga falta para no desbordar. */
.ua-referencias p {
padding-left: 0; text-indent: 0;
margin: 0 0 20px; line-height: 1.65;
max-width: 78ch;
}
.ua-referencias p::before {
content: '';
display: inline-block;
width: 7px; height: 7px;
background: color-mix(in srgb, var(--c-acento) 45%, transparent);
margin-right: 12px;
vertical-align: .12em;
}
.ua-referencias em { font-style: italic; }
.ua-ref__url { overflow-wrap: anywhere; color: var(--text-pri); }
/* 5 · Evaluación · alineada a la izquierda como el resto del curso ---------
El motor centra el contenido de cada actividad; con bloques de ancho
limitado eso los descuadra hacia la derecha. */
.ua-eval__cuerpo { text-align: left; max-width: 74ch; }
.ua-eval__cuerpo h2 { margin: 0 0 14px; }
.ova-quiz__question { font-size: 1.12rem; font-weight: 600; color: var(--text-head); margin: 0 0 18px; }
/* La retroalimentación cambia de plano: el motor le da el mismo fondo beige
que a las opciones y se lee como una respuesta más. Aquí habla el curso,
no el estudiante: fondo teñido por el estado, etiqueta propia y más aire. */
.ova-quiz__feedback {
text-align: left;
margin-top: 28px;
padding: 18px 22px 20px;
background: color-mix(in srgb, var(--success) 9%, var(--bg-surface));
border-left-width: 4px;
}
.ova-quiz__feedback::before {
content: 'Retroalimentación';
display: block;
font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
font-weight: 700; color: #1F7A4C;
margin-bottom: 10px;
}
.ova-quiz__feedback.is-wrong { background: color-mix(in srgb, var(--danger) 8%, var(--bg-surface)); }
.ova-quiz__feedback.is-wrong::before { color: #B3303C; }
/* La carita de marca: ojos en azul UAC y una boca celeste, el color del
«Virtual» del logo (sonríe al acertar, se invierte al fallar). Entra con
un pop. */
.ova-quiz__feedback { position: relative; padding-right: 84px; }
.ova-quiz__feedback::after {
content: '';
position: absolute;
top: 14px; right: 18px;
width: 46px; height: 46px;
background: url("data:image/svg+xml,") center / contain no-repeat;
animation: uaCaraPop .5s cubic-bezier(.34,1.56,.64,1);
}
.ova-quiz__feedback.is-wrong::after {
background-image: url("data:image/svg+xml,");
}
@keyframes uaCaraPop {
from { transform: scale(.3) rotate(-40deg); opacity: 0; }
to { transform: scale(1) rotate(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .ova-quiz__feedback::after { animation: none; } }
@media (max-width: 500px) {
.ova-quiz__feedback { padding-right: 64px; }
.ova-quiz__feedback::after { width: 36px; height: 36px; right: 14px; }
}
/* 6 · Temario · la estructura de la unidad antes de entrar --------------
Regla del RED (ajuste de Scala): el estudiante necesita ver el recorrido completo y no
caer directo en la introducción. */
.ua-temario { display: flex; flex-direction: column; gap: 14px; margin: 36px 0; }
.ova-bloque {
background: var(--bg-surface);
border: 1px solid var(--borde, var(--border-c));
border-left: 4px solid var(--tono, var(--c-acento));
border-radius: var(--r-md);
padding: 22px 26px;
}
.ova-bloque__tag {
display: block; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
font-weight: 700; color: var(--tono, var(--c-acento)); margin-bottom: 12px;
}
.ova-bloque ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.ova-bloque li { display: flex; gap: 12px; align-items: baseline; font-size: .99rem; }
.ova-bloque li .n {
font-size: .76rem; font-weight: 700; color: var(--text-mut);
min-width: 22px; font-variant-numeric: tabular-nums;
}
/* Los subtemas mantienen su número en la columna —si se desplaza, la lista
parece desalineada en vez de jerárquica— y sangran solo el texto, con un
guion que marca de qué tema dependen. */
.ova-bloque li .t { display: inline-block; }
.ova-bloque li.sub { font-size: .93rem; color: var(--text-mut); }
.ova-bloque li.sub .t { position: relative; padding-left: 26px; }
.ova-bloque li.sub .t::before {
content: ''; position: absolute; left: 4px; top: .62em;
width: 13px; height: 1px; background: currentColor; opacity: .4;
}
.ova-bloque li em { font-style: normal; color: var(--text-mut); font-size: .88rem; }
.ua-descarga {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
background: var(--c-hielo); border-radius: var(--r-md);
border-left: 5px solid var(--c-cielo);
padding: 24px 28px; margin: 36px 0;
}
.ua-descarga__info { flex: 1; min-width: 220px; }
.ua-descarga__info b { display: block; font-size: 1.05rem; color: var(--text-head); }
.ua-descarga__info span { font-size: .9rem; color: var(--text-mut); }
/* 7 · Temario · marca por icono en las secciones estructurales -------------- */
.ova-bloque__tag { display: inline-flex; align-items: center; gap: 8px; }
.ova-bloque__tag iconify-icon { font-size: 1.1rem; }
.ova-bloque li .n--icono { color: var(--c-acento); }
.ova-bloque li .n--icono iconify-icon { font-size: 1.05rem; }
/* (el panel de cierre se descartó: los ítems van como los demás) */
/* 9 · Índice navegable ----------------------------------------------------
Regla del RED (ajuste de Scala): el estudiante debe tener control sobre su ruta:
un índice que solo enumera no lo da. Cada fila lleva a su pantalla.
Se descarta el patrón de un botón por fila —ocho botones azules seguidos
anulan la regla de que el azul marca la acción—: manda la fila entera,
con una flecha que aparece al acercarse. */
.ova-bloque li { padding: 0; }
.ova-fila {
display: flex; align-items: baseline; gap: 12px;
padding: 7px 10px 7px 8px;
margin-left: -8px;
border-radius: var(--r-sm);
text-decoration: none;
color: inherit;
transition: background .16s ease, color .16s ease;
}
.ova-fila:hover, .ova-fila:focus-visible {
background: color-mix(in srgb, var(--c-acento) 7%, transparent);
color: var(--text-head);
}
.ova-fila:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; }
.ova-fila__ir {
margin-left: auto;
color: var(--c-acento);
opacity: 0;
transform: translateX(-6px);
transition: opacity .16s ease, transform .16s ease;
}
.ova-fila:hover .ova-fila__ir,
.ova-fila:focus-visible .ova-fila__ir { opacity: 1; transform: translateX(0); }
@media (hover: none) { .ova-fila__ir { opacity: .45; transform: none; } }
/* El título de bloque de un tema es enlace a la pantalla del tema */
a.ova-bloque__tag--link { text-decoration: none; color: var(--c-acento); }
a.ova-bloque__tag--link:hover .ova-fila__ir,
a.ova-bloque__tag--link:focus-visible .ova-fila__ir { opacity: 1; transform: translateX(0); }
a.ova-bloque__tag--link .ova-fila__ir { margin-left: 6px; }
a.ova-bloque__tag--link:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; border-radius: 4px; }
/* 10 · Sección interna de un tema ------------------------------------------
Los subtemas viven dentro de la página de su tema, con numeración propia
(1.1, 2.1…). El encabezado marca el corte sin pretender ser otra pantalla. */
.ua-seccion {
margin: 84px 0 36px;
padding-top: 44px;
border-top: 1px solid var(--border-c);
}
/* La viñeta de sección: un cuadro celeste sobre uno azul — el pixel de la
marca. Sustituye a la numeración interna (1.1, 2.1…): todas las
secciones —introducción y temas— se marcan igual. */
.ua-seccion__titulo {
position: relative;
padding-left: 30px;
font-weight: 800;
margin: 0 0 10px;
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
line-height: 1.14;
letter-spacing: -0.015em;
color: var(--text-head);
}
.ua-seccion__titulo::before {
content: '';
position: absolute;
left: 0; top: .2em;
width: 16px; height: 16px;
background:
linear-gradient(var(--c-cielo), var(--c-cielo)) 0 0 / 9px 9px no-repeat,
linear-gradient(var(--c-acento), var(--c-acento)) 7px 7px / 9px 9px no-repeat;
}
.ua-seccion__lead {
padding-left: 30px;
}
.ua-seccion__lead {
margin: 0;
font-weight: 300;
font-size: 1.14rem;
color: color-mix(in srgb, var(--text-pri) 88%, transparent);
max-width: 68ch;
}
/* 11 · Sub-ítems de sección en el menú -------------------------------------
Abren la página del tema y bajan hasta la sección. Sin marca propia:
la sangría y el filo ya dicen de qué cuelgan. En el sidebar colapsado
se ocultan (no tienen chip que mostrar). */
.ova-sidebar__menu-item[data-tipo="seccion"] { grid-template-columns: 1fr; }
.ova-sidebar__menu-item[data-tipo="seccion"] .num { display: none; } /* las secciones no se numeran en el menú (regla heredada del RED de Scala) */
[data-sidebar-collapsed="true"] .ova-sidebar__menu-item[data-tipo="seccion"] { display: none !important; }
/* Las secciones ancladas no quedan pegadas al borde (ni bajo el topbar sticky) */
.ua-seccion { scroll-margin-top: calc(var(--topbar-h) + 18px); }
/* 12 · Evaluación · bienvenida con jerarquía --------------------------------
Un solo título (el de la pantalla). El head del quiz se eliminó: el progreso,
el contador y los botones viven juntos en una sola franja inferior, y el tema
pasó adentro de la tarjeta de cada pregunta (ajuste del cliente: el head
partía la pregunta en dos y la etiqueta "Actividad" competía con el tema). */
.ova-evalquiz__nav {
/* En el flujo y en la misma columna que la tarjeta (74ch, como .ua-eval__cuerpo):
fijarla al centro del viewport la descuadraba respecto a la pregunta. */
position: static;
transform: none;
width: 100%;
max-width: 74ch;
margin: 20px 0 0;
align-items: center;
gap: 18px;
padding: 10px 10px 10px 20px;
}
.ova-evalquiz__nav .ova-evalquiz__progress-bar {
flex: 1;
height: 6px;
margin-bottom: 0;
min-width: 80px;
}
.ova-evalquiz__nav .ova-evalquiz__counter {
white-space: nowrap;
font-family: var(--font-mono);
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
font-weight: 600;
}
.ova-evalquiz__btn--prev { padding: 12px 14px; }
@media (max-width: 720px) {
.ova-evalquiz__nav { gap: 12px; padding-left: 14px; }
.ova-evalquiz__nav .ova-evalquiz__progress-bar { min-width: 48px; }
.ova-evalquiz__nav .ova-evalquiz__btn { flex: 0 0 auto; }
}
/* El tema como eyebrow dentro de la tarjeta, y el caso pegado a su pregunta:
todo lo que hay que leer para responder queda en un solo bloque. */
.ua-eval__tema {
display: block;
font-family: var(--font-mono);
font-size: .68rem;
letter-spacing: .16em;
text-transform: uppercase;
font-weight: 600;
color: var(--c-acento);
margin: 0 0 16px;
}
.ua-eval__contexto { margin: 0 0 18px; max-width: 66ch; }
.ua-eval__lead {
font-size: 1.18rem;
font-weight: 300;
line-height: 1.6;
max-width: 56ch;
margin: 6px 0 34px;
}
.ua-eval__datos {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
max-width: 640px;
margin-bottom: 38px;
}
.ua-eval__dato {
background: var(--bg-surface);
border: 1px solid var(--border-c);
border-top: 3px solid var(--c-cielo);
border-radius: var(--r-md);
padding: 18px 20px;
display: flex; flex-direction: column; gap: 6px;
}
.ua-eval__dato .v {
font-size: 1.9rem; font-weight: 650; line-height: 1;
color: var(--c-acento);
}
.ua-eval__dato .v iconify-icon { font-size: 1.7rem; }
.ua-eval__dato .l { font-size: .86rem; color: var(--text-mut); line-height: 1.4; }
.ua-eval__ayuda { margin: 14px 0 0; font-size: .88rem; color: var(--text-mut); }
@media (max-width: 720px) { .ua-eval__datos { grid-template-columns: 1fr; } }
/* 13 · Glosario · diccionario editorial --------------------------------------
La inicial fantasma en Manrope ExtraBold marca el ritmo alfabético (solo
aparece cuando cambia la letra, como en un diccionario); un cuadro celeste
de marca la acompaña. */
.ua-glosario { margin: 8px 0 0; max-width: 74ch; }
.ua-glosario__entrada {
display: grid;
grid-template-columns: 76px 1fr;
gap: 0 20px;
padding: 26px 0;
border-top: 1px solid var(--border-c);
}
.ua-glosario__entrada:first-child { border-top: none; padding-top: 10px; }
/* Las entradas que continúan una letra se pegan a la anterior: la línea
divisoria completa solo separa letras. */
.ua-glosario__entrada--cont { border-top-color: transparent; padding-top: 0; margin-top: -6px; }
.ua-glosario__letra {
font-family: var(--font-display);
font-weight: 800;
font-size: 2.5rem;
line-height: 1;
text-align: right;
color: color-mix(in srgb, var(--c-acento) 32%, transparent);
position: relative;
}
.ua-glosario__entrada:not(.ua-glosario__entrada--cont) .ua-glosario__letra::after {
content: '';
position: absolute;
right: 2px; top: calc(1em + 10px);
width: 10px; height: 10px;
background: var(--c-cielo);
}
.ua-glosario dt {
font-family: var(--font-display);
font-size: 1.12rem;
font-weight: 650;
color: var(--text-head);
}
.ua-glosario dd { margin: 10px 0 0; max-width: 62ch; }
@media (max-width: 600px) {
.ua-glosario__entrada { grid-template-columns: 44px 1fr; gap: 0 14px; }
.ua-glosario__letra { font-size: 1.9rem; }
.ua-glosario__entrada:not(.ua-glosario__entrada--cont) .ua-glosario__letra::after { width: 8px; height: 8px; }
}
/* 14 · Términos del glosario en el texto -------------------------------------
Primera aparición por pantalla, subrayado punteado (la convención de
"definición" — el subrayado continuo azul significaría "navega") y
tooltip con la definición al pasar el mouse o enfocar (tab / tap).
Nunca dentro de la evaluación: sería una pista. */
.ua-termino {
text-decoration: underline dotted;
text-decoration-color: color-mix(in srgb, var(--c-acento) 55%, transparent);
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
cursor: help;
position: relative;
}
.ua-termino:hover,
.ua-termino:focus-visible { text-decoration-color: var(--c-acento); outline: none; }
.ua-termino::after {
content: attr(data-def);
position: absolute;
left: 0; bottom: calc(100% + 10px);
width: max-content;
max-width: min(38ch, 70vw);
background: var(--c-deep);
color: #fff;
font-family: var(--font-body);
font-size: .88rem; line-height: 1.5;
font-weight: 400; font-style: normal;
text-align: left;
padding: 12px 16px;
border-radius: 10px;
box-shadow: var(--shadow-md);
opacity: 0; visibility: hidden; transform: translateY(4px);
transition: opacity .18s ease, transform .18s ease, visibility .18s;
pointer-events: none;
z-index: 60;
}
.ua-termino::before {
content: '';
position: absolute;
left: 14px; bottom: calc(100% + 4px);
border: 6px solid transparent;
border-top-color: var(--c-deep);
opacity: 0; visibility: hidden;
transition: opacity .18s ease, visibility .18s;
z-index: 60;
}
.ua-termino:hover::after, .ua-termino:focus-visible::after,
.ua-termino:hover::before, .ua-termino:focus-visible::before {
opacity: 1; visibility: visible; transform: none;
}
@media (prefers-reduced-motion: reduce) {
.ua-termino::after { transition: none; transform: none; }
.ua-termino::before { transition: none; }
}
/* Los contenedores con overflow:hidden recortan el tooltip (pasó en la
infografía de la introducción). Si albergan un término, se abren: su
overflow es defensivo, nada se desborda en el estado normal. */
.ova-infografia__paso:has(.ua-termino) { overflow: visible; }
/* --- Pódcast de la unidad · la barra de progreso se puede tocar ---------- */
[data-ua-audio] .ova-audio__progress { cursor: pointer; height: 6px; }
[data-ua-audio] .ova-audio__play:focus-visible { outline: 3px solid var(--c-cielo); outline-offset: 3px; }
/* =========================================================
RITMO VERTICAL Y HUECOS · 2026-09-29
========================================================= */
/* 1 · Aire alrededor de los componentes -----------------------------------
Los componentes del motor no traen margen propio: hasta ahora cada pantalla
lo resolvía con `style="margin-top:44px"` a mano, y donde faltaba el párrafo
quedaba pegado a la caja de arriba (visto en la Unidad 3, 2026-09-29).
Se fija aquí para todas las pantallas Andina. Un `style` en línea sigue
ganando, así que las pantallas que ya lo traen no cambian. */
.ova-screen > :is(
.ova-callout, .ova-acordeon, .ova-carrusel, .ova-tabs, .ova-stepper, .ova-tabla,
.ova-vs, .ova-infografia, .ova-timeline, .ova-timeline-h, .ova-grid-2, .ova-quiz,
.ua-cifras, .ua-nota, .ua-caso, .ua-diagrama, .ua-anatomia, .ua-escenas,
.ua-tabla-apa, .ua-pendiente
) {
margin-block: 40px;
}
/* El primer bloque después de la cabecera no necesita el doble de aire */
.ova-screen__head + * { margin-top: 0; }
/* 2 · Hueco de una imagen que no ha llegado -------------------------------
Marca el sitio de una figura o una foto que diseño gráfico todavía debe
entregar, con la descripción que el DI le dio. Se ve que falta; no se
disimula. Desaparece cuando llega el archivo. */
.ua-pendiente {
display: grid;
gap: 14px;
place-items: center;
text-align: center;
padding: 44px 28px;
border-radius: var(--r-md);
background: color-mix(in srgb, var(--text-mut) 10%, var(--bg-surface));
border: 1px dashed color-mix(in srgb, var(--text-mut) 45%, transparent);
color: var(--text-mut);
}
.ua-pendiente__marco {
width: 96px; height: 72px;
display: grid; place-items: center;
border-radius: 8px;
background: color-mix(in srgb, var(--text-mut) 16%, transparent);
}
.ua-pendiente__marco iconify-icon { font-size: 2.2rem; color: color-mix(in srgb, var(--text-mut) 70%, transparent); }
.ua-pendiente__tag {
font-family: var(--font-display);
font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.ua-pendiente__desc { margin: 0; max-width: 62ch; font-size: 0.9rem; line-height: 1.6; }
.ua-pendiente + figcaption { font-size: 0.85rem; color: var(--text-mut); margin-top: 10px; }
/* En portada el hueco va dentro del retrato circular */
.ua-portada__figura .ua-pendiente {
aspect-ratio: 1; border-radius: 50%;
background: color-mix(in srgb, #ffffff 12%, transparent);
border-color: color-mix(in srgb, #ffffff 40%, transparent);
color: color-mix(in srgb, #ffffff 82%, transparent);
padding: 32px;
}
.ua-portada__figura .ua-pendiente__marco { background: color-mix(in srgb, #ffffff 16%, transparent); }
.ua-portada__figura .ua-pendiente__marco iconify-icon { color: color-mix(in srgb, #ffffff 80%, transparent); }
/* 3 · Hueco de un texto que no ha llegado ---------------------------------
Mismo criterio que el hueco de imagen, para un párrafo que el DI todavía
no trae: se ve el sitio, se dice qué debe ir ahí y no se inventa el texto.
Las rayas son decorativas (aria-hidden): sugieren el párrafo ausente. */
.ua-pendiente--texto {
place-items: start;
text-align: left;
padding: 26px 28px;
gap: 12px;
}
.ua-pendiente__lineas {
display: grid;
gap: 9px;
width: 100%;
max-width: 62ch;
}
.ua-pendiente__lineas span {
height: 9px;
border-radius: 999px;
background: color-mix(in srgb, var(--text-mut) 22%, transparent);
}
.ua-pendiente__lineas span:nth-child(2) { width: 92%; }
.ua-pendiente__lineas span:nth-child(3) { width: 64%; }
/* 4 · Rótulo de un bloque ------------------------------------------------
El título que el DI le pone a un componente (el nombre del acordeón, del
carrusel, del recorrido de pasos). Va pegado al bloque que nombra. */
.ua-rotulo {
margin: 40px 0 0;
font-family: var(--font-display);
font-size: 1.14rem;
font-weight: 600;
line-height: 1.3;
color: var(--text-head);
}
.ova-screen > .ua-rotulo + * { margin-top: 14px; }
/* 5 · Temario · lo que el índice del DI declara pendiente ------------------
Las filas que el documento escribe pero cuyo contenido todavía no llegó.
No enlazan a ninguna parte: se ven apagadas y con la misma sangría que las
demás. Se borran del contenido cuando el envío llegue. */
.ua-temario--pendiente { margin-top: 0; }
.ua-temario--pendiente .ova-bloque {
background: transparent;
border-style: dashed;
border-left-color: color-mix(in srgb, var(--text-mut) 45%, transparent);
color: var(--text-mut);
}
.ua-temario--pendiente .ova-bloque__tag { color: var(--text-mut); }
.ua-temario--pendiente .ova-bloque li { padding-left: 14px; }
.ua-temario--pendiente .ova-bloque li .n--icono { color: var(--text-mut); }
/* =========================================================
ADN ANDINA · componentes y ajustes propios de la línea UA
========================================================= */
/* 1 · Comparativo: neutro por defecto, error/ok por variante ---------------
Lección de la Unidad 3 de Scala (2026-10-02): el rojo y el verde se
arrastraban a pares donde las dos opciones son válidas. Aquí el color lo
decide el NOMBRE del componente que escribe el DI:
«Comparativo» → .ova-vs las dos neutras
«Comparativo error/ok» → .ova-vs.ua-vs--error-ok la 1.ª error, la 2.ª correcta
Nada de estilos en línea en las etiquetas: el glifo lo pone la variante. */
.ova-vs__card { border-top-color: var(--c-acento); }
.ova-vs__card--alt { border-top-color: var(--c-info); }
.ova-vs__card-tag { font-weight: 800; letter-spacing: .14em; }
.ova-vs__divider {
font-weight: 800;
background: var(--c-deep);
color: var(--c-cielo);
}
.ua-vs--error-ok > .ova-vs__card:first-child { border-top-color: var(--danger); }
.ua-vs--error-ok > .ova-vs__card--alt { border-top-color: var(--success); }
.ua-vs--error-ok > .ova-vs__card:first-child .ova-vs__card-tag {
background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger);
}
.ua-vs--error-ok > .ova-vs__card--alt .ova-vs__card-tag {
background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success);
}
.ua-vs--error-ok > .ova-vs__card:first-child .ova-vs__card-tag::before { content: '✕ '; }
.ua-vs--error-ok > .ova-vs__card--alt .ova-vs__card-tag::before { content: '✓ '; }
/* 2 · Fotografía con el marco de la línea gráfica --------------------------
Así trata la marca sus fotos (pp. 7, 8 y 16): la esquina superior izquierda
mordida con el sol adentro, la estrella coral asomando arriba a la derecha y
el escalón de cuadros saliendo por abajo a la izquierda. Alto fijo para que
los recursos caigan siempre en las esquinas de la foto, no del pie. */
.ua-foto-ancha { position: relative; margin: 56px 0; }
.ua-foto-ancha img {
height: 340px; max-height: none;
border-radius: var(--r-xl);
}
.ua-foto-ancha::before { /* mordida + sol */
content: '';
position: absolute;
left: -1px; top: -1px;
width: 92px; height: 78px;
background: var(--ua-sol) 18px 10px / 54px 54px no-repeat, var(--bg-app);
border-bottom-right-radius: var(--r-xl);
z-index: 1;
}
.ua-foto-ancha::after { /* estrella + cuadros */
content: '';
position: absolute;
left: 0; right: 0; top: 0;
height: 340px;
background:
var(--ua-estrella) right 4% top -22px / 64px 64px no-repeat,
var(--ua-pixeles-claro) left 3% bottom -26px / 96px 96px no-repeat;
pointer-events: none;
z-index: 1;
}
.ua-foto-ancha figcaption { margin-top: 36px; padding-left: 4px; }
@media (max-width: 720px) {
.ua-foto-ancha img { height: 220px; }
.ua-foto-ancha::after { height: 220px; background-size: 44px 44px, 64px 64px; }
.ua-foto-ancha::before { width: 70px; height: 60px; background-size: 40px 40px, auto; }
}
/* 3 · Ilustración explicativa · esquina de marca ----------------------------
La ilustración de apertura lleva el mismo guiño que las fotos, en pequeño:
un escalón de cuadros en la esquina inferior derecha. */
.ua-ilustracion { position: relative; overflow: visible; }
.ua-ilustracion img { border-radius: var(--r-md); }
.ua-ilustracion::after {
content: '';
position: absolute;
right: -10px; bottom: -14px;
width: 54px; height: 54px;
background: var(--ua-pixeles) center / contain no-repeat;
transform: scaleX(-1);
pointer-events: none;
}
.ua-ilustracion:has(figcaption)::after { bottom: auto; top: calc(100% - 66px); }
/* Con pie, el escalón queda a la altura del pie: el texto le deja su sitio para que
no lo pise cuando ocupa dos líneas (demo-unidad-3, «Volviendo al reto», 2026-10-10). */
.ua-ilustracion:has(figcaption) figcaption { padding-right: 60px; }
/* 4 · Ciclo · la escalera de cuadros (SVG inline en la pantalla) ----------- */
.ua-ciclo__escalera text { font-family: var(--font-display); }
/* 5 · Botones con los estados de la línea gráfica (p. 9) -------------------
Píldora en azul; al pasar el mouse se vuelve blanca con sombra; deshabilitado
en gris. El estado «visitado» en sol queda para los enlaces de navegación
que el motor marque como vistos. */
.ova-btn { border-radius: 999px; font-weight: 700; }
.ova-btn--primary { background: var(--c-acento); color: #fff; box-shadow: 0 1px 2px rgba(0,65,123,.15); }
.ova-btn--primary:hover {
background: #fff; color: var(--c-acento);
box-shadow: 0 6px 18px rgba(0,65,123,.22);
}
.ova-btn:disabled, .ova-btn[aria-disabled="true"] { background: #585B5F; color: #fff; box-shadow: none; opacity: .8; }
/* 6 · Foco visible en todo control ---------------------------------------------
Base de accesibilidad (WCAG 2.2 AA, 2.4.7 y 2.4.11): quien navega con
teclado ve siempre dónde está. Anillo azul con halo blanco para que se lea
sobre claro y sobre el abismo. */
:where(a, button, [tabindex], summary, input, select, textarea, iconify-icon[role="button"]):focus-visible {
outline: 3px solid var(--c-acento);
outline-offset: 2px;
box-shadow: 0 0 0 5px #fff;
border-radius: 6px;
}
.ova-sidebar :where(a, button):focus-visible,
.ua-respiro :where(a, button):focus-visible { outline-color: var(--c-cielo); box-shadow: none; }
/* 7 · Topbar con la greca apenas visible ----------------------------------------
La trama andina en claro (p. 3) es el fondo institucional de las piezas: en
el curso queda como un velo en la franja superior de cada pantalla. */
.ova-screen__head { position: relative; }
.ova-screen__head::after {
content: '';
position: absolute;
left: calc(-1 * clamp(20px, 5vw, 64px)); right: calc(-1 * clamp(20px, 5vw, 64px));
top: calc(-1 * clamp(28px, 5vw, 64px)); height: calc(100% + clamp(28px, 5vw, 64px));
background: var(--c-acento);
-webkit-mask: var(--ua-greca) 0 0 / 163px 209px repeat, linear-gradient(#000, transparent);
-webkit-mask-composite: source-in;
mask: var(--ua-greca) 0 0 / 163px 209px repeat, linear-gradient(#000, transparent);
mask-composite: intersect;
opacity: .035;
pointer-events: none;
z-index: -1;
}
/* 8 · Callouts más luminosos ------------------------------------------------
El tinte del motor (acento al 12 %) sobre el azul UAC queda gris pizarra.
Se tiñe con el azul medio, más claro y más frío: se lee institucional sin
apagar la pantalla. «Para reflexionar» conserva su sol. */
.ova-callout:not(.ova-callout--reflexion) {
background: color-mix(in srgb, var(--c-info) 9%, var(--bg-surface));
}
/* 9 · Estado «visitado» del menú en sol ---------------------------------------
La línea gráfica (p. 9) define los estados de un control: activo en azul,
visitado en amarillo, inactivo en gris. El motor marca lo visitado en verde
(éxito); en Andina toma el sol, con el número en sol sobre abismo (7,8:1). */
.ova-sidebar__menu-item.is-done .num {
background: color-mix(in srgb, var(--c-sol) 22%, transparent);
border-color: color-mix(in srgb, var(--c-sol) 55%, transparent);
color: var(--c-sol);
}
[data-version="clara"] .ova-sidebar__menu-item.is-done .num { color: #8A5A00; }
/* =========================================================
PIEZAS DE LA UNIDAD 3 DE SCALA · traídas a la piel Andina (2026-10-10)
---------------------------------------------------------
Las mismas piezas y reglas que scala-learning/skin/skin.css (§4b, §4d,
«Puntos de interés», «Llamado a la acción»), con la paleta y la tipografía
de Andina: el azul actúa, el celeste guía, el sol destaca; Manrope sola.
Las usa cursos/demo-unidad-3.
========================================================= */
/* 10 · Negrita del DI dentro de un remate ----------------------------------------
Cuando lo que el DI pone en negrilla es justo el remate del bloque
(…), la regla de la negrita
del cuerpo (600, color de título) apagaba el remate. Dentro de él, la
negrita hereda el 800 azul: el sigue ahí para el lector y para
verificar-di.py. */
.ova-screen .ua-remate strong,
.ua-apertura .ua-remate strong { font-weight: inherit; color: inherit; }
/* 11 · Ventana de detalle con ilustración -------------------------------------
La ventana del motor mide 560 px: una ilustración de 1200 dentro quedaba a
menos de la mitad y sus rótulos en ~5 px. Si lleva una ilustración, se
ensancha (Scala, unidad-3-con-ilustrador, «Volviendo al reto», 2026-10-09). */
.ova-modal__dialog:has(.ua-ilustracion) { max-width: min(900px, 94vw); }
.ova-modal__body .ua-ilustracion { margin: 0 0 20px; }
/* 12 · Campo: subtítulo con su texto -------------------------------------------
Varios subtítulos del mismo nivel del DI, cada uno con su párrafo (los campos
de «¿Qué va a lograr en esta unidad?»). Todos pesan igual y ninguno va en
tarjeta: una sola columna, un campo por fila, filete fino arriba (decisión de
Scala del 2026-10-09: en dos columnas las filas quedaban desparejas).
El icono (opcional, aria-hidden) va en azul al 55 %: el sol es de lo que se
destaca, no de cada ítem, y el azul lleno significa «clicable».
Espacios: título de sección → campos 28 px · filete → icono 20 px · icono →
subtítulo 12 px · subtítulo → texto 6 px · entre campos 32 px. Dentro de una
.ua-seccion se alinea con el texto del título (después de la viñeta, 30 px). */
.ua-campo { margin: 32px 0 0; }
.ua-seccion__titulo + .ua-campo,
.ua-seccion__titulo + .ua-campos { margin-top: 28px; }
.ua-seccion > .ua-campo,
.ua-seccion > .ua-campos { padding-left: 30px; }
.ua-campos {
display: grid;
gap: 32px;
margin: 32px 0 0;
}
.ua-campos > .ua-campo {
margin: 0;
padding-top: 20px;
border-top: 1px solid var(--border-c);
}
.ua-campo__icono {
display: block;
width: 28px;
height: 28px;
margin: 0 0 12px;
font-size: 28px;
color: color-mix(in srgb, var(--c-acento) 55%, transparent);
}
.ua-campo__titulo {
margin: 0 0 6px;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--text-head);
}
.ua-campo > p { margin: 0; max-width: 68ch; }
/* 13 · Lista numerada: párrafos largos del DI en serie ---------------------------
Para una enumeración de párrafos completos (los «En el primer / segundo /
tercer tema…» de una introducción). Misma familia que .ua-campos: sin tarjeta,
filete fino arriba de cada ítem. Al margen, en columna fija, el número en
Manrope 300 y azul al 46 % (el número de las escenas: contraste de pesos, no
de familia) y, opcional, el icono en azul al 55 %. La marca es decorativa
(aria-hidden): el ya numera para el lector de pantalla. En ≤ 720 px la
marca pasa a una fila encima del texto. */
.ua-numerada {
list-style: none;
margin: 40px 0;
padding: 0;
display: grid;
gap: 32px;
}
.ua-numerada__item {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
column-gap: 24px;
padding-top: 20px;
border-top: 1px solid var(--border-c);
}
.ua-numerada__marca {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.ua-numerada__num {
font-family: var(--font-display);
font-weight: 300;
font-size: 2.3rem;
line-height: 1;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums lining-nums;
color: color-mix(in srgb, var(--c-acento) 46%, transparent);
}
.ua-numerada__icono {
display: block;
width: 24px;
height: 24px;
font-size: 24px;
color: color-mix(in srgb, var(--c-acento) 55%, transparent);
}
.ua-numerada__item > p { margin: 0; max-width: 68ch; }
@media (max-width: 720px) {
.ua-numerada__item { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
.ua-numerada__marca { flex-direction: row; align-items: center; gap: 12px; }
.ua-numerada__num { font-size: 1.9rem; }
}
/* 14 · Puntos de interés · el globo se ve entero ----------------------------------
El motor recorta la imagen y abre el globo siempre hacia abajo: el de un punto
cerca del borde quedaba cortado (Scala, «Destrucción», 158 px fuera). La caja
deja de recortar, el globo cerrado no existe en el layout, y skin.js lo abre
hacia donde cabe (.ua-hotspot--arriba) y lo corre si se sale por un costado
(--ua-globo-dx). medir-pantalla.js marca «globo-recortado» si vuelve a pasar.
El título del globo: el motor lo pinta en azul UAC sobre el abismo (1,4:1);
va en celeste (6,9:1, la guía sobre oscuro). En el tema «clara» el globo es
blanco y el título vuelve al azul. */
.ova-hotspots__img { overflow: visible; }
.ova-hotspots__img > img { border-radius: inherit; }
.ova-hotspot__tooltip {
display: none;
transform: translateX(calc(-50% + var(--ua-globo-dx, 0px)));
}
.ova-hotspot:hover .ova-hotspot__tooltip,
.ova-hotspot.is-open .ova-hotspot__tooltip { display: block; opacity: 1; }
.ova-hotspot:hover,
.ova-hotspot.is-open { z-index: 5; }
.ua-hotspot--arriba .ova-hotspot__tooltip { top: auto; bottom: calc(100% + 14px); }
.ova-hotspot__tooltip strong { color: var(--c-cielo); }
[data-version="clara"] .ova-hotspot__tooltip strong { color: var(--c-acento); }
/* 15 · Llamado a la acción e indicio de interacción ---------------------------------
Antes de cada contenedor interactivo va un llamado a la acción en usted, con
el texto que traiga el Word o el de la tabla de llamados de Scala (guía del
cliente, 2026-10-09). Es texto HTML real y va entre el título del bloque y el
componente, pegado a este. Cada vez que el bloque aparece en pantalla,
skin.js («indicio de interacción») pone .ua-indicio al componente y a su
llamado: ① la manito hace dos toques con un aro que se abre; ② el primer
control que invita late dos veces con un halo azul. ~2,5 s y queda quieto
(WCAG 2.2.2); con movimiento reducido no se mueve nada. */
.ua-cta {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 24px 0 0;
font-size: .95rem;
line-height: 1.5;
color: color-mix(in srgb, var(--text-pri) 85%, transparent);
}
.ova-screen > .ua-rotulo + .ua-cta { margin-top: 8px; }
.ova-screen > .ua-cta + :is(.ova-acordeon, .ova-carrusel, .ova-tabs, .ova-timeline-h, .ova-hotspots,
.ova-video, .ova-audio, .ova-beforeafter, .ua-descarga) { margin-top: 14px; }
.ua-cta__mano {
position: relative;
flex: none;
display: inline-flex;
width: 22px;
height: 22px;
font-size: 22px;
color: color-mix(in srgb, var(--c-acento) 75%, transparent);
transform-origin: 50% 85%;
}
.ua-cta__mano::after { /* el aro del toque, en la yema del dedo de mdi:cursor-pointer */
content: '';
position: absolute;
left: 5px; top: -3px;
width: 10px; height: 10px;
border-radius: 50%;
border: 1.5px solid var(--c-acento);
opacity: 0;
}
@keyframes ua-toque {
0%, 100% { transform: none; }
35% { transform: translateY(2px) scale(.86); }
60% { transform: none; }
}
@keyframes ua-aro {
0%, 30% { opacity: 0; transform: scale(.4); }
45% { opacity: .7; }
100% { opacity: 0; transform: scale(2.2); }
}
@keyframes ua-halo {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-acento) 40%, transparent); }
100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--c-acento) 0%, transparent); }
}
.ua-cta.ua-indicio .ua-cta__mano { animation: ua-toque 1s ease-in-out .3s 2; }
.ua-cta.ua-indicio .ua-cta__mano::after { animation: ua-aro 1s ease-out .3s 2; }
.ova-acordeon.ua-indicio .ova-acordeon__item:nth-child(2) .ova-acordeon__head,
.ova-tabs.ua-indicio .ova-tabs__btn:nth-child(2),
.ova-timeline-h.ua-indicio .ova-step-card:nth-child(2),
.ova-carrusel.ua-indicio [data-ova-carrusel-next],
.ova-audio.ua-indicio .ova-audio__play,
.ova-beforeafter.ua-indicio .ova-beforeafter__handle,
.ua-descarga.ua-indicio .ova-btn { animation: ua-halo 1.1s ease-out .6s 2; }
.ova-hotspot__pulse { animation: none; }
.ova-hotspots.ua-indicio .ova-hotspot__pulse { animation: ova-pulse 1.4s ease-out .6s 2; }
@media (prefers-reduced-motion: reduce) {
.ua-cta__mano,
.ua-cta__mano::after,
.ova-hotspot__pulse,
.ua-indicio :is(.ova-acordeon__head, .ova-tabs__btn, .ova-step-card, [data-ova-carrusel-next],
.ova-audio__play, .ova-beforeafter__handle, .ova-btn) { animation: none !important; }
}