/* =========================================================================== Dr. Luigi Seronni · sistema visual do site Nasceu da página de blefaroplastia (v7, a que está no ar) e vale para todas as páginas: home, uma página por cirurgia, consultas e artigos. Mudou aqui, muda em todas. Página nova não traz CSS próprio para o que já existe aqui. A ordem das regras é a da página original: não reordene sem conferir. =========================================================================== */ /* ========================================================== TOKENS ========================================================== */ :root{ /* O escuro da página deixou de ser quase-preto: é a sálvia funda do manual, aprofundada até 10,6:1 sobre o creme. Fundo escuro e cor de texto passam a ser o MESMO token, que é o que um sistema editorial honesto faz. */ /* --- BLOCO 1 · A ESCADA DE CAMPOS --- A v28 declarava quatro campos e entregava dois. Medido em ΔE2000, creme→sálvia dava 5,74 mas creme→linho dava 2,30, abaixo do limiar de percepção em área grande: a página tinha, de fato, só claro e escuro. O conserto não foi trocar a paleta, foi ACRESCENTAR um degrau por cima. O creme do manual deixa de ser a base e passa a ser o segundo campo. Escada final, toda medida: branco → creme ΔE 3,30 creme → sálvia ΔE 5,77 sálvia → escuro ΔE 62,9 Cada campo carrega um significado, e é isso que impede o xadrez: branco a página falando (leitura corrente, argumento) creme material de consulta (índice, prático, FAQ, endereço) sálvia a prancha anatômica (ciência) escuro evento (prova e decisão) */ --branco:#FDFBF0; /* campo base — papel claro, quente, L* 98,5 */ --papel:#F1ECE0; /* creme do manual — segundo campo E tinta clara sobre escuro */ --linho:#E7E1D4; /* rebaixo: buraco de imagem, nunca cartão */ --salvia:#DDE2D3; /* campo da prancha */ --tinta:#2E3829; /* TINTA: texto sobre campo claro. Só isso. */ /* --- BLOCO 3 · o campo escuro se separa da tinta --- Até a v30 --tinta fazia dois trabalhos: cor do texto E campo escuro. Um token só para dois papéis significa que clarear o campo clarearia todo o texto da página. Separados, cada um responde pelo seu portão. O campo subiu de L* 22,2 para 30,2 e o croma de 11,1 para 15,8: ele estava mais escuro E mais dessaturado que a própria sálvia funda da marca (#3B4633, croma 13,2), então lia como verde sujo e não como sálvia. Agora fica na família: salvia-campo tem croma 14,2. */ --campo-escuro:#3D4B34; /* campo escuro — evento e respiro */ --tinta-2:rgba(46,56,41,.88); /* 7,4:1 sobre creme */ --tinta-3:rgba(46,56,41,.80); /* 5,9:1 sobre creme. Subiu de .74 porque .74 reprovava (4,3:1) sobre sálvia com grão. */ --fio:rgba(46,56,41,.18); /* 1,4:1 — filete editorial, separa parágrafo */ --fio-forte:rgba(46,56,41,.58); /* 3,0:1 — limite de componente clicável, WCAG 1.4.11 */ --fio-suave:rgba(46,56,41,.10); --musgo:#55604A; /* = sálvia campo */ --musgo-claro:#9CA892; /* = sálvia da marca. Texto GRANDE, traço e foco sobre campo escuro: pisos de 3:1, e passa. */ /* Com o campo escuro em L* 30,2, a sálvia da marca cai para 3,43:1 no pior grão — abaixo do piso de 4,5:1 do rótulo, que é texto pequeno. Este é o mesmo matiz, clareado até passar (4,90:1) e só para texto pequeno. */ --musgo-rotulo:#BCC7B2; /* exceção funcional declarada: o barro só existe no bloco de segurança, onde a cor precisa não poder ser confundida com decoração */ --barro:#8E3B2C; --barro-claro:#EFE0D9; --papel-escuro:rgba(241,236,224,.82); /* subiu de .76 pelo mesmo motivo de --tinta-3 */ --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"Archivo","Helvetica Neue",Arial,sans-serif; --marca:"Jost","Century Gothic","Futura","Helvetica Neue",Arial,sans-serif; /* --- paleta da marca (manual): sálvia, creme, taupe --- */ --salvia-marca:#9CA892; --salvia-campo:#55604A; --salvia-funda:#3B4633; --creme:#F1ECE0; /* alinhado a --papel: um creme só na página */ --taupe:#B7937B; --taupe-tinta:#7E5C3F; --fio-marca:rgba(59,70,51,.20); /* --- movimento: curvas (4, e só estas) --- */ --ease-standard:cubic-bezier(.2,0,0,1); /* padrão: entra e assenta, sem overshoot */ --ease-emphasis:cubic-bezier(.05,.7,.1,1);/* ênfase: percurso longo, desaceleração ampla */ --ease-exit:cubic-bezier(.3,0,.8,.15); /* saída: acelera e some */ --ease-draw:cubic-bezier(.65,0,.35,1); /* traço que se desenha: começa e termina calmo */ --entra:var(--ease-standard); /* alias herdado do herói */ /* --- movimento: durações (4, e só estas) --- */ --duration-fast:150ms; /* estado: hover, foco, chevron */ --duration-base:300ms; /* revelação curta: item de lista, troca de slide */ --duration-slow:600ms; /* entrada de texto */ --duration-event:1100ms; /* evento: imagem, desenho anatômico */ /* --- movimento: ritmo e amplitude --- */ --stagger:70ms; /* passo entre irmãos */ --travel:10px; /* deslocamento de apoio */ --travel-lg:18px; /* deslocamento de âncora (títulos, blocos) */ --mv-scale:1.02; /* assentamento de imagem */ /* --- BLOCO 1 · ELEVAÇÃO --- A v28 tinha zero sombra e zero gradiente: nenhum eixo Z em lugar nenhum, e era essa a causa mecânica da sensação de página chapada. A sombra aqui é a PRÓPRIA TINTA em alpha baixo, nunca preto nem cinza: preto sobre creme suja o matiz e devolve o cartão genérico de SaaS. Três alturas, e nenhuma a mais. */ --alt-1:0 1px 2px rgba(46,56,41,.05), 0 2px 8px rgba(46,56,41,.04); --alt-2:0 2px 4px rgba(46,56,41,.055), 0 12px 28px rgba(46,56,41,.05); --alt-3:0 4px 10px rgba(46,56,41,.06), 0 28px 60px rgba(46,56,41,.055); /* --- BLOCO 1 · TEXTURA --- Havia UMA textura no arquivo inteiro, atrás do retrato do herói, e por isso ela não podia ser reusada: estava calibrada para um campo só. Agora são duas densidades, e a diferença não é estética, é física — a mesma variação de luz rende menos ΔE em L* baixo, então campo escuro precisa de mais grão para o mesmo efeito percebido. Cada camada é fibra (alta frequência) + mancha (baixa frequência): sem a mancha o grão vira chuvisco de televisão em vez de papel. Portão usado na calibração: no pixel mais escuro do ruído, o corpo de texto continua acima de 7:1 e o texto fraco acima de 4,5:1. */ /* A mancha (baixa frequencia) e um PNG de 190px esticado para 760 pelo background-size, e nao mais um feTurbulence. Motivo: em DPR3 o SVG obrigava o navegador a gerar um bitmap de 2280x2280 (20,8 MB) por variante de campo, que estourava o cache do celular e era regenerado durante a rolagem. O ruido tem detalhe minimo de ~21px, entao 190px de amostragem o reproduz com delta maximo de 2/255 - medido, nao estimado. A fibra continua em feTurbulence: e alta frequencia e precisa da resolucao. Para regerar: perf/construir_final.py */ --grao-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.55' intercept='.22'/%3E%3CfeFuncG type='linear' slope='.55' intercept='.22'/%3E%3CfeFuncB type='linear' slope='.55' intercept='.22'/%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)' opacity='.55'/%3E%3C/svg%3E"), url("data:image/png;base64,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"); --grao-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.52' intercept='.24'/%3E%3CfeFuncG type='linear' slope='.52' intercept='.24'/%3E%3CfeFuncB type='linear' slope='.52' intercept='.24'/%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)' opacity='.26'/%3E%3C/svg%3E"), url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAL4AAAC+CAQAAAAhfX0WAAAgsElEQVR42qVdWbIkSYq0CUWk7zfnmaMbIvORGeFmoAp4dpZ0ddZ7sbjjGCjK9j//979rrbWWrfgHa621/O9/7fW8Dum38e/3p9z/w++VTt7lf3+6i997uMbz+8/vwe++kD7lvKd4/7jeg+NK/HrPfRd/vvWUj//9/T7+fn6Hfd+26QNYh6iy6NkjWOIhxtty+k4vPsV/j0a/IgrZrgdSff4+7t5/V4g1+4Nwp7g+2cXdmv+9Lfw0wQ5B4LiNnUR/Cwbk4xH0X93OfRr4Z09FwB440vdsIv5sATwoX/wde5yg55qpzefRwe+B3selnTdu5MaykDHU5PO9ON6J64zh+kwX35I/LX8eE54HkRgxUn4Zw2hsvPjs9VeaTl/nX4mex9UX/orfkvjQaJ1fAlrCMiO9CqXP8OK33pwobtRcaDH/HA+GbA/M69fW+2VgPUjLvsJA+uWmPmAld4dDlPmYZg30w5i4PEkubhPCOM3EvoTRgbgjF8Zpkfv8nldPtl49rE+2SX6ggS31tzYDz9FHgTb4kcbPSlvpJf5FyythWPj2SvT8auyQ2P7dlwsVc6HcB3B7UJAnh4bSA4C+wqXDZgLSh3xiZCBA4QqGzwgWQ+lsuTne6QE5Oe8X2onCQBLV/h2oiWVF+xt/pcNZjzEQdH4vLn3mZiOiIi1+jOWhFePDgyKQgGQLVzXHNl7einoQnoIrT9D1NHPn1W8BQ0/QbNc7agNqv3/01c5Oiz/CR6m/Jzb2UiyTZ+4NgkJzInBFsdHMIVnpTdzrE4m++YMr7jERH9dn9HzF5/xgBEyyaGzma/0XdrhCyBB+xK9r1PEBw1X/dtUu5BCv4RG9NdrPVOOD1kh48venAXAaS56P0pPW9w8U0pmzV8RX5/cyk2kDb+WNi12ClGHMFVI4atVX+oXecUS/dhwrL24bNDLUXAxkYP+82in1xc9QDRItxDIx5nlzWjY5MTHovOOaP6bvCi2QNJr59E3EMrFyPUJSAM8LvI+hrd1JV41CYS9wDogtsCR6Zb7uzzFQVq4GVc/T3A0gc/FpTvW++yzQvyugbAlzn3jcmrjZXyjQLsWt1cGmLCGOoOfkW54HkDVXB1OT+NQDbbEa1ojdll0UoV8BkY2jjC/f6YEqrmy8p6AO6iq9EdQTB55HDD8izi5BcQ6Iu558ppy68godWWLkK4IO8jyheQQmHDGosGtD6wtfPh+N3ltwU5Gn3FcWQLtIZqv9+lvGVpl+cyL6+xDv3wOZGDT1sHBQv/HRbsJRRV95X6tf1oGYne8lI3Aft000moqwRvcqK871pWYQb/XwIJZNlAHj68kO1i4t34Syq/SenTf/JlP8+IITA5yivwmkHJDtXzx5xpQ8WgCJd73BBopJXA2v403yMRPKjJDgWAcXOvQrQePSoX/f9Xlir5NStaQpLOxBiQFcWj5Q/FOjgQqPecozMxZTx51zatBp1pl5KR9woR/lCu3nYGtO20mKrY72MKCicDAoRpj2+o/JK/R0H6CUwSQZCuGpcn2FcukGSjThMkPMsjqxYTHf6+TYTQhnpDDHKD8Zr+z5FqNAkAsWFA/hqmFwEhtHV6tiIxSqJbJNIO7C5TF8xAURPHhBlymcARmgnJUGGPDrvs4kJ0TgthJlHa+kEn9+mBVb+zfCzbkc9rydohInrIgSvQrafcXcKQvGbldngvh2kQtQoK+mLu6sVvzkKsc8iXCwDAHbrKDJ8SN2CCicUFhWeomK14mEHj8T/0YO9yyRt4gfxel3GoVkVXqIc7P0PLyhAjzFcx4u8C4/2uQB4DJmEMd/8sAYotpEKB7AMVM60DDRgwWvcEw2PzebmfJpkI7JxWU5PeQeCINdsiSRotC1X/+WvGG1kcyAoDENmtrwxuQxZ35HKJTVVPyh/jIvrGMlPiOHGSRA8QY5e0kSOMFTa+31H0lq94/eE+Su0RzLeXzW0mWekIHURMAW8px+/fM9CfuKQ13GxCymVt9tK1YrQxQyxoJErD5RcwMOxuV0wdaXN7CqBmdeQ5zPiBWujGsJEqyNOMjLjIPWehVluKigztcTqeIdYmd+ryDgEwdlY3X5U3WrVeWLBTwMmlrwEvc4wTcdKMxBGQR0xo+zAmFZK9uuWKN31UQ/szPVc8jw6DzaEMH+bUlvAkqVDzo53D7KrxrR4ljEWHM8Tr75z783KXtFyYIJ4XtBgFU4ApdF1WUf0QYvQcTGo1wjdi/JPUUOPoKyv6VSb6rlvn/fAu1ViIl7UGM4vQp0qmgOxNaDIucc/X7roj2EamfbxQ7MUd0p4D+TF19hAw/npH+mFn0MSSvH/edO7WYvMpOBxgTdN8WdKEKCRotsX8GZpXzBzUc6OY93fG4hIXPXPqPkmapqfl50G5kh/iAepfnw4xzhWWfV8FefGDn7NIrN+I9TP57EzBYAk+MVEMCLv+YmRzU9KeFFnOMNXrrhrB+n+NPZerQiuvUp4+YHAU1T1ewhrIKW6xn4Jy8AWQqskydVzYULzOXUM50/3euzC3dWN9ywIKgKa6qHeV/UPtgZHsTbetMOtCTKiXCyPgV+pUfXoEBYGabfXeyQHM40EgKZ6wHv32XW2W/cNhvSXXqJlr1ET1FhPBBjiuB1iZmqPuEJ6efFwz5w/i6gJpL1WqlE1cZNOtrweGMCvMXl0ctU4BetvrOgSvNJkH+rPIupaMxFl8YXucSPQMOD7KDbmcl0Eo57ItZAwSBTD4baIMQ/44yUscKaVAW5Fn6FGCJmt8DY65gu42Q0qYt8g96g8C7+WI1LZoDTCU/jgnIAJThAkdhdNWdTwd8VaGeBFEf2flV07kOUOYjzpXKw3DBUxVn3ucGQHskmw0trXhtRHyUTRaEs2gOzwqSC6Nic1JCppginuoylKw6MmkmubU4VxFviCw2y0+3ePo5jLJNQvZXTqbSsdRPj4uTydceiEf2asSxrfEVIXqhWC22UKqBtPNhGQavejM3+WzrtUnCKmGN4ApRj5ycOL4S5Gus7eQS3v6tQzVcaFdayh8+fsdCefMA+xH/rCMoyDlbJXh18WzqljyHyBnXTHEPFlCOv+3GZV8hAN85wuSgXvNQeP5IWp/bng6nsfUfL+lWEVSN7l+qDQWQQ+7y4FT/ZV9Bzer6afU48tYYRi1ML9tb+mI7YS/cfuqCX+a11YtdlUfNucZbXAjE9+Vs4lWwST6XSkZovQZEa3olld5kK90TMVgNXUEBLb3XZqXdRGWGU9wxiflHUZFaf+tN8FCEDAu+TO0dybOp0opML8ftompSLYKbih1S643nsaJDREuDZrhrn26zspRqV4rcZiKhV+eAqRZ/jRS8cbczXIuXTuu6pnpHhANFHsTFKZokpS25P0qL/RbjsyFcj3k7rvxev9/EUXvE+PV+rPLZP9Zulh5JDOSPFInVXbSUabqyi7k+a8ZQjN6VdLng917HaUklH3q+k/EGs4PQ098qFYWFtedOIveKM+AMwcf9eit9vzX8X+2lerg7IdccV6KlbBPXso7ywT/Goeh8XygbhfaaVHZBEnZq5ZV0fqpfe31s+xBt+HI2TfYSxC92Ouh87gyHLWLP4taECMT8YP5T83bZet+FXTodx+FN46IQM8xAV9p+3w/8bOUEg3iAW+nrrcHt8FiMGZIf7FkFjVNMzJdR0MOQiNO+zUKdo7tIRX3ESilMGhyshK3l8M0c03q+9iyERsL83eu/jx6BpvRvx5DhEtWb/S12/J7o4V2dO6Ir4cMBZzSmPgxTAIPU6nTeh63h70+aD20Ky2Y+eM67nnJLY2eP6AcZunLV0arSKbw/NV8NZWNTLLvV0Vz5GCX3Cz8lcZFahcBsaTrXthNS8mAPNy1tcwAGei6gpB9Oi5rqJUp/PaaoKK+EfG30slTvdHOL3xu337apvOLYtxQcwgxEa9qI1r0dnyir5zB6A7mBkNsXcoBREjgNQMC2s6pg13CBMhmVl5s/Ybh+UQDEmd5Pr6Hp2TqW0aQ1B/ZG24rj3RVcUuEDOqpAK5djG/DnvHSzkyGLVfWh0flUuzepmjiAPNe0mhXm63T2wlDet4AIXaOu+mkFG96OyUvPuzrDnBOyl5+WoP7uACZXx+vM/U71M2u+zmThsChPK6ZQ8lAL9d0ZYFe+O34jo3YZEvBRRAc+OXvHG2ES/ZzpV0MV5/tJUeUPfgsBJCL33EGpl8PlknKYDqUHN32SSeM528Aq7GEOYuowqNcGGt+3FOmi9hXBqJuaZBzVJ0Cqs8dOtn/jfBXrsJ9/mJS8p+NrL3ZNKre5BiSZEIfi7mESHK12FPquotIRkdBSQB2yYGLxYWXHQurrc+GxjbMTMDpjN12FUB71MRoN9cAWi1Vi6oIt5hMoLqAByQokzleNzm3mjEZ9N9NN8rHr6aY0BvjWYu31kM14kNguvgoCbVQh3XKwef6CpblBzosPOM66+bD5LlXOmMT7P2ORsKXXIBjqrrC+r+0fjpJFIhnkHZb4iEzykD4ypi8Vu52edHJOtlHzg8zpuN3zq29lwaUTw921UzvaMTm2ttlM2bsDSNRQYhmBWPKDsaO+NSkjEImfAnvoGY0h9HS+ok2NeOJ56UCOOEWE5VDIxeG6J9+Sbj8rBq244xK1xmRPYaS1kiYZ6L1u2i8gt1qGhnJbAA7O+zceXaquBzO92NEPG+7UJ4vy6l+GchqY1R/D0HH8YUVQNJJ90g/hadEKCU6uZp8wbLUe5exx7puduQ603nUzAaEWZbcH01hTF537LDozkPshh3vqJwSFbiRvyIotgxfHnq/y4kHxs0ycz/9W+L6f3MostLOclNzVBEzh3NgDNpvPkenwjexYxjkl1DmFdJghiDr4tNeXHhR9DMDcgqpZ/N6SU68UyXhio2Jfl1H7X8zliHkDtuKpqgmJ345+Z4BV7gwFZhjAnTjHAXijL5z48cRSzU+I4chh5LxUXXd8F0pUnTo3EkuQ0CBu5Xiog8zq7pOF5cbx5wsRnJHgSQSxGWzTRgGGTZq7StOJxONF91WvCZ2Cd0bwFUL0lRRIp570WqWS19CBO2IHQfuHfa2CcRQ6q2MaRvgmMVz5UNFpt2b1kZ3zxsZOQIPGZGD3fwnjHDU9juF2Cd8EGUWJOjxiFuPFpxQ/+9ij1Cwg4YqnT2XmFZLWfCmKNzIwbOruQ2VXfPTguShQfyVnshF3HQXk39s4pEQ1anoGGaWFBk2ZdQXd9+uh0PQpioSxL868epuXeole7o/MJtdVsxFrEHOXb8QNL7FTQVE2MxcXcv9sJ5I3Jq2Px/DhtqGK62EttfmaUpa+P3vKxRMi/rqGIdVJk2q2EwgB1JRn9esxuzR8aNucO8OpP9AJ5xSUKn/zEnG4F0fbWSRmJYiT1Rly0vAqavb2TgN6buQsYZx0yZPVS8IvQL7YEb88KPNkewUkY3VdHQogUoqv1xmNenFkPngGyMHLWPFojPN0WHaPtn+Z3h0jV1MYNOZuGG/NgRtN4Xpohl2Xc53nxIUrLQeYqDJs1ZrSKQ2yJgH2WTMskdA06FZ0cC8/RUlyzA74KjhFlpYUP1IXRHCjuINqLT+Uuu8mpHhJmLs8NBsL4U157V5N1yAXNZpIJbtd0ubdbruPKEz67XAHdz8w8vAlCekODcAaekGQXcaria3i51czhIjCWcWm32vxeISeQ+YqZfve11gfldKfJAMO94kbwKaybiH+VfCUXNoTA8/C7+zWbkmS9+G096Rot+DsxinvqiC9eteApV3u3/0bOYwL5FKjMkxZ8dZOhuhBL90xCJEC6otzK7Z6EnSJqSO4bBeaIyej7YvexTY5vy+xnMZ2uaq846QOv483ppCs2c3+n/7Z/MLqMEbt/Y1Obj/W2/l1VCVR5KScrythwySh6H9z20ygxA717xO7PtkWyKlao0Y6czq1GTle9gHk+k9bWm2fxgpuJLGsHDjnAXcNq6r5cvEJ1fNmz/cvir05PurpkL4zEvfaVn4t+iMWkR9wl9+gNA6q9iyLyeNrzs0alGBBe3gYOsB5ozeoZXC7tmBiADr1FDH8OVV+DTsI5fad2alynG5Kq6nk8S0YHqfJzSejHAn+nI3v54OoblELqGqcesujrMIpHv7XlMLm2ARnteEH2smlKD85la7NBCK7OKk8ILib6idlhI49cLpi8d027RD68uPj5nC3mdBkGhyffkMmnzB4kJ8zuXg4k694ls6sAMIZgERdFnWf7ICOdiEv8kxH0d+V2Hi1pCktkavnONXlK1XkKw7j56JotampqTnqAiD/T0DsMxIhpVBVOvcu5RbrST82vN/qx2nV1QpxEu+vVxNl3UURloOqx2P6j8mq2v+I4q1LZ3B0Z/3xAFs3zxJq1Icbzky1ohn8ZvQuRSmGrMHxwhX7Ybw8MVp0ExD8qBS4z9nQeGLPhrCzIhBaAstl2FQ51SNxXN/kVDR1dm7C8v/fsK3RRp59xjo/Mi8tQLQZpxlxK/gprtUCv/eomILOWIchVYtyxVsNjYjkHR/UrPbCKSPvvvNE1mTDyfEYqlSvxx85wTR6wYdJojFg3SkItyIlXcqrCXqtYq3me9v/WP3H4/EfCxwh3XgXjo0jP0yTLbGEhur25c+8OOFY9ikhxLIsYRMgFsYxEsVWN6qjlczcrGd9iYsWxXPRUqEfHsHwcUOSyqvntLiwvWM7K3LxZTPvnAVQ1qDPmyXj7/8xyPahmCyy0CiOkbz2u86uHS6seMNVr9mbylU6v7LR1cY32WASoWUWK3VjFXbDfRglqTdzdqWcj65p0P66eGLsLhj7CgYn+3oXl+2/bFBuWpPv4D/vC2yTvmzTh2Lg9XJe7Ai1knbjb3qoysBvFrLTXy+BJ/Vzlcy2lee5rsSS7Q1oeuktMFgPV8wDz0HLNwbM6aIgQvm9M7iNnNmpyUtJyT3LmOyTj9gDQCT7xRNopMl6tC0ki3LYWIzo1Vt5PgqoJ3sI4JgWl82qDATFLZQkSfBYhWM6KTvqVEKLhR/w72MVbL7HqXVJs5hTWbIYa5APpes+RYhH9QLrVOovAVzWx4oMwWQaDrbVIrphRsPF3SPVctXHBK9FzwzVz99o1elu1xDl8DprTON8qgPGi4uDRprO10toLREL3ef8bJCMyy96e+88n3cNMS9UuRnVmvugfq97Ofpr2j12rqVezgkMFJSZOhl3LK7H+Q534KXgrfjvF536dOwxfz9s1OevJW0pqMvFmjcnmCBZs84H+cZiuEVwUmy5jvy5otIylhs31RFZu09gvgr1VILnpfPDZQHwwYm0lpud8q9rEM5lEfGMAo+jhjmtBe895N/t7prEbieTi0eYNqdUULC9pctMLTDMmj4u2l+BoOEF71xbwvlddmAe5XaV+rZV1CTOG/mYn5wsNvTTkZFsQyAaHmP/MHKTLn9XhUeQW+y4ub7IKfX8tmxvYPURvxhL4wLPkB2e8EUz5dFBkHhc79c1tHEEjJeQ5heYN1rmNhC021h3jEa0uBtuwPaCTU3mcfrUvFmvJ2FTNsuy5mhlkZIbM12QtQEWI7XZLr8sOx66Nr65pBWWhoNZ28AG7eVuC3o05sc2ZHr6Rk6eVkCuYDAxd5dfLdJMC1bCD/owwagYFUSiGc0MOdtTb0ddQvHy1O3dnPmr+7xxpR5tlRIPCs0y2BHXW32NRAopDhjJVAEFzLWLLuUbeAnuGy8y7UGJxFGNTz50SXohdzZJ9l0jHquc9SJwPStnWvKZ+ta/3SWhL1UNvNw5x87Ob88BGcalc83sDez/Gn9mZj1+sAovqlm6aQiEYly3+GHd3zci0Gvz2ZHn9GShN5TEkxKkFruf2YRgxVlq/KV6+9X666xxyyEQM4HKTGjN9yiC9jachzCxuzc+Wlz3HzrnG4Vt6/ZOioKqZH06xkZ44paruUfCZFVHSoToOFVgcQ0e46wb7vCqPoQO93gClSbq1gU/O9FTj2xugTXWf4bo8yJthMoywVVxh4iJ+cZbDRculeAnasvgnM1z7QIZDWzXB1Vu8HmMVBoYrw4dGVnoOylf8nzWKO1mZZyxVvYdDRl5cWeLbUJxrMfiWitzdvdIVVCK3VeeodXSeMxbqPO/kezY9C8boKKZRKFIOi2Y+FSnrtBfE6RRwTUlEQBy1fQuS4Sv+fpZgvbhwOpM5Nlbn63k1qTtqmhoVpCLIPeR4vFgI3H3PblHSlGqehJF3crQGvCHH7aX4nQZQ5/J4L5MP8TJ2UU3sMmjz1VdS+iiYqvc9doHkewqBQeww2hGUGGVzm5xY2Ht0Y7V+e5Owq+IUWYck/qG/JfJTPooVptF0h/NVyfzHU3qYt9ww93pXKfbNyntINmzS4gP6+J2C5DwDRC34s6tNZ1aYqFGTFx0yTCK2BLRyQTGcrtebFAXbnuUyJJ9Hjqrqfw3roaNpMlLexZnN2ZiLyOHc8fvzCuPJYX5bEI9EH916DBizr9PUeOWyVZksgsDt+i+WLvURa1lPGkQKwZwV3OS8/B0E3d2qJ6CzZsT0W35zL9aPq/tfdFk4RyTf+PJeahBd/JshqVXPwM0OPJuZPs8lbzpiy9Nhd0pa7cXazh5xdKKHDN+Y93FpjLYgqeMDuMcaoGFrJg8AxcAXp9do+yotiqXOq9S0XaQ1VjI4PoRxLJkYmRE+Q1bNDTEi8FzMHQsMq7nnp9nYAxOJxP+s9WuI62Gapw/SHYsxunOKWqZlTCj5JCc8KZLW52L0c3+6p0jGC5xzu05Wr60UN6ZFjR/PKBSXUzbZuamZdV4YMkE8dZubU/HbINDqFleiFPwzVV+BTAUiJpPbqCFhobqNkwusAOvN6pzbFO0BNuGRcwcF7lnOsUmKQQG2DqfM4f6acl8z5NPJe6rOQdfmG61/U5a+LiV0mlX2xoNVOJ1PdGaVqDpytj/lgr6qaUrzhY6KC8QgB8Y+r1+BtimUfeAkBitoos9AYYpMEMq6HIuvOT/SiBCBcEauFvQsNgLhH7mSXvBI7furAKTrmtJpNOaOA03znB1uryHPtA/8STEyatJs7yl83qlOS62PqQpKLTk4UFY06zqIs3UxFlU/QqdgGeEKMfImca4sfxj2jinc0vXNY1lWvd6L3gtqwwWvog3hKna6Q45rifeLhkFdV5FifpcpRxUvvy5SZUnjnegJZemtpW39yIGxR6wnYHqiP5gi3UQdyBCzGaUMMo3lATM3mYfH4U4Qym6/PlMKiwb2VvAwqiTEA5qf1BFHU7ATj9kVvmYV8yF0OEc/xW+1dW2IQ1Frucglg+oRH2W9BFzzNOHKhAZ7QyvX247WutuYufnMVEA2MHs88IUr9TOFNCTyMS6OUx4cydQoz2EXdXtTwJa4EB96JJWDqPMClfZXqfJquDAvHIy0i1XpAB2EoBUNGyzhaXIZqC02YchcsiUKHEP4hQqNuZwGscMIEPWN1U6hk4oxH3Bw04CfB2ZOAFv1aWgHtfBsWLUTdy3VUgFhaE4/ZYGiy/Evp1G6zYs2I0WzCNTmHy9dNgbpCE/iXwSRcKNSzZdFAYN1E1TNCk15sXsD43r4/OzedmB7Nj2qfcffDTPfDetSNICy72cKX88TB9VPXcDFN8ZB6LlOhbLU7H4yWTGI+Q7w+uaoeGgTKwlcQMFKjBpBzRwtijAM5U7FftI4Z169cfNrLVHVWVDKN2kwXb3HsYVTOxsXtfhA9zsMrqbsQxhItFuIGAQ4Mxq5WLwbLnz3bH7V7aNQiifxTn6ywg71eC7OAMzbnvK43ki53K4r5r+bjekCITldvHBH5Nxo/Ry4yTgzWzeucXo8ip5cybMHfW2mXk7jIw+ySt5R1xDtEqNxV6762Z6RaJ9IalVVNOxpK1PktGSb2Xoj3/+GqpuU/nkhkFi9wB/3/v3DDJ/Tsdp50ds5RzHMsesbgG9dmsyedXGSouvZxXf60rUw/KTMpzDX1BjjMr/xuReszmkBdGGuLQqU3oRX/et4Us8Wm8K35aPzxMFUulz9lE1Ai7PGNUw1ShUobhXFaACbgDh2nFVYogapdGkaK/jGnnd8112S+XlVKjIbuOTleh7IUnhTR/yGnF64xCh6PucvJp1zqF5X+Xtr+ysN1FOFIF8JWeSqmDAj2WWbaT5oYOEFxw+5yzxmNeMDsHRSkAJwNM692q0CQSuvosO40l9tIM4az03yFDuJ/4p39mvbDumgajYEVwUAN1UYlNyiFeZqA6c8mvp+mJDpvk1BcseKsVd8lOnQqCfeOhrYBXHTkKOpTRis+yfTLdDxGu0H8kDMC/vkfRDBe62wkCrf227V+Hf+jbaPedN8nze2cWcDSqt1+moUNSwylzYW9d3aG0fJ6MGRRjfFaG3OWyWMXn25eQ60vGnGuUzbaM4TNalwuyuHsfIoLZXUdtqoDGoyUCKdYR3lyqlxrkYsdrAI7+4eaY2E7okE1fgsrLoCwAcVyygXnPHr46a0N4j7yDFrQW+i4++mUOPZCso0tqcTopWsVpc5jQg6ssJGTnW2qJ4FcTnytkTpVXuA94Vs9tBfXo/7iS6rvtqKiFhtJDATHUPKu7mifCJB3PqTHsLAGSoAHffJYOUNGkbezYbAfs6AYrZqA40DRbOi9NFGl6WwvKmNP6wKCODCN1ZuYlkl+abICqdgVF/NBWFjXnIvPTEJZSgDSrLGd+7FulMgclu33ldZssmKJ9AuAacwoB4db2WSf0rVfGKyQtefKweKRMuC4JzvIhqjUYI3IYoXY2a8mdm9aHR5a7mRc43D8scr6uZH7MHZwfowxHtfhgpZsl3NCy6j6M9B/m+bgrIQnWzo8QE1oJcYqzoLlIL0dpQkDwpNPzW1RLUrkVNNkhbaL33xKpopk6njkHqfbszI1vGxXrrD/kuV/jqdOm0+CHU0as4BBisq+oqeOcPpWGmkhcYgN30HWyjCHro0KdzfJN6FXMNXoUN/aBSlbUyL+GaUTQvzJiu9Ieab6fCrZ/Ir0d91kltwjzc9ckpnF4S3ahJVeWdbopaQa9xDfCEw2VUa0OjZUUN+cRFXb1YOdGjDh/gkN0ifq+q9CB870xzYoIgALOkGG2yIBDdzB8ZK9DEufKPnKtuogJEd6BxmWWKLKtE7aY5YzRyGuIbKpMijIplTDPvkVy0BJyMDg84kiF2WFMIUaT6oG+Krdun6QJe9JcM4EeJBNfuhrxkL7aQk/w8n2J7dnd8ylwAAAABJRU5ErkJggg=="); --pad:clamp(1.25rem,5vw,2rem); --leitura:38rem; --media:52rem; --ampla:74rem; /* --- BLOCO 2 · ESCALA TIPOGRÁFICA --- A v29 declarava dois níveis de h2 (evento e leitura, 1,76:1) para 19 títulos que governam de 36 a 620 palavras — amplitude de 17:1. E a atribuição estava invertida no topo: as três seções mais pesadas da página (Recuperação 620, Percurso 581, FAQ 494, juntas 45% do texto) usavam o MENOR nível disponível. A causa não era falta de tamanhos, era um eixo só carregando dois trabalhos. --t-evento marca POSTO RETÓRICO ("isto é um momento") e é atribuído por papel, não por volume: Resultados e Fecho são eventos com 229 e 53 palavras. Faltava o instrumento de EXTENSÃO ("isto é um capítulo longo"). --t-capitulo é esse instrumento. A escala é calibrada em TAMANHO APARENTE, não nominal, porque as três famílias têm x-heights muito diferentes: Archivo 0,526em corpo Jost 0,460em marca e títulos Newsreader 0,426em a voz do médico Métrica aparente = 0,8·x-height + 0,2·cap-height. Foi ela que revelou os dois defeitos que a crítica não tinha visto: · o h3, declarado 13% maior que o corpo, chegava ao olho 1,03x — mesmo peso, mesma altura de x. Não era um nível, era texto. Corrigido em tamanho E em peso (400 → 500). · a voz do médico, declarada 4% MAIOR que o corpo (1,14 vs 1,09rem), chegava 11% MENOR. As frases mais importantes da página eram as opticamente menores do fluxo. Corrigido para 1,36rem. Passos aparentes de ~1,32x (uma quarta justa), medidos, não estimados: herói 5,33 → evento 3,00 → capítulo 2,26 → leitura 1,71 → seção 1,25 → voz 1,10 → corpo 1,00 → rótulo 0,71 Rodar tipo.py depois de qualquer mudança de tamanho. */ --t-heroi:clamp(2.55rem,10.9vw,6.4rem); --t-fecho:clamp(2.35rem,8.4vw,6.2rem); /* par do herói, ver .fecho h2 */ --t-evento:clamp(2.35rem,6vw,3.6rem); --t-capitulo:clamp(1.82rem,4.4vw,2.72rem); --t-leitura:clamp(1.5rem,3.2vw,2.05rem); --t-secao:clamp(1.3rem,2.7vw,1.44rem); --t-voz:clamp(1.28rem,2.4vw,1.36rem); --t-veredicto:clamp(1.5rem,3vw,1.72rem); --t-rotulo:.78rem; /* --- três densidades de ar vertical --- Com o fundo praticamente uniforme, o ar é o instrumento de ritmo. */ --cena:clamp(3.4rem,7.5vw,5.6rem); --cena-densa:clamp(2.2rem,4.6vw,3.2rem); --cena-ampla:clamp(5rem,11vw,8.6rem); --barra:64px; } @media(min-width:1200px){:root{--cena:6.6rem;--cena-ampla:9.2rem}} @media(min-width:1000px){:root{--barra:78px}} *{box-sizing:border-box} html{interpolate-size:allow-keywords} /* habilita transição de altura auto nos accordions */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--barra) + 12px)} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--branco);color:var(--tinta); font-family:var(--sans);font-weight:400; font-size:1.0625rem;line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden; } @media(min-width:800px){body{font-size:1.09375rem}} img{max-width:100%;display:block;height:auto} svg{max-width:100%;display:block} figure{margin:0} a{color:inherit} p{margin:0 0 .9em} p:last-child{margin-bottom:0} /* Os títulos são da marca, não da serifa. A serifa passa a significar uma coisa só: o médico falando em primeira pessoa. */ h1,h2,h3{font-family:var(--marca);font-weight:300;line-height:1.12; letter-spacing:-.012em;margin:0 0 .5em} h2{font-size:var(--t-leitura);line-height:1.14} /* O peso sobe junto com o tamanho: a 400, Jost e Archivo têm o mesmo assentamento na página, e o título dependia só do tamanho — que a x-height menor da Jost anulava. */ h3{font-size:var(--t-secao);font-weight:500;line-height:1.26;letter-spacing:-.004em} /* nível 1 · evento. Quatro na página inteira, e nenhum a mais. */ .evento h2{font-size:var(--t-evento);font-weight:200;line-height:1.02;letter-spacing:-.024em} .evento .sub{font-size:1.14rem;max-width:34rem} /* nível 2 · capítulo. Regra de atribuição: a seção governa mais de 400 palavras. Dá exatamente três — Percurso (581), Recuperação (620) e FAQ (494) — e o próximo candidato tem 267 e já é evento, então não há caso de fronteira para discutir. Capítulo não é só um tamanho maior: é uma ABERTURA. O leitor precisa saber que está entrando num trecho longo antes de entrar. Por isso o rótulo ganha peso, o filete cresce, o subtítulo vira olho de matéria e o bloco todo respira mais embaixo. */ .capitulo>*>h2{font-size:var(--t-capitulo);font-weight:250;line-height:1.06; letter-spacing:-.018em;max-width:20ch} .capitulo>*>.rotulo{color:var(--tinta-2);font-weight:600} .capitulo>*>.rotulo::before{width:2.4rem;background:var(--tinta-2)} .capitulo>*>.sub{font-size:1.14rem;max-width:36rem;margin-bottom:clamp(2.4rem,5vw,3.6rem)} .pular{position:absolute;left:-9999px} .pular:focus{left:.5rem;top:.5rem;z-index:200;background:var(--tinta);color:var(--papel);padding:.6rem .9rem} :focus-visible{outline:2px solid var(--musgo);outline-offset:3px} .escuro :focus-visible{outline-color:var(--musgo-claro)} ::selection{background:var(--musgo);color:var(--papel)} .leitura{max-width:var(--leitura);margin-inline:auto;padding-inline:var(--pad)} .media{max-width:var(--media);margin-inline:auto;padding-inline:var(--pad)} .ampla{max-width:var(--ampla);margin-inline:auto;padding-inline:var(--pad)} .cena{padding-block:var(--cena)} .cena.densa{padding-block:var(--cena-densa)} .cena.evento{padding-block:var(--cena-ampla)} /* Quatro campos na página inteira: escuro em Resultados, sálvia na prancha anatômica, sálvia no respiro, escuro no Fecho. Entre eles, corridas longas de creme. Alternar fundo a cada seção não é ritmo — é xadrez. */ /* --- BLOCO 1 · o campo deixa de ser uma cor e passa a ser uma superfície --- Toda seção recebe cor + grão, e o grão é misturado em soft-light, que é o único modo de mistura que preserva a média: o campo não escurece nem dessatura, só ganha material. É por isso que o creme continua sendo exatamente #F1ECE0 medido, e não um creme sujo de cinza. */ main>section,.rodape{ background-color:var(--campo,var(--branco)); background-repeat:repeat; } @supports (background-blend-mode:soft-light){ main>section,.rodape{ background-image:var(--grao,var(--grao-claro)); background-size:220px 220px,760px 760px; background-blend-mode:soft-light,soft-light; } } .f-creme{--campo:var(--papel)} .f-linho{--campo:var(--linho)} .f-salvia{--campo:var(--salvia)} .escuro{--campo:var(--campo-escuro);color:var(--papel)} .escuro{--grao:var(--grao-escuro)} @media print{main>section,.rodape{background-image:none}} .escuro h2,.escuro h3{color:var(--papel)} /* Aparecia quinze vezes idêntico e virou moldura. Continua onde está, mas deixa de disputar com o título: menor, mais leve, mais espaçado. */ .rotulo{font-family:var(--sans);font-size:var(--t-rotulo);font-weight:500;letter-spacing:.09em; text-transform:lowercase;color:var(--tinta-3); display:flex;align-items:center;gap:.6rem;margin:0 0 .8rem} .rotulo::before{content:"";width:1.4rem;height:1px;background:var(--tinta-3);flex:none} .evento .rotulo{color:var(--musgo)} .evento .rotulo::before{background:var(--musgo)} .escuro .rotulo{color:var(--musgo-rotulo)} .escuro .rotulo::before{background:var(--musgo-rotulo)} .sub{color:var(--tinta-2);max-width:38rem;margin:0 0 1.7rem} .escuro .sub{color:var(--papel-escuro)} /* ---------- barra superior ---------- */ .topo{position:sticky;top:0;z-index:100;height:var(--barra);display:flex;align-items:center; background:transparent;border-bottom:1px solid transparent; transition:background-color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),backdrop-filter var(--duration-base) var(--ease-standard)} .topo.fixa{background:rgba(253,251,240,.90);backdrop-filter:saturate(130%) blur(14px); border-bottom-color:var(--fio-marca);box-shadow:var(--alt-1)} .topo-in{max-width:var(--ampla);margin-inline:auto;padding-inline:var(--pad);width:100%; display:flex;align-items:center;gap:1.2rem} .marca{display:flex;align-items:center;gap:.62rem;font-family:var(--marca);font-weight:300; font-size:1.02rem;letter-spacing:.06em;text-decoration:none;white-space:nowrap;line-height:1.1; color:var(--salvia-funda)} .marca .simbolo{flex:none;width:1.55rem;height:1.55rem;color:var(--salvia-campo)} .marca small{display:block;font-family:var(--marca);font-weight:400;font-size:.6rem; letter-spacing:.19em;text-transform:uppercase;color:var(--salvia-campo);margin-top:.16rem} @media(max-width:479px){.marca{font-size:.92rem;gap:.5rem;letter-spacing:.05em} .marca .simbolo{width:1.35rem;height:1.35rem} .marca small{font-size:.54rem;letter-spacing:.15em} .topo .bt{letter-spacing:.02em}} /* telas muito estreitas: o símbolo e o nome bastam para identificar a marca */ @media(max-width:374px){.marca small{display:none}.marca{font-size:.88rem}} .menu{display:none;gap:1.6rem;margin-left:auto;font-family:var(--marca);font-weight:400; font-size:.875rem;letter-spacing:.05em} .menu a{text-decoration:none;color:var(--salvia-funda);opacity:.82;padding:.35rem 0; border-bottom:1px solid transparent;transition:opacity var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)} .menu a:hover{opacity:1} .menu a[aria-current="true"]{opacity:1;border-bottom-color:var(--salvia-marca)} @media(min-width:1040px){.menu{display:flex}} /* botão da barra: sálvia profunda, nunca quase-preto */ .topo .bt{background:var(--salvia-funda);border-color:var(--salvia-funda);color:var(--creme); font-family:var(--marca);font-weight:400;letter-spacing:.05em} .topo .bt:hover{background:var(--salvia-campo);border-color:var(--salvia-campo)} .bt{display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--sans);font-size:1rem;font-weight:500;line-height:1; padding:.9rem 1.35rem;text-decoration:none;border:1px solid var(--tinta); background:var(--tinta);color:var(--papel);cursor:pointer} .bt:hover{background:var(--musgo);border-color:var(--musgo)} .bt.claro{background:transparent;color:var(--tinta)} .bt.claro:hover{background:var(--tinta);color:var(--papel)} .escuro .bt{background:var(--papel);color:var(--tinta);border-color:var(--papel)} .escuro .bt:hover{background:var(--musgo-claro);border-color:var(--musgo-claro);color:var(--tinta)} .escuro .bt.claro{background:transparent;color:var(--papel);border-color:rgba(242,240,234,.5)} .escuro .bt.claro:hover{background:var(--papel);color:var(--tinta)} .topo .bt{margin-left:auto;padding:.62rem 1.05rem;font-size:.9375rem} @media(min-width:1040px){.topo .bt{margin-left:0}} @media(max-width:399px){.topo .bt{padding:.62rem .8rem}} /* ---------- painel de profundidade ---------- */ .fundo{border-top:1px solid var(--fio)} .fundo:last-of-type{border-bottom:1px solid var(--fio)} .fundo>summary{list-style:none;cursor:pointer;display:flex;gap:.75rem;align-items:baseline; padding:.95rem 0;font-family:var(--sans);font-size:1rem;font-weight:500;color:var(--tinta)} .fundo>summary::-webkit-details-marker{display:none} .fundo>summary::before{content:"";flex:none;width:.72rem;height:.72rem;margin-top:.3rem; border-right:2px solid var(--musgo);border-bottom:2px solid var(--musgo); transform:rotate(45deg);transition:transform var(--duration-base) var(--ease-standard)} .fundo[open]>summary::before{transform:rotate(-135deg)} .fundo>summary:hover{color:var(--musgo)} .fundo-c{font-family:var(--serif);font-size:var(--t-voz);line-height:1.66;color:var(--tinta-2); max-width:34rem;padding:.2rem 0 1.6rem 1.5rem;border-left:2px solid var(--musgo);margin-left:.1rem} .fundo-c strong{font-weight:500;color:var(--tinta)} .fundo-c h4{font-family:var(--serif);font-weight:500;font-size:var(--t-voz);color:var(--tinta);margin:1.4rem 0 .3rem} .fundo-c h4:first-child{margin-top:0} .fundo-c ul{margin:.6rem 0;padding-left:1.1rem} .fundo-c li{margin-bottom:.4rem} .escuro .fundo{border-color:rgba(242,240,234,.22)} .escuro .fundo>summary{color:var(--papel)} .escuro .fundo>summary::before{border-color:var(--musgo-claro)} .escuro .fundo-c{color:var(--papel-escuro);border-left-color:var(--musgo-claro)} .escuro .fundo-c strong{color:var(--papel)} /* ---------- nota do médico ---------- */ /* ---------- A VOZ DO MÉDICO ---------- Havia seis componentes de ênfase com seis tamanhos diferentes (1,08 / 1,16 / 1,18 / 1,20 / 1,22 / 1,60 rem) e nenhuma hierarquia entre eles: ninguém sabia qual era a frase importante. Agora são dois níveis. Nível A, aqui: o médico falando, serifa, filete à esquerda, um tamanho só. Nível B: o veredicto, um por seção, o único que cresce. */ .nota,.destaque-frase,.remate{margin:1.9rem 0 0;padding:.1rem 0 .1rem 1.25rem; background:none;border:0;border-left:2px solid var(--musgo);max-width:36rem} /* BLOCO 2: era 1,14rem. Declarada 4% maior que o corpo, chegava ao olho 11% MENOR — a x-height da Newsreader é 0,426em contra 0,526em da Archivo. As frases que mais importam eram as opticamente menores da página. --t-voz é o tamanho que põe a serifa 1,10x acima do corpo de fato, e não no papel. */ .nota p,.destaque-frase,.remate{font-family:var(--serif);font-size:var(--t-voz); line-height:1.5;color:var(--tinta-2);margin:0} /* ---------- placeholders ---------- */ .vaga{background:var(--linho);border:1px dashed var(--fio);display:grid;place-items:center; text-align:center;padding:1rem;font-family:var(--sans);font-size:.82rem;line-height:1.5;color:var(--tinta-3)} .vaga b{display:block;font-weight:600;color:var(--tinta-2);margin-bottom:.2rem} .f-linho .vaga{background:var(--papel)} .escuro .vaga{background:rgba(242,240,234,.07);border-color:rgba(242,240,234,.25);color:rgba(242,240,234,.6)} .escuro .vaga b{color:rgba(242,240,234,.85)} /* ========================================================== SISTEMA DE MOVIMENTO — global ---------------------------------------------------------- Vocabulário único de movimento da página. Uma classe utilitária: .mv .mv marca um GRUPO de revelação. Os filhos DIRETOS do elemento que carrega .mv são as unidades animadas, e o tratamento de cada uma vem do que ela É (título, parágrafo, lista, figura, régua, desenho) — não de um modificador escrito à mão. É assim que o movimento explica hierarquia em vez de decorar. O JS acrescenta data-vis quando o grupo entra na viewport, UMA única vez, e desiste de observar. Sem JS, sem IntersectionObserver ou na impressão, tudo renderiza no estado final. ORÇAMENTO — revisto no BLOCO 6. A v30 tinha movimento em 6 grupos e nenhum nas outras 13 seções. A leitura da crítica foi "página engessada", e a resposta óbvia — pôr .mv em tudo — produz o fade-up genérico que o NORTH STAR proíbe. As duas coisas eram verdadeiras porque o sistema tinha UMA intensidade só: .mv é cheio, e cheio numa seção de leitura é teatral. O que faltava não era mais movimento, era um REGISTRO MAIS BAIXO. Agora são três, e eles não são uma taxonomia nova: são exatamente os três níveis que o Bloco 2 já estabeleceu na tipografia. Uma seção se move como ela se intitula. .mv cena coreografia inteira: rótulo, título, apoio e bloco escalonados, traço desenhado, imagem que assenta. 6 na página, por DOIS motivos e não um: os 4 eventos tipográficos (Resultados, Causas, Remover/reestruturar, Fecho) e mais 2 seções cujo conteúdo é um desenho que precisa ser desenhado (Oftalmologista e Laser). O orçamento antigo dizia 4 e a página já tinha 6 — a diferença eram exatamente esses dois desenhos, e o critério honesto é este, não a simetria. .mv-abre capítulo só a ABERTURA entra — rótulo, título e olho de matéria, em sequência. O corpo não se move: quem vai ler 600 palavras não precisa de mais nada acontecendo. 3 na página. .mv-filete leitura o filete do rótulo se desenha e o título resolve em opacidade. Nada desliza. É a pontuação da página, repetida — não uma animação. 9. O registro de leitura reusa .rotulo::before, que já existia no sistema e já aparece 17 vezes: o gesto não foi inventado para este bloco, foi promovido a registro. ========================================================== */ /* ---------- 1 · o grupo e o escalonamento de ordem ---------- */ .mv{--mv-d:0ms} .mv>*{--mv-d:0ms} .mv>:nth-child(2){--mv-d:var(--stagger)} .mv>:nth-child(3){--mv-d:calc(var(--stagger)*2)} .mv>:nth-child(4){--mv-d:calc(var(--stagger)*3)} .mv>:nth-child(5){--mv-d:calc(var(--stagger)*4)} .mv>:nth-child(n+6){--mv-d:calc(var(--stagger)*5)} /* teto: nada chega atrasado */ .js-anima .mv>*{opacity:0;transform:translateY(var(--mv-travel,var(--travel)))} .mv>*{transition: opacity var(--mv-dur,var(--duration-slow)) var(--mv-ease,var(--ease-standard)) var(--mv-d), transform var(--mv-dur,var(--duration-slow)) var(--mv-ease,var(--ease-standard)) var(--mv-d)} .mv[data-vis]>*{opacity:1;transform:none} /* ---------- 2 · entrada de headings (a âncora) ---------- */ /* Mais amplitude e mais tempo que tudo o que está em volta. A hierarquia é lida antes de o texto ser lido. */ .mv>:is(h1,h2,h3){--mv-travel:var(--travel-lg);--mv-ease:var(--ease-emphasis)} /* o rótulo chega antes do título, mais curto e mais discreto */ .mv>.rotulo{--mv-travel:calc(var(--travel)*.6);--mv-dur:var(--duration-base)} /* ---------- 3 · entrada de parágrafos ---------- */ .mv>:is(p,.sub,.nota,blockquote,.fecha){--mv-travel:var(--travel)} /* ---------- 4 · stagger para listas ---------- */ /* O container não se move; os itens escalonam DENTRO dele, somando o atraso do próprio grupo (--mv-d é herdado). */ .js-anima .mv>:is(ul,ol,dl){opacity:1;transform:none} .js-anima .mv>:is(ul,ol)>li, .js-anima .mv>dl>div, .js-anima .mv>dl>dt{opacity:0;transform:translateY(calc(var(--travel)*.6))} .mv>:is(ul,ol)>li, .mv>dl>div, .mv>dl>dt{transition: opacity var(--duration-base) var(--ease-standard) calc(var(--mv-d) + var(--stagger)*var(--mv-i,0)), transform var(--duration-base) var(--ease-standard) calc(var(--mv-d) + var(--stagger)*var(--mv-i,0))} .mv[data-vis]>:is(ul,ol)>li, .mv[data-vis]>dl>div, .mv[data-vis]>dl>dt{opacity:1;transform:none} .mv :is(li,dl>div,dl>dt){--mv-i:0} .mv :is(li,dl>div,dl>dt):nth-child(2){--mv-i:1} .mv :is(li,dl>div,dl>dt):nth-child(3){--mv-i:2} .mv :is(li,dl>div,dl>dt):nth-child(4){--mv-i:3} .mv :is(li,dl>div,dl>dt):nth-child(5){--mv-i:4} .mv :is(li,dl>div,dl>dt):nth-child(6){--mv-i:5} .mv :is(li,dl>div,dl>dt):nth-child(n+7){--mv-i:6} /* Uma grade de cartões é só um grupo: basta pôr .mv na grade e os filhos diretos escalonam pela regra 1. */ /* ---------- 5 · revelação de linhas ---------- */ /* Régua desenha da esquerda para a direita. Vale para
e para o filete do .rotulo, que já existe em 15 lugares. */ .js-anima .mv>hr{opacity:1;transform:scaleX(0)} .mv>hr{transform-origin:left center; transition:transform var(--duration-slow) var(--ease-standard) var(--mv-d)} .mv[data-vis]>hr{transform:none} .js-anima .mv>.rotulo::before{transform:scaleX(0)} .mv>.rotulo::before{transform-origin:left center; transition:transform var(--duration-slow) var(--ease-standard) calc(var(--mv-d) + 60ms)} .mv[data-vis]>.rotulo::before{transform:none} /* ---------- 6 · entrada de imagens e blocos grandes ---------- */ /* Imagem não desliza: assenta. Escala mínima, duração de evento, sem deslocamento — do mesmo jeito que o retrato do herói. */ .js-anima .mv>:is(figure,picture,img,.vaga,.player,.par,.faixa-foto,.mapa,.quadro){ transform:scale(var(--mv-scale))} .mv>:is(figure,picture,img,.vaga,.player,.par,.faixa-foto,.mapa,.quadro){ --mv-dur:var(--duration-event);--mv-ease:var(--ease-emphasis); transform-origin:center} /* Bloco grande (seção em sangria, painel de largura total): amplitude de âncora e duração de evento. */ .js-anima .mv>:is(section,aside,.escuro,.campo){transform:translateY(var(--travel-lg))} .mv>:is(section,aside,.escuro,.campo){--mv-dur:var(--duration-event);--mv-ease:var(--ease-emphasis)} /* ---------- 6B · BLOCO 6 · os dois registros baixos ---------- Ambos são observados pelo mesmo JS (ver querySelectorAll abaixo) e herdam --travel / --stagger / --duration-*, então o bloco de prefers-reduced-motion global já os cobre sem regra nova. */ /* --- capítulo: entra a abertura, o corpo fica parado --- */ .mv-abre>*>.rotulo{--mv-d:0ms} .mv-abre>*>h2{--mv-d:var(--stagger);--mv-travel:var(--travel-lg);--mv-ease:var(--ease-emphasis)} .mv-abre>*>.sub{--mv-d:calc(var(--stagger)*2)} .js-anima .mv-abre>*>:is(.rotulo,h2,.sub){ opacity:0;transform:translateY(var(--mv-travel,var(--travel)))} .mv-abre>*>:is(.rotulo,h2,.sub){transition: opacity var(--mv-dur,var(--duration-slow)) var(--mv-ease,var(--ease-standard)) var(--mv-d), transform var(--mv-dur,var(--duration-slow)) var(--mv-ease,var(--ease-standard)) var(--mv-d)} .mv-abre[data-vis]>*>:is(.rotulo,h2,.sub){opacity:1;transform:none} .js-anima .mv-abre>*>.rotulo::before{transform:scaleX(0)} .mv-abre>*>.rotulo::before{transform-origin:left center; transition:transform var(--duration-slow) var(--ease-standard) 60ms} .mv-abre[data-vis]>*>.rotulo::before{transform:none} /* --- leitura: o filete desenha, o título resolve, e mais nada --- Sem deslocamento de propósito. Deslocar 13 seções seguidas é o que faz uma página parecer um template; um filete de 1,4rem que se desenha é a mesma gramática das réguas que a página já usa. */ .js-anima .mv-filete>*>.rotulo::before{transform:scaleX(0)} .mv-filete>*>.rotulo::before{transform-origin:left center; transition:transform var(--duration-slow) var(--ease-draw)} .mv-filete[data-vis]>*>.rotulo::before{transform:none} .js-anima .mv-filete>*>h2{opacity:0} .mv-filete>*>h2{transition:opacity var(--duration-slow) var(--ease-standard) 140ms} .mv-filete[data-vis]>*>h2{opacity:1} /* ---------- 7 · desenho anatômico (SVG) ---------- */ /* Contrato com o SVG — ver PEDIDOS-svg.md: · traço sólido (.fio-a, .fio-leve, .destaque) SÓ é desenhado se o path declarar pathLength="1" — o seletor [pathLength] é o próprio contrato: um SVG sem o atributo simplesmente não anima, em vez de virar pontilhado; · traço tracejado (.fantasma, .corte) é revelado por clip-path, porque o dasharray já está em uso pelo próprio tracejado; · .iris e .pupila entram em escala, com transform-box:fill-box; · rótulos ficam em HTML, fora do SVG. A ordem abaixo é a ordem do argumento: estrutura, contorno secundário, volume, olho e, por último, a incisão. */ .mv svg :is(.iris,.pupila,.marca-e){transform-box:fill-box;transform-origin:center} .js-anima .mv svg :is(.fio-a,.fio-leve,.destaque)[pathLength]{stroke-dasharray:1;stroke-dashoffset:1} .js-anima .mv svg :is(.fantasma,.corte){clip-path:inset(0 100% 0 0)} .js-anima .mv svg .massa{opacity:0} .js-anima .mv svg :is(.iris,.pupila,.marca-e){opacity:0;transform:scale(.6)} .mv svg .fio-a[pathLength]{transition:stroke-dashoffset var(--duration-event) var(--ease-draw) var(--mv-d)} .mv svg :is(.fio-leve,.destaque)[pathLength]{transition:stroke-dashoffset var(--duration-event) var(--ease-draw) calc(var(--mv-d) + var(--stagger))} .mv svg .fantasma{transition:clip-path var(--duration-slow) var(--ease-draw) calc(var(--mv-d) + var(--stagger)*2)} .mv svg .massa{transition:opacity var(--duration-slow) var(--ease-standard) calc(var(--mv-d) + var(--stagger)*3)} .mv svg :is(.iris,.pupila,.marca-e){transition: opacity var(--duration-base) var(--ease-standard) calc(var(--mv-d) + var(--stagger)*4), transform var(--duration-slow) var(--ease-emphasis) calc(var(--mv-d) + var(--stagger)*4)} .mv svg .corte{transition:clip-path var(--duration-slow) var(--ease-draw) calc(var(--mv-d) + var(--stagger)*6)} .mv[data-vis] svg :is(.fio-a,.fio-leve,.destaque)[pathLength]{stroke-dashoffset:0} .mv[data-vis] svg :is(.fantasma,.corte){clip-path:inset(0 0 0 0)} .mv[data-vis] svg .massa{opacity:1} .mv[data-vis] svg :is(.iris,.pupila,.marca-e){opacity:1;transform:none} /* ---------- 8 · hover de links ---------- */ /* Sem sublinhado que cresce, sem seta que aparece: o link muda de cor e o filete existente engrossa. Zero layout shift. */ a:not(.bt){transition: color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard), text-decoration-thickness var(--duration-fast) var(--ease-standard)} :where(p,li,dd,.fundo-c,.nota,.rodape) a:not(.bt){text-underline-offset:.2em} :where(p,li,dd,.fundo-c,.nota,.rodape) a:not(.bt):hover{text-decoration-thickness:2px} /* ---------- 9 · hover de botões ---------- */ /* Sem elevação (sombra é proibida), sem escala. Muda a superfície; o :active dá 1px de resposta física. */ .bt{transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard)} .bt:active{transform:translateY(1px)} /* dentro de um grupo de revelação o botão precisa da entrada E do hover */ .mv>.bt{transition: opacity var(--mv-dur,var(--duration-slow)) var(--mv-ease,var(--ease-standard)) var(--mv-d), transform var(--mv-dur,var(--duration-slow)) var(--mv-ease,var(--ease-standard)) var(--mv-d), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard)} /* ---------- 10 · abertura de accordions ---------- */ /* Altura real, sem JS e sem max-height inventado. Abre com a curva padrão, fecha mais rápido com a curva de saída. */ details::details-content{ block-size:0;overflow:hidden;opacity:0; transition: block-size var(--duration-base) var(--ease-exit), content-visibility var(--duration-base) var(--ease-exit) allow-discrete, opacity var(--duration-fast) var(--ease-exit)} details[open]::details-content{ block-size:auto;opacity:1; transition: block-size var(--duration-base) var(--ease-standard), content-visibility var(--duration-base) var(--ease-standard) allow-discrete, opacity var(--duration-base) var(--ease-standard) 60ms} /* ---------- 12 · transições entre estados ---------- */ /* Regra: mudança de estado usa --duration-fast e a curva padrão. Nada que sinalize foco é animado — nenhuma lista de transição desta folha inclui outline ou outline-color. */ [aria-current],[aria-expanded],[aria-selected]{transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard)} /* ---------- 13 · reduced motion ---------- Estratégia em três faixas, não um interruptor: A · deslocamento, escala, traço e escalonamento → zerados. O estado final aparece imediatamente. B · opacidade e cor → preservadas, limitadas a 120ms. Um corte seco é mais desorientador que um dissolve curto, e opacidade não dispara resposta vestibular. C · foco, contraste e alvo → intocados; nunca dependeram de movimento para funcionar. Tudo é feito pelos tokens, para que não exista uma segunda verdade sobre o que a página faz. */ @media (prefers-reduced-motion:reduce){ :root{ --duration-fast:120ms;--duration-base:120ms; --duration-slow:120ms;--duration-event:120ms; --stagger:0ms;--travel:0px;--travel-lg:0px;--mv-scale:1; --ease-standard:linear;--ease-emphasis:linear; --ease-exit:linear;--ease-draw:linear; } .js-anima .mv svg :is(.fio-a,.fio-leve,.destaque)[pathLength]{stroke-dasharray:1;stroke-dashoffset:0} .js-anima .mv svg :is(.fantasma,.corte){clip-path:none} .js-anima .mv>hr{transform:none} .js-anima .mv>.rotulo::before{transform:none} .js-anima :is(.mv-abre,.mv-filete)>*>.rotulo::before{transform:none} .bt:active{transform:none} /* altura é deslocamento: o accordion abre seco, mas o conteúdo ainda dissolve, porque um corte seco desorienta mais. */ details::details-content, details[open]::details-content{transition:opacity 120ms linear} } /* ---------- 14 · redes de segurança ---------- */ @media print{ .js-anima .mv>*,.js-anima .mv :is(li,dl>div,dl>dt), .js-anima .mv svg *{opacity:1!important;transform:none!important; clip-path:none!important;stroke-dashoffset:0!important} } /* ========================================================== LINGUAGEM ANATÔMICA — a prancha ---------------------------------------------------------- Namespace .atlas. A gramática antiga (.tracado sozinho) continua valendo para qualquer desenho que ainda não tenha sido refeito, então nada quebra no meio da migração. A diferença estrutural: aqui o traço afilado é um POLÍGONO PREENCHIDO, não um stroke de espessura fixa. É a única forma de ter um traço grosso no centro e fino nos cantos, que é o que o símbolo da marca faz. Consequência: não dá para desenhá-lo por stroke-dashoffset. O desenho é revelado por varredura, e a tinta parece correr pelo traço. ========================================================== */ .tracado.atlas{width:100%;height:auto;overflow:visible} .tracado.atlas :is(.fio-a,.pupila,.osso){fill:var(--salvia-funda);stroke:none} .tracado.atlas .foco{fill:var(--salvia-campo);stroke:none} .tracado.atlas .musculo{fill:rgba(85,96,74,.22);stroke:none} .tracado.atlas .massa{fill:rgba(85,96,74,.20);stroke:none} .tracado.atlas .pele{fill:rgba(59,70,51,.055);stroke:none} .tracado.atlas .orgao-f{fill:rgba(126,92,63,.45);stroke:none} .tracado.atlas .fio-leve{fill:none;stroke:rgba(59,70,51,.42);stroke-width:1.3;stroke-linecap:round} .tracado.atlas .fantasma{fill:none;stroke:rgba(59,70,51,.45);stroke-width:1.2; stroke-dasharray:4 5;stroke-linecap:round} .tracado.atlas .destaque{fill:none;stroke:var(--salvia-campo);stroke-width:3.2;stroke-linecap:round} .tracado.atlas .iris{fill:none;stroke:var(--salvia-funda);stroke-width:2.2} .tracado.atlas .carn{fill:none;stroke:var(--salvia-funda);stroke-width:1.2} .tracado.atlas .orgao{fill:none;stroke:var(--taupe-tinta);stroke-width:1.8} /* estriação: é o que dá matéria ao traço e o que impede a figura de virar ícone. Cílios, pelo do supercílio, fibras da íris. */ .tracado.atlas .estria{fill:none;stroke:var(--salvia-funda);stroke-width:.85;stroke-linecap:round} .tracado.atlas .estria-d{fill:none;stroke:var(--salvia-campo);stroke-width:.9;stroke-linecap:round} .tracado.atlas .estria-m{fill:none;stroke:rgba(85,96,74,.55);stroke-width:.8;stroke-linecap:round} .tracado.atlas .fibra{fill:none;stroke:var(--salvia-funda);stroke-width:.5;opacity:.40} /* marcações técnicas: colchete de medida, seta de deslocamento, eixo, linha de chamada e ponto de âncora. Sempre em taupe, nunca em sálvia, para nunca serem confundidas com anatomia. */ .tracado.atlas .marca{fill:none;stroke:var(--taupe-tinta);stroke-width:1.1} .tracado.atlas .seta{fill:none;stroke:var(--taupe-tinta);stroke-width:1.4; stroke-linecap:round;stroke-linejoin:round} .tracado.atlas .eixo{fill:none;stroke:var(--taupe-tinta);stroke-width:1;stroke-dasharray:2 3} .tracado.atlas .chamada{fill:none;stroke:var(--taupe-tinta);stroke-width:.7;opacity:.7} .tracado.atlas .ponto{fill:var(--taupe-tinta);stroke:none} /* o único traço interrompido grosso da página, e ele significa uma coisa só */ .tracado.atlas .corte{fill:none;stroke:var(--taupe-tinta);stroke-width:3; stroke-dasharray:7 6;stroke-linecap:round} /* ---------- escala de atlas ---------- A regra 10 da linguagem visual: anatomia aparece na escala em que a estriação é visível. Onze rem é escala de ícone; isto é uma prancha. */ .causas .causa .atlas{margin:0 0 1.4rem;max-width:none} @media(min-width:640px){.causas .causa .atlas{margin-bottom:1.7rem}} /* ========================================================== COREOGRAFIA DA PRANCHA ---------------------------------------------------------- A ordem é o argumento: primeiro a estrutura, depois a matéria, depois o olho, depois o tecido, depois o título, depois o texto e só então a marcação técnica — o detalhe que fecha a leitura. Quem chega vê um especialista desenhando, não um enfeite entrando. ========================================================== */ .atlas{--dz:90ms;--tz:780ms;--xz:1220ms} /* dentro do .atlas o desenho é por varredura; o stroke-dashoffset do sistema global é desligado, porque fita preenchida não se desenha */ .js-anima .mv .atlas :is(.fio-a,.fio-leve)[pathLength]{stroke-dasharray:none;stroke-dashoffset:0} .js-anima .mv .atlas :is(.fio-leve,.osso,.carn,.fio-a,.foco,.pele,.massa,.musculo, .orgao,.orgao-f,.estria,.estria-d,.estria-m,.fantasma,.corte, .marca,.chamada,.seta,.eixo){clip-path:inset(0 100% 0 0)} .js-anima .mv .atlas :is(.fibra,.ponto){opacity:0} .js-anima .mv .atlas :is(.iris,.pupila){opacity:0;transform:scale(.62)} .mv .atlas :is(.fio-leve,.osso,.carn,.fio-a,.foco,.pele,.massa,.musculo, .orgao,.orgao-f,.estria,.estria-d,.estria-m,.fantasma,.corte, .marca,.chamada,.seta,.eixo){ transition:clip-path var(--duration-event) var(--ease-draw) var(--mv-a,0ms)} .mv .atlas :is(.fibra,.ponto){transition:opacity var(--duration-slow) var(--ease-standard) var(--mv-a,0ms)} .mv .atlas :is(.iris,.pupila){transform-box:fill-box;transform-origin:center; transition:opacity var(--duration-base) var(--ease-standard) var(--mv-a,0ms), transform var(--duration-slow) var(--ease-emphasis) var(--mv-a,0ms)} /* 1 · planos de referência 2 · estrutura 3 · tecido 4 · matéria (estriação) 5 · o olho 6 · a referência ausente 7 · o detalhe destacado e a marcação técnica, depois do texto */ .mv .atlas :is(.fio-leve,.osso,.carn){--mv-a:calc(var(--mv-d) + var(--dz)*0)} .mv .atlas :is(.fio-a,.foco){--mv-a:calc(var(--mv-d) + var(--dz)*1)} .mv .atlas :is(.pele,.massa,.musculo,.orgao,.orgao-f){--mv-a:calc(var(--mv-d) + var(--dz)*3)} .mv .atlas :is(.estria,.estria-d,.estria-m){--mv-a:calc(var(--mv-d) + var(--dz)*4)} .mv .atlas :is(.fibra,.iris,.pupila){--mv-a:calc(var(--mv-d) + var(--dz)*5)} .mv .atlas .fantasma{--mv-a:calc(var(--mv-d) + var(--dz)*6)} .mv .atlas .corte{--mv-a:calc(var(--mv-d) + var(--xz))} .mv .atlas :is(.marca,.chamada,.seta,.eixo,.ponto){--mv-a:calc(var(--mv-d) + var(--xz))} /* o destaque é o único traço que ainda se DESENHA, e é o último a entrar: é a assinatura do argumento */ .js-anima .mv .atlas .destaque[pathLength]{stroke-dasharray:1;stroke-dashoffset:1} .mv .atlas .destaque[pathLength]{ transition:stroke-dashoffset var(--duration-event) var(--ease-draw) calc(var(--mv-d) + var(--xz))} .mv[data-vis] .atlas :is(.fio-leve,.osso,.carn,.fio-a,.foco,.pele,.massa,.musculo, .orgao,.orgao-f,.estria,.estria-d,.estria-m,.fantasma,.corte, .marca,.chamada,.seta,.eixo){clip-path:inset(0 0 0 0)} .mv[data-vis] .atlas :is(.fibra,.ponto,.iris,.pupila){opacity:1} .mv[data-vis] .atlas :is(.iris,.pupila){transform:none} .mv[data-vis] .atlas .destaque[pathLength]{stroke-dashoffset:0} /* ---------- 07 · a palavra entra depois do desenho ---------- */ .causas.mv>.causa{opacity:1;transform:none} .js-anima .causas.mv>.causa>:not(svg){opacity:0;transform:translateY(var(--travel))} .causas.mv>.causa>:not(svg){ transition:opacity var(--duration-slow) var(--ease-standard) var(--mv-t,0ms), transform var(--duration-slow) var(--ease-standard) var(--mv-t,0ms)} .causas.mv>.causa>.onde{--mv-t:calc(var(--mv-d) + var(--tz))} .causas.mv>.causa>h3{--mv-t:calc(var(--mv-d) + var(--tz) + 90ms)} .causas.mv>.causa>.termo{--mv-t:calc(var(--mv-d) + var(--tz) + 170ms)} .causas.mv>.causa>details{--mv-t:calc(var(--mv-d) + var(--tz) + 250ms)} .causas.mv[data-vis]>.causa>:not(svg){opacity:1;transform:none} .causas.mv>.causa{--dz:90ms;--tz:780ms;--xz:1220ms} /* ---------- 07B · gatilho por cartão (só no celular) ---------- No celular os três cartões ficam empilhados, e o grupo inteiro entrava com um único data-vis: as três pranchas começavam a varredura dentro de 140 ms, sendo que a segunda e a terceira ainda estavam fora da tela. Aqui o data-vis passa a ser do PRÓPRIO cartão. O JS marca o