/* ========================================================================== IMPERIUM CLINIC FOR MEN — main.css ========================================================================== */ :root { --black: #090A0C; --night: #101B2B; --petrol: #182B3D; --night-2: #0c1420; --off: #F2EEE6; --off-2: #E8E2D6; --white: #FFFFFF; --ink: #14161A; --ink-soft: #4A4F58; --text: rgba(242, 238, 230, .9); --muted: rgba(242, 238, 230, .62); --faint: rgba(242, 238, 230, .14); --line: rgba(242, 238, 230, .1); --line-dark: rgba(20, 22, 26, .12); --gold: #D3A64F; --gold-hi: #F5DE9B; --gold-lo: #8F6526; --gold-metallic: linear-gradient(115deg, #78521E 0%, #B78A3C 18%, #F5DE9B 38%, #D3A64F 55%, #FFF0BC 70%, #A7772F 88%, #6F491B 100%); --gold-metallic-wide: linear-gradient(115deg, #78521E 0%, #B78A3C 9%, #F5DE9B 19%, #D3A64F 27%, #FFF0BC 35%, #A7772F 44%, #6F491B 50%, #B78A3C 59%, #F5DE9B 69%, #D3A64F 77%, #FFF0BC 85%, #A7772F 94%, #78521E 100%); --gold-deep: linear-gradient(115deg, #5E3F14 0%, #8F6526 25%, #B98B3D 45%, #7A5520 70%, #5A3C12 100%); /* tipografia sans-serif: Archivo (variável em peso e largura, SIL OFL) */ --f-display: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif; --f-body: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif; --pad: clamp(20px, 5vw, 80px); --maxw: 1320px; --radius: 14px; --radius-sm: 10px; --header-h: 84px; --ease: cubic-bezier(.2, .7, .1, 1); --ease-io: cubic-bezier(.7, 0, .2, 1); --seam-h: clamp(104px, 12vw, 180px); /* emblema vetorizado (Assets/brand/web/emblema.svg) embutido: funciona também via file:// */ --emblem-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1772 1612'%3E%3Cpath d='M 1193 59.8 C 1193 60.7, 1194.1 64.2, 1195.5 67.5 C 1197.5 72.4, 1198 75.2, 1198 83.2 C 1198 94.3, 1196.9 97.6, 1192.9 98.5 C 1188.9 99.4, 1185.4 103.4, 1183 109.9 C 1175.2 131, 1152.1 154.5, 1122 172 C 1103.8 182.5, 1101.4 183.8, 1099 184.5 C 1097.6 184.9, 1094 186.5, 1091 188 C 1070.2 198.4, 1020.9 213.4, 972 224 C 966.2 225.2, 959 226.9, 956 227.6 C 949.4 229.2, 898.4 239.2, 888.5 240.9 C 884.7 241.6, 876.6 243, 870.5 244 C 860 245.8, 853.2 246.9, 839 249.1 C 835.4 249.6, 830 250.5, 826.9 251 C 823.9 251.6, 819.8 252, 817.9 252 C 816 252, 811.3 252.7, 807.5 253.5 C 803.7 254.4, 797.2 255.4, 793.1 255.9 C 781 257.4, 780.4 260.6, 792.3 260.4 C 796.3 260.3, 801.6 260.3, 804.3 260.3 C 845.7 260.5, 880 259.5, 915 257 C 934.7 255.7, 963.2 252.7, 972.8 251.1 C 986.2 248.8, 991.8 247.9, 998 247 C 1017.2 244.3, 1024.7 242.6, 1036.7 237.9 C 1041 236.3, 1047.4 233.8, 1051 232.4 C 1066.6 226.5, 1111.6 204.8, 1124 197.2 C 1165.4 172.1, 1194.1 142.2, 1201.1 116.7 C 1203.2 109.3, 1205.3 105, 1207 105 C 1211.4 105, 1213 120.9, 1213.3 167 C 1213.5 190.6, 1213.7 189.8, 1201.8 209.6 C 1177.8 249.6, 1146.4 273, 1093.5 290.3 C 1075.2 296.3, 1066.7 298.2, 1038.9 303 C 1035.9 303.6, 1025.8 304, 1016.5 304 C 981.7 304, 978 310.8, 1011.5 313.2 C 1037.7 315.1, 1058.3 314.5, 1079 311.1 C 1102.3 307.3, 1142.1 294.1, 1155.9 285.7 C 1174.8 274.1, 1178.6 274.8, 1166 287.6 C 1151 302.8, 1129.6 316, 1101.6 327.4 C 1093.4 330.8, 1086.5 334, 1086.3 334.7 C 1084.7 339.4, 1116.7 333.9, 1136.7 325.9 C 1188.9 305.1, 1229 259.5, 1243.1 205 C 1245.1 197, 1247.9 177.9, 1248.9 164.5 C 1249.4 159, 1250.4 152.7, 1251.2 150.6 C 1253.6 144.4, 1250.2 133.3, 1238.4 109.8 C 1226.6 86.2, 1223.7 82, 1211.7 70.3 C 1200.9 59.7, 1193 55.2, 1193 59.8 M 1091.2 114.3 C 1078.3 126.1, 1073.9 129.6, 1066.3 134.2 C 1062.6 136.4, 1057.7 139.5, 1055.5 141 C 1047.8 146.2, 1017.4 160.8, 998.5 168.3 C 958.8 183.9, 922.7 193.9, 865.5 205 C 851.2 207.8, 837.2 210.5, 834.3 211.1 C 831.4 211.7, 828.1 212.9, 826.9 213.8 C 823.5 216.6, 835.8 219.5, 847.2 218.6 C 851.8 218.2, 863.8 217.5, 874 217 C 891.1 216.1, 900.3 215.5, 932.5 213.2 C 948.3 212, 965.3 208.5, 992 200.8 C 1004.4 197.3, 1008.1 195.2, 1011.9 189.7 C 1016.5 183.1, 1021.3 179.6, 1038.5 170.6 C 1044.7 167.4, 1050.6 163.2, 1067.5 150.1 C 1079.5 140.8, 1100.2 116.1, 1102.5 108.3 C 1103.7 104.1, 1100.4 105.8, 1091.2 114.3 M 1284.7 126.2 C 1284.3 127.6, 1286.7 136.4, 1291 149.5 L 1298 170.6 1298 191.1 C 1298 217.6, 1295.2 230.7, 1285.5 250 C 1269 282.8, 1241.9 307.7, 1201 328 C 1181.8 337.5, 1182.8 339.5, 1204.1 334.2 C 1237.8 325.7, 1270.6 304.2, 1292 276.6 C 1299.7 266.6, 1302.2 264, 1303.7 264 C 1306 264, 1304.8 271.1, 1300.5 282 C 1296 293.5, 1295.2 297, 1297.2 297 C 1299.5 297, 1301.6 295, 1307.4 287 C 1319.1 271.2, 1324.1 257.6, 1330.1 225.3 C 1330.9 221, 1331.8 218.9, 1333 218.5 C 1333.9 218.2, 1335.6 217.1, 1336.8 216 C 1341.2 211.8, 1338.6 195.4, 1331.3 181.9 C 1315.4 152.4, 1313.4 149.6, 1297.7 134.3 C 1286.7 123.4, 1285.6 122.7, 1284.7 126.2 M 815.5 127.2 C 812.8 127.7, 807.4 128.6, 803.5 129.2 C 769.8 134.3, 741.4 141.5, 693.5 157.1 C 683.6 160.3, 673.5 163.2, 671 163.5 C 652.8 166, 633.3 175, 604.5 194.3 C 588.5 205.1, 586.8 206.7, 583.3 213.9 C 580.1 220.4, 575.6 226.5, 565 238.5 C 562 241.9, 557.5 247.2, 555.1 250.3 C 552.7 253.5, 550.3 256, 549.9 256 C 549.4 256, 549 251.3, 549 245.6 L 549 235.1 553.8 230.7 C 556.4 228.2, 561.3 224.1, 564.8 221.5 C 568.2 218.9, 571 216.5, 571 216 C 571 214.5, 563.2 213.8, 557.8 214.9 C 554.9 215.5, 549.6 216.4, 546 217 C 529.6 219.9, 469.8 234.9, 434.1 245.1 C 321.1 277.5, 195.4 327.1, 91.5 380.3 L 75.5 388.5 75.8 407.5 C 76.2 443, 80 483.1, 88.1 537.5 C 89.7 548.5, 93.1 567.3, 96.6 585 C 172.9 965.6, 446.1 1318.3, 855 1564.2 C 876.9 1577.4, 887 1583, 888.9 1583 C 890.4 1583, 927.6 1561.1, 954.5 1544.4 C 1197.5 1393.2, 1399.5 1192.7, 1528.6 974.5 C 1610.5 836, 1668 679.3, 1688.9 537.5 C 1693.5 506.6, 1696.1 485.6, 1698 464 C 1700.4 435.5, 1701 425.3, 1701.2 407.5 L 1701.5 388.5 1672.5 374 C 1575.8 325.6, 1469.7 283.2, 1368.6 252.5 C 1341.9 244.4, 1344 243.4, 1344 264 C 1344 280.7, 1343.6 282.2, 1336.8 293.3 C 1319.4 321.7, 1291 344.1, 1254.4 358.3 C 1238.2 364.6, 1235.4 365.2, 1218.5 366 C 1188.7 367.4, 1180.2 370.2, 1187.7 376.3 C 1198.6 385.3, 1210.6 398.4, 1217.4 409.1 C 1221.6 415.7, 1227.5 437.4, 1231 459 C 1234.5 480.8, 1237.8 493.6, 1241.6 501.2 C 1244.7 507.4, 1254.3 522.2, 1268.8 543.3 C 1278.1 557, 1278.1 557.9, 1269.4 565.6 C 1246.5 586.1, 1243.5 590.1, 1240.5 604.8 C 1238.1 616.2, 1239.3 620.7, 1251.2 644.4 C 1266.6 675.2, 1277.3 691.5, 1303.3 723.8 C 1305.3 726.4, 1308.8 730.8, 1311 733.7 C 1313.2 736.5, 1315.4 739.1, 1316 739.5 C 1316.6 739.9, 1318.2 742.4, 1319.6 745.2 C 1322.2 750.3, 1322.2 750.3, 1320.4 754.4 C 1315.8 764.6, 1299 777.3, 1269 793 C 1254 800.9, 1253.8 801.4, 1260.8 822.8 C 1266 838.8, 1267 844.6, 1264.8 846.8 C 1264 847.6, 1260.3 848, 1254.6 848 C 1242.8 848, 1240.1 846.5, 1237 838.3 C 1233.3 828.3, 1231.1 827.7, 1223.2 834.4 C 1214.9 841.5, 1193.2 848, 1177.5 848 C 1171.4 848, 1165.6 849, 1152.5 852.4 C 1122.8 860, 1099.1 873.9, 1090.4 888.6 C 1086.2 895.8, 1077.9 922.5, 1078.8 926.3 C 1079.6 929.9, 1084.3 927.3, 1089.1 920.6 C 1099 907.1, 1140 883.6, 1190.5 862.8 C 1216.1 852.2, 1221.4 851.2, 1229.8 855.4 C 1236.7 858.8, 1250.1 861.3, 1254.8 860 C 1259.8 858.6, 1269.3 858.7, 1270.8 860.2 C 1276 865.4, 1262 887.4, 1249.6 893.7 C 1244.2 896.5, 1240.6 896.5, 1226.5 893.9 C 1214.7 891.7, 1204 892.1, 1177 896 C 1172.9 896.6, 1165.9 897.5, 1161.4 897.9 C 1153.9 898.7, 1147 901.1, 1147 902.8 C 1147 906, 1152.3 906.7, 1195.5 908.9 C 1215.7 910, 1218.4 910.5, 1227.7 915.4 C 1245.2 924.6, 1250.2 934.8, 1243.6 947.8 C 1238.2 958.4, 1231.2 962, 1216.2 962 C 1204.9 962, 1195 964, 1195 966.3 C 1195 967, 1195.7 968.6, 1196.6 969.8 C 1199 973.3, 1197.9 974.5, 1187.8 979.6 C 1179.2 983.9, 1174 987.4, 1174 989 C 1174 990.4, 1179.7 992.2, 1186.6 992.9 C 1203 994.8, 1214.8 1003.8, 1223.6 1021.3 C 1232.1 1038, 1232.5 1058.3, 1224.6 1073.8 C 1218.2 1086.3, 1208 1096.4, 1195.1 1103 C 1183.1 1109, 1175.2 1105.1, 1185.3 1098.1 C 1193.2 1092.6, 1202 1081.7, 1202 1077.3 C 1202 1073.3, 1198.1 1074.5, 1193.1 1079.9 C 1184.6 1089, 1173.7 1095.9, 1163.5 1098.6 C 1152 1101.7, 1133.3 1099.3, 1123.3 1093.4 C 1117.1 1089.8, 1116 1090.1, 1116 1095.5 C 1116 1099.8, 1115.9 1100, 1113 1100 C 1111.1 1100, 1107.8 1098.6, 1104.7 1096.5 C 1098.5 1092.3, 1097.7 1092.2, 1095.2 1095.5 C 1094.1 1096.9, 1092.6 1098, 1091.8 1098 C 1089.8 1098, 1026.6 1076.8, 1014.8 1072.1 C 1009.1 1069.9, 999.1 1066, 992.5 1063.4 C 953.4 1048.4, 903.9 1021.6, 883.8 1004.6 C 881.8 1002.9, 877.1 999, 873.4 996 C 853.9 980.2, 836.6 959, 825 937 C 818.9 925.4, 816 923, 816 929.7 C 816 936, 819.4 947, 824.5 957 C 830.3 968.6, 832.3 974.1, 831.2 975.2 C 829.9 976.5, 819.6 968.6, 815.5 963.1 C 813.6 960.6, 810.4 956.5, 808.5 954 C 806.6 951.5, 804.3 947.5, 803.4 945 C 802.4 942.5, 800.2 936.7, 798.4 932 C 793.9 920.1, 787.9 898.8, 786.8 890.5 C 784.2 871.6, 782.3 829.3, 784 827.6 C 785.5 826.1, 790.3 831.6, 798.2 844 C 801.6 849.2, 805.9 855.5, 807.9 857.9 C 814 865.5, 840.2 892, 845.8 896.4 C 848.8 898.6, 853 902, 855.3 903.8 C 871 916.2, 895.8 931.1, 925.8 946.1 C 935.4 950.9, 938.4 952, 939.3 951.1 C 940.8 949.5, 938.3 947.3, 915.2 929.7 C 905.6 922.4, 894.4 913.9, 890.2 910.7 C 886 907.5, 880.7 903.2, 878.4 901.2 C 876.1 899.1, 871.2 895, 867.4 892 C 829.9 861.6, 806.9 828.2, 784.9 772.5 C 777.7 754.2, 776 749.6, 773.5 740.6 C 770.5 730.1, 765.8 718.8, 764.3 718.3 C 762.8 717.8, 761.5 726.1, 762.4 729.8 C 764.2 737, 765.3 762.5, 766 815.5 C 767 887, 768.3 902, 775 926.8 C 777.1 934.4, 788 957.2, 793.3 965 C 800.2 975.2, 817 993.5, 825.2 999.9 C 840.4 1011.7, 853.4 1021.3, 859.5 1025.2 C 878.1 1037.1, 884.4 1041, 901.8 1050.9 C 929.2 1066.5, 936.2 1071.2, 942.8 1078.5 C 949.6 1085.9, 958.4 1103.7, 960.5 1114 C 962.3 1123, 962.5 1148.6, 960.9 1157.4 C 959.1 1166.9, 956.3 1180.6, 954 1191 C 945.3 1229.9, 944.2 1239.1, 946.7 1250.5 C 947.3 1253.3, 948.4 1258.9, 949 1263 C 953.1 1288.2, 963.4 1333.9, 966.6 1341 C 968.1 1344.3, 968.3 1344.4, 969.6 1342.5 C 972.6 1338.5, 973 1332.8, 973 1298.7 L 973 1263.8 976.5 1246.2 C 983.1 1213.2, 994.8 1177.6, 1009.7 1144.5 C 1022.6 1116, 1024.7 1113, 1031.9 1113 C 1034.6 1113, 1038.7 1113.9, 1041.1 1114.9 C 1045.5 1116.9, 1076.4 1126, 1091.5 1129.9 C 1100.3 1132.1, 1120.3 1136.1, 1132 1138 C 1136.1 1138.6, 1141.5 1139.6, 1143.9 1140.1 C 1146.7 1140.8, 1150 1140.7, 1153.4 1140.1 C 1156.2 1139.5, 1161.4 1138.6, 1165 1137.9 C 1217 1128.6, 1246.5 1100.8, 1253 1054.8 C 1254 1047.7, 1253.5 1042.9, 1250 1030.2 C 1247.8 1022.1, 1237.6 1001, 1233.6 996.3 C 1229.7 991.7, 1230.1 987.8, 1234.8 984.3 C 1236.8 982.8, 1244 976.1, 1250.6 969.5 C 1263.7 956.6, 1263.4 957.1, 1266.6 941.7 C 1268.3 933.7, 1267.4 926.3, 1263.4 916.4 C 1260.9 910.2, 1260.2 903, 1262 903 C 1262.6 903, 1267.1 899.1, 1272 894.4 C 1284.2 882.7, 1290.5 871.1, 1290.4 860.5 C 1290.4 853.6, 1290.2 853.1, 1280.7 834.2 C 1268.9 810.9, 1268.4 807.9, 1275.9 804.5 C 1326.3 781.3, 1335.9 774, 1341.5 754.6 C 1345.3 741.6, 1345.2 741.3, 1319.2 702.1 C 1306.6 683.1, 1294.8 665, 1292.9 662 C 1291 659, 1287 653.7, 1284 650.4 C 1266.5 631, 1261 621.1, 1261 609.3 C 1261 598.9, 1265 592.4, 1282.1 574.4 C 1291.7 564.4, 1293.7 560.1, 1292.5 552.6 C 1291.9 548.6, 1290.5 545.7, 1277 521 C 1262.9 495.2, 1257.2 483.4, 1256.1 477.5 C 1255.4 474.2, 1254.5 469.3, 1253.9 466.7 C 1253.4 464, 1253 460.2, 1253 458.2 C 1253 454.1, 1251.6 446.2, 1248.8 433.7 C 1245.2 418.3, 1236.4 402.7, 1225.1 391.5 C 1216.2 382.8, 1216.5 381, 1226.9 381 C 1231.3 381, 1237 380.6, 1239.7 380 C 1242.3 379.5, 1248.6 378.3, 1253.5 377.4 C 1269.8 374.5, 1288.3 365.8, 1302.7 354.5 C 1305.9 352, 1310.8 348.2, 1313.5 346.1 C 1321.1 340.3, 1332.3 327.7, 1341 315.3 C 1344 310.9, 1346 309, 1347.5 309 C 1355.4 309, 1447.9 341.1, 1499.8 361.9 C 1552.9 383.1, 1637.7 421.4, 1640.2 425.3 C 1642.3 428.4, 1635.6 492.5, 1629 533.6 C 1571.1 892.9, 1325.6 1233.3, 948 1477.7 C 918.3 1497, 890.3 1514, 888.5 1514 C 886.8 1514, 866.3 1501.6, 836 1482.2 C 654.6 1366, 498.8 1223.6, 381.9 1067 C 242.1 879.9, 157.9 670.6, 139.1 463.5 C 136.1 430.9, 135.9 426.6, 136.8 425.3 C 138.4 422.8, 195.9 396, 237.5 378.3 C 334.7 337, 437.5 303, 530.8 281.5 C 548.9 277.4, 548 277.4, 548 280.3 C 548.1 288.4, 550.6 288.8, 555.9 281.6 C 558.2 278.6, 560.4 275.9, 561 275.5 C 561.6 275.1, 563.8 272.5, 566 269.5 C 571.3 262.3, 586.5 250.6, 605.4 239.2 C 617.5 231.8, 621.6 234.8, 614.8 246.2 C 613.1 249.1, 610.4 253.7, 608.8 256.4 C 605.6 261.9, 604.1 267, 605.8 267 C 606.4 267, 611.1 263, 616.2 258.2 C 621.3 253.4, 630 246.1, 635.5 242 C 641 237.9, 647.1 233.2, 649.1 231.5 C 651.1 229.9, 655.3 226.5, 658.5 224 C 661.7 221.5, 667.1 217, 670.6 214 C 676.7 208.6, 688.4 198.6, 695.8 192.4 C 704.6 185, 724.5 172.8, 741 164.5 C 752 159, 756.4 157, 774.5 149.6 C 781 146.9, 801.3 140.1, 830.4 130.8 C 841.2 127.3, 829.7 124.6, 815.5 127.2 M 965 144 C 964.2 144.5, 961.9 144.9, 960 144.9 C 958.1 144.8, 952.9 145.7, 948.5 146.8 C 941.4 148.7, 893.3 158.4, 863.5 164 C 781.3 179.4, 720.6 202.2, 686.8 230.2 C 678.3 237.3, 681.1 238.8, 691.5 232.9 C 728.6 211.5, 785.3 191.6, 850.8 177.1 C 855.8 175.9, 863.9 174.1, 868.8 173.1 C 873.6 172, 882 170.1, 887.5 168.9 C 911.6 163.6, 945.3 154.8, 951.6 152.2 C 959.4 149.1, 967 144.9, 967 143.8 C 967 142.8, 966.8 142.8, 965 144 M 1349.7 189.8 C 1349.4 190.2, 1349.6 193, 1350.2 196 C 1352.1 207.2, 1353.2 215.8, 1353.9 226.2 C 1354.2 232.1, 1354.8 237.1, 1355 237.3 C 1356.5 238.5, 1364.5 241, 1368.9 241.6 C 1373.9 242.2, 1374 242.2, 1374 239.7 C 1374 226.7, 1353.2 184, 1349.7 189.8 M 816.7 215.7 C 815.4 216.9, 816 218, 817.9 218 C 818.9 218, 820.3 217.3, 821 216.5 C 822 215.2, 821.9 215, 819.8 215 C 818.4 215, 817 215.3, 816.7 215.7 M 1136 228.3 C 1134.1 229.6, 1131.2 231.4, 1129.5 232.2 C 1127.9 233.1, 1122.5 236, 1117.5 238.7 C 1112.6 241.5, 1106.7 244.6, 1104.5 245.8 C 1096 250.3, 1069.5 261.6, 1055.4 266.9 C 1051.5 268.3, 1047 270.4, 1045.4 271.5 L 1042.5 273.4 1045.5 274 C 1047.2 274.4, 1050.5 274, 1053 273.3 C 1055.5 272.6, 1061.1 271.1, 1065.5 270 C 1084.8 265.1, 1119 247.1, 1136.3 232.7 C 1143 227, 1142.8 223.7, 1136 228.3 M 701.7 286.7 C 701.2 287.1, 693.4 287.8, 684.2 288.2 C 667.6 289, 658.2 289.9, 646.3 291.9 C 642.8 292.5, 637.4 293.4, 634.3 293.9 C 617.1 296.7, 605.1 300, 571.5 310.9 C 558.3 315.2, 534.2 322, 518 326 C 423.2 349.1, 316.9 385.9, 223 428.2 C 185 445.3, 179.1 448.3, 178.5 450 C 178.2 451, 178.4 456.7, 179 462.7 C 212.9 808.1, 424.1 1139, 770.5 1389.2 C 814.8 1421.2, 884.3 1467, 888.6 1467 C 890.8 1467, 907.3 1456.7, 941 1434.5 C 1323.3 1181.8, 1559.9 833.2, 1597.5 467.2 C 1599.3 449.6, 1599.2 449, 1594.2 446.6 C 1566.7 433.3, 1515.5 411.1, 1478.5 396.5 C 1426.3 375.9, 1347.1 348.5, 1345.2 350.5 C 1344.1 351.5, 1343.8 380.2, 1344.7 382.8 C 1345.5 384.8, 1349.9 386.5, 1375 394.9 C 1441 416.9, 1558.8 464.4, 1562.1 470.2 C 1563.5 472.7, 1557.7 515, 1551.4 548 C 1490.5 869.5, 1269.4 1173.7, 933 1398.9 C 903.6 1418.6, 890.3 1427, 888.6 1427 C 884.4 1427, 813.9 1379.3, 770.3 1346.8 C 458.7 1115.3, 262.2 814.9, 218.2 502.5 C 214.2 474.1, 213.9 471.7, 214.8 470.2 C 216.3 467.9, 266.5 445.8, 307.5 429.5 C 379.1 401, 447 379, 522.5 359.7 C 545.9 353.7, 548.5 352.8, 562 346 C 570 342, 577.7 337.9, 579.2 336.9 C 585.4 332.4, 604.8 325.9, 623.5 321.8 C 647.9 316.6, 713.8 316.1, 752 321 C 792.4 326.1, 806.3 329.5, 847 344.5 C 862.5 350.2, 872.3 353, 877.3 353 C 881.7 353, 882.1 353.2, 895.6 361.3 C 904.8 366.7, 911.5 371.5, 927.5 383.9 C 942.3 395.4, 966.5 425.8, 965.8 432 C 965.5 434.1, 964 435.3, 956 439.1 C 858.6 486.8, 851.1 491.5, 810.2 530.3 C 805.3 535, 804.3 536.9, 806.6 537.7 C 807.1 537.9, 809.1 536.6, 811 535 C 812.9 533.3, 818.1 529.4, 822.5 526.3 C 826.9 523.2, 832.1 519.5, 834 518.1 C 842.5 511.7, 879 490.7, 898.1 481.3 C 911.5 474.6, 914.5 473.2, 930.5 466.3 C 954.8 455.8, 990 443, 995 443 C 996.4 443, 998.5 442.7, 999.8 442.4 C 1006.2 440.6, 997.7 427, 986.6 421.3 C 981.7 418.7, 976.3 414.3, 963.9 402.5 C 953.6 392.8, 946 386.1, 933.2 375.4 C 931.2 373.8, 926.1 369.9, 922 366.8 C 908 356.4, 906.7 352.8, 918.8 357.6 C 930.2 362.1, 944 369.6, 956.5 378 C 958.7 379.5, 961.3 380.9, 962.2 381.3 C 967 383, 964.1 375.7, 958.3 371.3 C 956.3 369.8, 952.1 366.2, 949.1 363.5 C 927.7 344.2, 889.6 324.1, 850 311.2 C 836.4 306.7, 800.1 297.4, 790.5 295.9 C 787.2 295.4, 781.8 294.5, 778.5 293.9 C 760 290.8, 745.9 289.2, 725 288 C 715.9 287.5, 707.1 286.8, 705.5 286.5 C 703.8 286.1, 702.1 286.2, 701.7 286.7 M 688.9 299.5 C 688.5 299.8, 684.9 300.4, 680.7 300.9 C 673.1 301.8, 665.3 304.7, 665.7 306.5 C 665.9 307.1, 675.8 307.8, 691.2 308.2 C 717.5 308.9, 738.1 310.1, 758.5 312.1 C 775.3 313.7, 787.2 313.8, 787.7 312.3 C 788.7 309.4, 781.2 307, 758 302.9 C 748.9 301.2, 690 298.3, 688.9 299.5 M 1335.5 339.7 C 1331.7 345.6, 1327 352.3, 1325 354.6 C 1310.5 371.8, 1309.4 373.6, 1313.6 372.6 C 1323 370.3, 1343.2 351.6, 1344.5 344.2 C 1345.3 339.5, 1344.3 329, 1343.1 329 C 1342.8 329, 1339.3 333.8, 1335.5 339.7 M 503.2 379.1 C 497.8 381.2, 492.8 385.8, 485.8 395 C 465.5 421.7, 450.5 456.9, 445 490.5 C 444.4 494.4, 443.5 500, 443 503.1 C 442.4 506.1, 442 510.2, 442 512.2 C 442 516.8, 438.9 521, 436.7 519.2 C 432.7 515.9, 430.8 499.1, 431.2 472 L 431.5 448.5 435.4 437 C 437.5 430.7, 440.2 423.7, 441.3 421.5 C 443.8 416.5, 456.6 397.4, 458 396.5 C 460.3 395.1, 459 393, 455.8 393.1 C 445.2 393.2, 437.2 399.7, 429 414.8 C 412.9 444.3, 404.1 465.3, 401.5 480 C 400.6 485.2, 399.5 491.1, 399.1 493 C 398.7 494.9, 398.8 498.5, 399.2 501 C 404 530.2, 404.8 531.8, 415.9 533.2 C 418.2 533.5, 427.3 547.1, 434.1 560.2 C 436 564, 436.5 572.9, 435.1 578 C 434.1 581.6, 442.9 618.7, 447.9 631.6 C 453.6 646.5, 458.8 659.5, 464.5 673 C 488.6 730.5, 500.7 767, 506.9 801.6 C 508.3 809.1, 508.4 871.2, 507 878.9 C 506.5 882, 505.6 887.7, 504.9 891.5 C 500 921.7, 482.1 968.3, 465.6 993.8 C 456.1 1008.5, 453 1013.7, 453 1014.7 C 453 1016.4, 460.2 1025, 461.6 1025 C 463.7 1025, 474.6 1016.4, 478.7 1011.3 C 480.8 1008.8, 485 1004, 488 1000.5 C 505.9 980, 511.4 971, 526.8 936.5 C 540.2 906.4, 556.1 859.8, 563 830.5 C 564.2 825.6, 565.8 818.6, 566.7 815 C 567.5 811.4, 568.6 805.9, 569.1 802.8 C 570.3 795.3, 571.8 785.9, 573 779 C 574.5 770.8, 576.3 752.2, 576.1 746.5 C 575.8 733.7, 578.4 733.8, 594.1 747.5 C 596.6 749.7, 601.3 753.5, 604.5 756 C 607.6 758.5, 612.2 762.1, 614.5 764 C 616.9 765.9, 620.7 769, 622.9 770.8 C 651.4 793.9, 670.7 806.2, 684.2 810 C 700.2 814.5, 706.4 814.5, 722.9 810 C 732.3 807.5, 744.1 792.4, 742.4 785.3 C 741.5 782, 739.5 782.4, 734.2 787.3 C 724.8 796, 719.6 798, 707.2 798 C 694.8 798, 680.4 791.4, 666.5 779.4 C 652.9 767.6, 649.7 765, 640.9 758.7 C 635.8 755, 626.6 748.7, 620.5 744.8 C 588.1 723.9, 567.9 699, 559.5 669.6 C 557.3 661.9, 557 658.9, 557 645.1 C 557 611.4, 565.5 592.2, 587 577.7 C 598.4 570, 601.7 569, 617.3 569 C 636.6 569, 647.2 572.4, 664.5 584 C 681.1 595.1, 693.6 602, 697.5 602 C 703.4 602, 699.8 597.7, 672.3 572.3 C 657.6 558.9, 654.5 557.6, 625.5 553 C 601.6 549.2, 567.9 568.7, 551.5 595.9 C 548.8 600.5, 543.3 607.8, 539.3 612.1 C 531.6 620.5, 531.4 620.9, 528 637 C 525.7 647.7, 526.3 650.4, 531.5 652.5 C 535.9 654.4, 536.9 656.4, 539.2 668 C 542.7 685.8, 550.8 704.6, 560.5 717.5 C 566.2 725.1, 566.3 725.4, 565.6 740.2 C 564.7 759.6, 562.4 773.8, 554.6 808.5 C 549.7 829.8, 538.1 866.4, 534.8 870.5 C 531.5 874.7, 530.6 872.4, 531.5 862.3 C 532.5 850.7, 532.6 817, 531.7 810 C 526.8 773.7, 519.4 745.7, 505.5 710.5 C 502 701.7, 498.8 693.2, 498.4 691.5 C 498 689.9, 496.1 685.4, 494.2 681.5 C 488.4 669.8, 485 660.7, 485 656.5 C 485 654.3, 483.8 649.4, 482.4 645.5 C 466.6 601.2, 460.9 581.3, 458.8 562.5 C 457.3 549.6, 457.3 513.3, 458.8 500.5 C 463.7 457.5, 481.8 415.9, 508.3 386.2 C 516 377.5, 514.2 374.9, 503.2 379.1 M 1097 529 C 1095.1 529.5, 1090.1 530.4, 1086 531 C 1071.9 533.2, 1041.7 541.2, 1028.3 546.3 C 1023.5 548.2, 1017.5 550.4, 1015 551.4 C 1009.8 553.3, 1005.2 556.5, 1006.2 557.6 C 1007.3 558.7, 1014.7 558.4, 1025 556.9 C 1031.2 556, 1044.3 555.6, 1062.5 555.5 L 1090.5 555.5 1108.5 561.7 C 1118.4 565.1, 1131.7 569.8, 1138 572 C 1153.3 577.5, 1166.5 581, 1171.9 581 C 1177.6 581, 1191.7 578.2, 1195.4 576.3 C 1197.5 575.2, 1199.8 575, 1204.1 575.5 L 1209.9 576.2 1216.1 570.3 C 1223.9 562.9, 1232 552.2, 1232 549.3 C 1232 546.6, 1227.7 545.5, 1219.8 546.4 C 1194.9 549.1, 1183.3 547.6, 1165 539.5 C 1157.2 536, 1146.6 533.1, 1134.5 531 C 1130.7 530.4, 1125.6 529.4, 1123.3 528.9 C 1118.3 527.8, 1101.9 527.9, 1097 529 M 808.3 554.3 C 804.4 561.5, 806.2 594.1, 810.4 592.7 C 816 590.8, 816.4 551, 810.8 551 C 810.4 551, 809.3 552.5, 808.3 554.3 M 1103 581 C 1101.1 581.5, 1095.3 582.6, 1090.1 583.5 C 1069.9 587.1, 1044 595.8, 1044 599 C 1044 600, 1051.6 601.4, 1052.9 600.5 C 1055.9 598.7, 1083.8 596.2, 1113 595.1 C 1136.2 594.3, 1143.3 593.1, 1145.4 589.8 C 1146.6 587.8, 1144.3 585.5, 1140 584.6 C 1138.6 584.3, 1133.3 583.2, 1128.1 582 C 1118.4 580, 1109.2 579.6, 1103 581 M 616.2 592.5 C 612.7 593.3, 607.9 594.8, 605.6 596 C 600.4 598.5, 588.1 610.9, 585.2 616.5 C 581 624.8, 576 646.5, 577.1 652 C 577.5 653.9, 578.3 658.4, 579 662 C 582 678.5, 588.7 693, 593.3 693 C 594.2 693, 594.2 692.2, 592.2 681.5 C 589.4 666.1, 589 662.7, 589 653.4 C 589 638, 592.7 623.1, 598.7 614.6 C 611 597.2, 634.4 596.8, 650.1 613.8 C 657.6 621.9, 659.4 625.8, 659.8 635.5 C 660.3 647, 659 648.7, 642.5 657.2 C 623.5 667, 620 671.5, 620 686.7 C 620 704.3, 628.9 718.5, 642.2 722.1 C 649.3 724, 664.4 727, 666.7 727 C 670.2 727, 676.9 730.7, 682.1 735.5 C 693.4 746, 703.9 747.4, 711 739.4 C 715 734.8, 714.9 733.8, 708.7 727.2 C 695.3 712.7, 691.9 705.8, 691 691.8 C 690.7 686.4, 690.1 681.7, 689.7 681.3 C 688.4 680.1, 685.6 682.5, 683 687.1 C 680.4 691.7, 680.4 691.5, 681.3 710.9 C 681.6 718.4, 680.6 718.8, 668.8 716.6 C 647 712.4, 640.1 708.9, 635.4 699.8 C 629.8 688.7, 634.5 675.9, 646.5 669.8 C 670.5 657.5, 676.5 650.4, 676.5 634.5 C 676.5 623.3, 674.1 618.3, 663.6 608.2 C 650.1 595.1, 631.8 589.1, 616.2 592.5 M 1115.6 611.6 C 1107 614.6, 1100.7 614.7, 1097.3 612 C 1094.1 609.5, 1092.9 609.5, 1089.9 611.9 C 1088.6 612.9, 1086 614.1, 1084.3 614.4 C 1077.9 615.8, 1080.3 618.7, 1093.5 625.3 C 1105.2 631.1, 1111.6 632.6, 1119.5 631.1 C 1127.9 629.5, 1128.1 629.1, 1127.2 618.5 C 1126.4 607.9, 1126.2 607.8, 1115.6 611.6 M 774.5 652 C 776.1 657.1, 782.7 669.2, 789.3 679 C 807.2 705.7, 817.6 717.2, 902 803.4 C 923.2 825, 943.9 846.6, 948 851.4 C 952.1 856.2, 957.3 862.2, 959.5 864.8 C 972.7 880.1, 996.8 915.9, 1011.4 942 C 1015.7 949.8, 1028.1 974.9, 1037.6 995 C 1044.3 1009.4, 1047.6 1015, 1049.2 1015 C 1049.7 1015, 1049.6 1014.1, 1049 1013.1 C 1048.5 1012, 1048 1009.7, 1048 1008 C 1048 1006.3, 1046.9 1002.1, 1045.7 998.7 C 1044.4 995.3, 1040 982.6, 1036 970.5 C 1024 934, 1018.4 919.7, 1008.6 900.1 C 1005 893, 1001.8 884.8, 1000.1 878.1 C 995.6 861, 991.7 854.5, 977.6 840 C 970.8 833.1, 962.8 824.1, 959.8 820 C 956.7 815.9, 949.4 808, 943.6 802.5 C 918.8 779.2, 910.1 771.2, 904.6 767 C 901.4 764.5, 896.4 760.5, 893.5 758 C 890.6 755.5, 885.7 751.5, 882.5 749 C 856.5 728.5, 842.3 716.1, 820.8 694.8 C 812.1 686.1, 803.6 678.3, 801.9 677.3 C 800.3 676.4, 799 675.2, 799 674.8 C 799 674.4, 794 668.8, 787.9 662.3 C 776.8 650.5, 773.1 647.7, 774.5 652 M 1178.6 764.2 C 1174.1 771.2, 1175.8 780.5, 1183.3 788.6 C 1190.5 796.5, 1199.3 799.4, 1204.5 795.6 C 1206.3 794.3, 1206.3 794.1, 1203.4 791.6 C 1201.8 790.2, 1199.4 788.2, 1198 787.4 C 1194 784.8, 1188.8 777.1, 1186 769.5 C 1183.2 761.9, 1181.1 760.4, 1178.6 764.2 M 1235.5 767 C 1233.9 767.4, 1228.7 768.6, 1224.1 769.6 C 1212.9 772, 1208.2 775.8, 1212.9 778.7 C 1216.4 780.9, 1254.3 777.8, 1259.7 774.9 C 1264.7 772.2, 1261.6 769.9, 1250 767.5 C 1241.8 765.9, 1240 765.8, 1235.5 767 M 702.5 894.9 C 700.9 902.3, 721.4 985.7, 737.5 1037.5 C 745.4 1063.1, 757 1096.6, 762.5 1110 C 767.8 1122.9, 774 1142.5, 774 1146.4 C 774 1151, 776.8 1165.7, 778.2 1168.3 C 778.7 1169.3, 781.2 1172.6, 783.8 1175.5 C 798.3 1192.1, 796.6 1189.8, 815.3 1216.9 C 820.3 1224.2, 827.2 1234.1, 830.5 1238.9 C 836.3 1247.4, 859.7 1278.5, 867.3 1287.8 C 874.6 1297, 879.1 1302.6, 883 1307.6 C 886.9 1312.8, 891.5 1317, 893.1 1317 C 895.7 1317, 893.1 1309.3, 885.1 1292.8 C 854.5 1229.5, 848.1 1215, 837.7 1185 C 834.7 1176.5, 830.9 1166.4, 829.3 1162.5 C 823.5 1149.1, 802.8 1108.6, 798 1101.6 C 791.3 1091.5, 784.4 1080.1, 782.4 1075.5 C 781.5 1073.3, 776.6 1062.7, 771.5 1052 C 761.2 1030.3, 751.5 1009.3, 746.5 998 C 744.6 993.9, 741.7 987.4, 739.9 983.5 C 735.9 974.7, 732.5 966.3, 729.5 958 C 728.2 954.4, 725 945.9, 722.5 939 C 720 932.1, 715.5 919.4, 712.5 910.6 C 706 891.5, 704 888.4, 702.5 894.9 M 1084 1078.1 C 1084 1080.1, 1086.1 1083, 1087.5 1083 C 1089.4 1083, 1089.4 1082, 1087.4 1079.2 C 1085.8 1076.9, 1084 1076.3, 1084 1078.1 M 967 1090 C 967 1091.7, 968.5 1096.1, 970.3 1099.8 C 973.8 1106.7, 975.9 1114.2, 977.9 1126.5 C 978.6 1130.4, 979.5 1136, 980 1139.1 C 980.6 1142.1, 981 1147.6, 981 1151.1 C 981 1154.7, 981.3 1158, 981.7 1158.3 C 982.5 1159.2, 988 1154.1, 988 1152.4 C 988 1150.4, 1001.8 1123.1, 1006 1117 C 1009 1112.6, 1010 1110.1, 1010 1107.2 C 1010 1102.9, 1011.3 1103.7, 993 1095.9 C 988.9 1094.2, 982.6 1091.4, 979.1 1089.9 C 970.4 1086, 967 1086, 967 1090 M 533 1113.2 C 533 1115.2, 555.4 1136.7, 561.1 1140.1 C 564 1141.9, 571.2 1145.9, 577 1149.1 C 597.1 1159.9, 605.5 1164.6, 612 1168.6 C 615.6 1170.9, 621.7 1174.6, 625.5 1177 C 639.9 1185.9, 677 1211, 689.4 1220.4 C 702.1 1229.9, 705.7 1232.9, 718.5 1244 C 730.6 1254.6, 733.7 1256.8, 744 1263 C 760.9 1273.1, 786.5 1291.3, 798.1 1301.4 C 800.7 1303.7, 805.8 1308, 809.5 1311 C 842.3 1337.9, 877.2 1371.9, 897 1396.3 C 902.1 1402.6, 903.3 1403, 905.6 1399.5 C 907.5 1396.6, 904.9 1388.8, 896.8 1372.6 C 892.2 1363.5, 870.5 1331, 861 1319 C 855.7 1312.3, 769.3 1225.4, 763.2 1220.7 C 760.2 1218.4, 756 1215, 753.7 1213.2 C 730.9 1195.2, 679.3 1164, 653.5 1152.7 C 632.2 1143.3, 629.3 1142.1, 622.5 1140 C 618.7 1138.8, 609.2 1135.3, 601.5 1132.3 C 576.9 1122.8, 574.7 1122, 566 1119.6 C 541.7 1112.7, 533 1111, 533 1113.2' fill-rule='evenodd'/%3E%3C/svg%3E"); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; } html, body { overflow-x: clip; } body { margin: 0; background: var(--black); color: var(--text); font-family: var(--f-body); font-weight: 400; font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.is-loading, body.is-locked { overflow: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3, p, figure, dl, dd, ol, ul, blockquote { margin: 0; } ol, ul { padding: 0; list-style: none; } address { font-style: normal; } [hidden] { display: none !important; } ::selection { background: var(--gold); color: var(--black); } :focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; left: 16px; top: -60px; z-index: 300; padding: .8rem 1.2rem; background: var(--gold); color: var(--black); font-weight: 600; border-radius: 8px; transition: top .2s; } .skip-link:focus { top: 16px; } /* o mesmo contêiner estrutural no header e em todas as seções: o texto da hero começa na margem do logo */ .container { width: min(100% - 2 * var(--pad), var(--maxw)); margin-inline: auto; position: relative; z-index: 2; } /* ---------- grão de filme ---------- */ .grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; } @keyframes grain { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); } 60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } } /* ---------- Faixa Imperium (canvas) ---------- */ .band { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; } .band--back { z-index: 1; } .band--front { z-index: 40; } /* ========================================================================== Gradiente orgânico (hero, especialista, experiência, CTA final) ========================================================================== */ .aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .aura__orb { position: absolute; border-radius: 50%; will-change: transform; } .aura__orb--a { width: 78vmax; height: 78vmax; left: -26vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(34, 62, 92, 1), rgba(20, 36, 56, .6) 48%, transparent 74%); animation: orbA 18s ease-in-out infinite alternate; } .aura__orb--b { width: 86vmax; height: 86vmax; right: -30vmax; bottom: -40vmax; background: radial-gradient(closest-side, rgba(22, 40, 64, 1), rgba(16, 27, 43, .55) 52%, transparent 76%); animation: orbB 22s ease-in-out infinite alternate; } .aura__orb--c { width: 56vmax; height: 56vmax; left: 36%; top: 4%; background: radial-gradient(closest-side, rgba(70, 120, 172, .52), rgba(34, 62, 94, .24) 52%, transparent 72%); animation: orbC 14s ease-in-out infinite alternate; } .aura__orb--d { width: 42vmax; height: 42vmax; left: 8%; bottom: -14vmax; background: radial-gradient(closest-side, rgba(211, 166, 79, .11), transparent 70%); animation: orbD 19s ease-in-out infinite alternate; } /* ondas de luz: varredura cônica em rotação + reflexo que atravessa o fundo */ .aura::before { content: ''; position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: conic-gradient(from 200deg, transparent 0deg, rgba(74, 124, 178, .13) 38deg, transparent 84deg, rgba(211, 166, 79, .05) 140deg, transparent 190deg, rgba(60, 104, 152, .12) 250deg, transparent 310deg); mix-blend-mode: screen; animation: auraSpin 46s linear infinite; will-change: transform; } .aura::after { content: ''; position: absolute; inset: -20% -60%; background: linear-gradient(112deg, transparent 38%, rgba(120, 162, 214, .07) 47%, rgba(245, 222, 155, .045) 50%, rgba(120, 162, 214, .06) 53%, transparent 62%); mix-blend-mode: screen; animation: auraSheen 13s ease-in-out infinite alternate; will-change: transform; } @keyframes auraSpin { to { transform: rotate(360deg); } } @keyframes auraSheen { from { transform: translate3d(-22%, 0, 0); } to { transform: translate3d(22%, 0, 0); } } @keyframes orbA { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(13vmax, 8vmax, 0) scale(1.12); } 100% { transform: translate3d(5vmax, 18vmax, 0) scale(.92); } } @keyframes orbB { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-14vmax, -8vmax, 0) scale(1.14); } 100% { transform: translate3d(-5vmax, -16vmax, 0) scale(1); } } @keyframes orbC { 0% { transform: translate3d(0, 0, 0) scale(.88); } 50% { transform: translate3d(-10vmax, 12vmax, 0) scale(1.08); } 100% { transform: translate3d(-20vmax, 4vmax, 0) scale(1.2); } } @keyframes orbD { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(22vmax, -10vmax, 0) scale(1.15); } } .is-offscreen .aura__orb, .is-offscreen .aura::before, .is-offscreen .aura::after { animation-play-state: paused; } /* ========================================================================== Tipografia ========================================================================== */ .gold-text { background: var(--gold-metallic-wide); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold); animation: goldShift 9s ease-in-out infinite alternate; } .gold-text--deep { background-image: linear-gradient(115deg, #6F491B 0%, #9C7130 20%, #C99A45 38%, #8A6224 55%, #B88A3C 72%, #6F491B 100%); background-size: 200% 100%; } @keyframes goldShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } .eyebrow { display: inline-flex; align-items: center; gap: .9rem; font-family: var(--f-display); font-weight: 600; font-stretch: 112%; font-size: .7rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: 1.4rem; } .eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--gold-metallic); } .eyebrow--dark { color: var(--gold-lo); } .eyebrow__num { font-weight: 500; letter-spacing: .14em; opacity: .7; } .h2 { font-family: var(--f-display); font-weight: 600; font-stretch: 108%; font-size: clamp(2.05rem, 4vw, 4.1rem); line-height: .98; letter-spacing: -.025em; text-transform: uppercase; color: var(--off); max-width: 17ch; margin-bottom: 1.4rem; } .section--off .h2, .on-light .h2 { color: var(--ink); } .h3 { font-family: var(--f-display); font-weight: 600; font-stretch: 105%; font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.1; letter-spacing: -.01em; color: var(--off); } .lead { font-size: clamp(1rem, 1.2vw, 1.14rem); line-height: 1.6; color: var(--muted); max-width: 46ch; font-weight: 400; } .section--off .lead { color: var(--ink-soft); } /* revelação por linhas / palavras */ .split-w { display: inline-block; overflow: clip; overflow-clip-margin: .14em; vertical-align: top; padding-bottom: .05em; margin-bottom: -.05em; } .split-w > span { display: inline-block; will-change: transform; } /* ========================================================================== Botões e links ========================================================================== */ .btn { --bh: 54px; position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-height: var(--bh); padding: 0 1.6rem; border-radius: 999px; font-family: var(--f-display); font-weight: 600; font-stretch: 108%; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; transition: color .4s var(--ease), background-color .4s var(--ease), border-color .4s var(--ease); overflow: hidden; } .btn > span { position: relative; z-index: 1; } .btn__arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; position: relative; z-index: 1; transition: transform .5s var(--ease); } .btn:hover .btn__arrow { transform: translateX(4px); } .btn--sm { --bh: 44px; padding: 0 1.2rem; font-size: .66rem; } .btn--lg { --bh: 62px; padding: 0 2.3rem; font-size: .78rem; } .btn--gold { color: #17110a; background: var(--gold-metallic-wide); background-size: 220% 100%; background-position: 0% 50%; box-shadow: 0 10px 30px -12px rgba(211, 166, 79, .5), inset 0 1px 0 rgba(255, 245, 210, .6); transition: background-position .9s var(--ease), box-shadow .5s var(--ease); } .btn--gold:hover { background-position: 100% 50%; box-shadow: 0 16px 40px -14px rgba(245, 222, 155, .65), inset 0 1px 0 rgba(255, 245, 210, .8); } .btn--gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); transition: transform 1s var(--ease); z-index: 0; } .btn--gold:hover::after { transform: translateX(120%); } .btn--ghost { color: var(--off); border: 1px solid rgba(242, 238, 230, .26); background: rgba(9, 10, 12, .18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .btn--ghost:hover { border-color: var(--gold-hi); color: var(--gold-hi); } .btn--line { color: var(--off); background: transparent; } .btn--line::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gold-metallic); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .btn--line:hover { color: var(--gold-hi); background: rgba(211, 166, 79, .06); } .btn--dark { color: var(--off); background: var(--night); } .btn--dark:hover { background: var(--petrol); } .btn--line-dark { color: var(--ink); border: 1px solid rgba(20, 22, 26, .3); } .btn--line-dark:hover { border-color: var(--gold-lo); color: var(--gold-lo); } .link-more { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--f-display); font-weight: 600; font-stretch: 110%; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); } .link-more svg { width: 26px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.2; transition: transform .5s var(--ease); } .link-more:hover svg, .pcard:hover .link-more svg, .rcard:hover .link-more svg { transform: translateX(5px); } .icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--faint); color: var(--off); transition: border-color .3s, color .3s, background-color .3s; } .icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; } .icon-btn:hover { border-color: var(--gold); color: var(--gold-hi); } /* seta editorial (hero, carrosséis) */ .arrow { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 44px; color: var(--off); } .arrow svg { width: 46px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.1; overflow: visible; transition: transform .6s var(--ease); } .arrow .arrow__shaft { transform-origin: 100% 50%; transition: transform .6s var(--ease); } .arrow--prev svg { transform: scaleX(-1); } .arrow:hover { color: var(--gold-hi); } .arrow:hover .arrow__shaft { transform: scaleX(1.35); } .arrow--next:hover svg { transform: translateX(6px); } .arrow--prev:hover svg { transform: scaleX(-1) translateX(6px); } .arrow:disabled { opacity: .3; pointer-events: none; } /* emblema (máscara vetorial + metal dourado) */ .emblem { display: inline-block; aspect-ratio: 886 / 806; -webkit-mask: var(--emblem-mask) center / contain no-repeat; mask: var(--emblem-mask) center / contain no-repeat; } .emblem--gold { background: var(--gold-metallic-wide); background-size: 260% 260%; animation: emblemShine 7s ease-in-out infinite alternate; } @keyframes emblemShine { from { background-position: 0% 30%; } to { background-position: 100% 70%; } } /* ========================================================================== Preloader ========================================================================== */ .preloader { position: fixed; inset: 0; z-index: 200; pointer-events: auto; } .preloader__half { position: absolute; inset: 0; background: var(--black); display: grid; place-items: center; will-change: transform; } .preloader__half--l { clip-path: inset(0 calc(50% - 1px) 0 0); } .preloader__half--r { clip-path: inset(0 0 0 calc(50% - 1px)); } .preloader__geo { width: min(78vmin, 560px); height: auto; overflow: visible; } .preloader__beam { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(transparent, var(--gold-hi), transparent); opacity: 0; transform: scaleY(0); filter: blur(.4px); box-shadow: 0 0 24px 4px rgba(245, 222, 155, .5); } .preloader__mark { position: fixed; left: 50%; top: 50%; width: min(26vmin, 190px); opacity: 0; z-index: 2; } .preloader__mark .emblem { width: 100%; filter: drop-shadow(0 0 22px rgba(211, 166, 79, .35)); } .preloader__word { position: absolute; left: 0; right: 0; top: calc(50% + min(78vmin, 560px) * .33); display: flex; justify-content: center; gap: .5em; font-family: var(--f-display); font-weight: 600; font-stretch: 125%; font-size: clamp(.85rem, 1.5vw, 1.1rem); letter-spacing: .12em; color: var(--gold-hi); } .preloader__word span { opacity: 0; display: inline-block; } /* ========================================================================== Header ========================================================================== */ .header { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--header-h); transition: height .5s var(--ease), transform .6s var(--ease); } .header::before { content: ''; position: absolute; inset: 0; background: rgba(9, 12, 18, .86); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); opacity: 0; transition: opacity .5s var(--ease); } .header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(211,166,79,.5), transparent); opacity: 0; transition: opacity .5s; } .header.is-compact { height: 68px; } .header.is-compact::before, .header.is-compact::after { opacity: 1; } .header__inner { position: relative; height: 100%; display: flex; align-items: center; gap: 2rem; } .logo { display: inline-flex; align-items: center; gap: .75rem; flex: none; } .logo__emblem { width: 44px; margin-left: -2px; transition: width .5s var(--ease); } .header.is-compact .logo__emblem { width: 36px; } .logo__type { display: flex; flex-direction: column; line-height: 1; } .logo__word { font-family: var(--f-display); font-weight: 600; font-stretch: 125%; font-size: 1.02rem; letter-spacing: .24em; background: var(--gold-metallic); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .logo__sub { font-family: var(--f-display); font-weight: 500; font-stretch: 110%; font-size: .5rem; letter-spacing: .52em; color: var(--muted); margin-top: .5rem; } .nav { position: relative; margin-inline: auto; } .nav__list { display: flex; gap: clamp(.9rem, 1.6vw, 1.9rem); } .nav__link { position: relative; display: block; padding: .5rem 0; font-family: var(--f-display); font-stretch: 108%; font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); overflow: hidden; clip-path: inset(.5rem 0); transition: color .3s; } .nav__link:focus-visible { clip-path: none; } .nav__link > span { position: relative; display: block; transition: transform .55s var(--ease); } .nav__link > span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; color: var(--gold-hi); } .nav__link:hover > span { transform: translateY(-100%); } .nav__link.is-active { color: var(--off); } .nav__indicator { position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: var(--gold-metallic); transition: transform .6s var(--ease), width .6s var(--ease), opacity .3s; opacity: 0; } .nav__indicator::after { content: ''; position: absolute; left: 50%; top: -2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 10px var(--gold); } .header__cta { flex: none; } .burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--faint); position: relative; flex: none; } .burger span { position: absolute; left: 13px; right: 13px; height: 1px; background: var(--off); transition: transform .5s var(--ease), top .5s var(--ease); } .burger span:first-child { top: 19px; } .burger span:last-child { top: 26px; } .burger[aria-expanded="true"] span:first-child { top: 22.5px; transform: rotate(45deg); } .burger[aria-expanded="true"] span:last-child { top: 22.5px; transform: rotate(-45deg); } /* menu mobile */ .menu { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--header-h) + 3vh) var(--pad) calc(28px + env(safe-area-inset-bottom)); visibility: hidden; } .menu__bg { position: absolute; inset: 0; background: radial-gradient(120% 70% at 80% 0%, rgba(40, 72, 108, .45), transparent 60%), linear-gradient(180deg, var(--night), var(--black)); clip-path: inset(0 0 100% 0); } .menu__nav, .menu__foot { position: relative; } .menu__list li { overflow: clip; } .menu__list a { display: flex; align-items: baseline; gap: 1rem; padding: .3rem 0; font-family: var(--f-display); font-weight: 600; font-stretch: 112%; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(1.45rem, 6.6vw, 3rem); line-height: 1.16; color: var(--off); } .menu__list a i { font-style: normal; font-weight: 500; font-size: .66rem; letter-spacing: .14em; color: var(--gold); width: 2.4rem; } .menu__list a:active span, .menu__list a:hover span { color: var(--gold-hi); } .menu__foot { display: grid; gap: 1.2rem; } .menu__meta { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); letter-spacing: .06em; } /* ========================================================================== Seções e transições ========================================================================== */ .section { position: relative; padding-block: clamp(84px, 10vw, 150px); } .seam + .section { padding-top: clamp(36px, 4.5vw, 72px); } .section--black { background: var(--black); } .section--night { background: var(--night); } .section--off { background: var(--off); color: var(--ink); } .seam { height: var(--seam-h); position: relative; } .seam--black-night { background: linear-gradient(var(--black), var(--night)); } .seam--night-petrol { background: linear-gradient(var(--night), #13212f); } .seam--petrol-off { background: linear-gradient(var(--petrol), var(--petrol) 22%, var(--off) 78%); } .seam--off-black { background: linear-gradient(var(--off), var(--off) 22%, var(--black) 78%); } .seam--night-black { background: linear-gradient(var(--night), var(--black)); } .seam--black-off { background: linear-gradient(var(--black), var(--black) 22%, var(--off) 78%); } /* luz que atravessa as transições conforme o scroll */ .seam::after { content: ''; position: absolute; left: 50%; top: 50%; width: 70vw; height: 160%; transform: translate(-50%, -50%) scaleX(var(--seam-light, .2)); background: radial-gradient(closest-side, rgba(245, 222, 155, .08), transparent 70%); opacity: var(--seam-o, 0); pointer-events: none; } /* ========================================================================== Hero ========================================================================== */ .hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: clip; background: var(--black); isolation: isolate; } .hero__slides, .hero__slide { position: absolute; inset: 0; } .hero__slides { z-index: 1; } .hero__slide { opacity: 0; visibility: hidden; transition: opacity 1.5s var(--ease-io), visibility 0s 1.5s; } .hero__slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.5s var(--ease-io), visibility 0s; z-index: 1; } .hero__light { position: absolute; width: 64vmax; height: 64vmax; left: var(--lx, 70%); top: var(--ly, 40%); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(52, 92, 135, .55), rgba(24, 43, 61, .28) 48%, transparent 72%); pointer-events: none; } .hero__subject-wrap { position: absolute; inset: 0; will-change: transform; } .hero__subject { position: absolute; bottom: 0; height: 100%; width: auto; max-width: none; transform-origin: 60% 100%; will-change: transform; -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 20%); mask-image: linear-gradient(to top, transparent 0%, #000 20%); } .hero__slide--dr { --lx: 72%; --ly: 34%; } /* PNG transparente do especialista à mesa: deslocado para a direita (o braço direito já termina na borda da foto) */ .hero__slide--dr .hero__subject { height: 88%; right: clamp(-6vw, calc((100vw - var(--maxw)) / 2 - 7vw), 2vw); } /* bordas e mesa se dissolvem no gradiente; o canto inferior esquerdo (objetos da mesa) some na névoa */ .hero__slide--dr .hero__subject { -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%), linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%), radial-gradient(32% 38% at 8% 100%, transparent 58%, #000 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, transparent 0%, #000 22%), linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%), radial-gradient(32% 38% at 8% 100%, transparent 58%, #000 100%); mask-composite: intersect; } .hero__slide--rt .hero__subject { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 80%, transparent 100%), linear-gradient(to right, transparent 0%, #000 26%, #000 90%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 80%, transparent 100%), linear-gradient(to right, transparent 0%, #000 26%, #000 90%, transparent 100%); mask-composite: intersect; } .hero__slide--cos { --lx: 70%; --ly: 46%; } .hero__slide--cos .hero__subject { height: 100%; right: max(0vw, calc((100vw - var(--maxw)) / 2 - 3vw)); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 84%, transparent 100%), linear-gradient(to right, transparent 0%, #000 22%, #000 90%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 84%, transparent 100%), linear-gradient(to right, transparent 0%, #000 22%, #000 90%, transparent 100%); mask-composite: intersect; } /* rosto com o fundo original: só as bordas do retângulo se dissolvem no gradiente */ .hero__slide--rt { --lx: 70%; --ly: 42%; } .hero__slide--rt .hero__subject { height: 100%; bottom: 0; right: max(0vw, calc((100vw - var(--maxw)) / 2 - 2vw)); } .hero__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(9,10,12,.86) 0%, rgba(9,10,12,.55) 30%, rgba(9,10,12,0) 58%), linear-gradient(0deg, rgba(9,10,12,.95) 0%, rgba(9,10,12,.4) 14%, rgba(9,10,12,0) 32%), linear-gradient(180deg, rgba(9,10,12,.5), rgba(9,10,12,0) 20%); } .hero__content { position: absolute; left: 0; right: 0; bottom: clamp(112px, 17vh, 176px); z-index: 3; } .hero__title { font-family: var(--f-display); font-weight: 600; font-stretch: 112%; text-transform: uppercase; font-size: clamp(2.5rem, 5.3vw, 5.7rem); line-height: .94; letter-spacing: -.035em; color: var(--off); } .hero__title .line { display: block; overflow: clip; overflow-clip-margin: .12em; padding-bottom: .03em; } .hero__title .line > span { display: inline-block; } .hero__lead { margin-top: 1.6rem; max-width: 36ch; font-size: clamp(1rem, 1.15vw, 1.12rem); color: var(--text); } .hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; } .hero__nav { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 3; display: flex; justify-content: flex-end; align-items: center; gap: .4rem; } .hero__count { display: flex; align-items: center; gap: .9rem; font-family: var(--f-display); font-weight: 500; font-stretch: 110%; font-size: .7rem; letter-spacing: .18em; color: var(--muted); } .hero__count b { color: var(--off); font-weight: 600; min-width: 2ch; } .hero__bar { position: relative; width: clamp(64px, 8vw, 120px); height: 1px; background: var(--faint); overflow: hidden; } .hero__bar i { position: absolute; inset: 0; background: var(--gold-metallic); transform-origin: 0 50%; transform: scaleX(0); } /* ========================================================================== Especialista ========================================================================== */ .specialist { background: var(--night); overflow: clip; padding-top: clamp(60px, 7vw, 110px); } .specialist .aura__orb--a { opacity: .7; } .specialist__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 7vw, 7.5rem); align-items: center; } .specialist__photo { position: relative; } .spec-panel { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: radial-gradient(90% 70% at 50% 28%, #2a4a6c 0%, #182B3D 42%, #0d1622 100%); isolation: isolate; } .spec-panel::before { content: ''; position: absolute; inset: -20%; background: radial-gradient(closest-side, rgba(245, 222, 155, .12), transparent 70%); transform: translate(var(--glx, 0%), var(--gly, 0%)); } .spec-panel img { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; } .spec-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13, 22, 34, .85), transparent 22%); pointer-events: none; } .specialist__frame { position: absolute; inset: -14px 14px 14px -14px; border-radius: calc(var(--radius) + 4px); border: 1px solid rgba(211, 166, 79, .32); z-index: -1; pointer-events: none; } .specialist__photo figcaption { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; display: flex; justify-content: space-between; font-family: var(--f-display); font-stretch: 110%; font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(242, 238, 230, .7); z-index: 2; } .specialist__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin: .6rem 0 1.4rem; } .specialist__name strong { font-family: var(--f-display); font-weight: 600; font-stretch: 110%; font-size: clamp(1.3rem, 2vw, 1.7rem); color: var(--off); letter-spacing: -.01em; } .stats { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.4rem, 3vw, 3rem); align-items: end; margin: 2rem 0 2.4rem; } .stat__pre { display: block; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; } .stat__num { display: block; font-family: var(--f-display); font-weight: 700; font-stretch: 112%; font-size: clamp(4.4rem, 8vw, 7.4rem); line-height: .82; letter-spacing: -.05em; background: var(--gold-metallic); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; } .stat__label { display: block; margin-top: .6rem; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text); } .creds { display: grid; gap: .9rem; } .cred { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; } .cred::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-metallic); transform-origin: 0 50%; transform: scaleX(var(--draw, 1)); } .cred b { font-family: var(--f-display); font-weight: 600; font-stretch: 108%; font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--off); text-transform: uppercase; letter-spacing: .02em; } .cred span { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); } /* ========================================================================== Procedimentos — abas + grade compacta ========================================================================== */ .procedures { background: linear-gradient(180deg, #13212f 0%, var(--petrol) 55%, var(--petrol) 100%); overflow: clip; } .procedures__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; margin-bottom: clamp(1.8rem, 3.4vw, 2.8rem); } .procedures__head .h2 { margin-bottom: 0; } .procedures__head .lead { justify-self: end; } .ptabs { position: relative; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: 5px; margin-bottom: clamp(1.4rem, 2.6vw, 2rem); border-radius: 99px; background: rgba(9, 12, 18, .35); border: 1px solid var(--line); width: fit-content; max-width: 100%; } .ptabs::-webkit-scrollbar { display: none; } .ptab { position: relative; z-index: 1; flex: none; padding: .78rem 1.15rem; border-radius: 99px; font-family: var(--f-display); font-weight: 600; font-stretch: 108%; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color .4s var(--ease); white-space: nowrap; } .ptab[aria-selected="true"] { color: var(--black); } .ptab:hover:not([aria-selected="true"]) { color: var(--off); } .ptab sup { font-size: .58rem; margin-left: .25rem; opacity: .7; } .ptabs__pill { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 99px; background: var(--gold-metallic-wide); background-size: 220% 100%; transition: transform .6s var(--ease), width .6s var(--ease); } .ppanel { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: clamp(1.6rem, 3.4vw, 3.4rem); align-items: start; } .ppanel__aside { position: relative; padding-top: .3rem; } .ppanel__num { font-family: var(--f-display); font-weight: 500; font-stretch: 110%; font-size: .7rem; letter-spacing: .24em; color: var(--gold); } .ppanel__title { font-family: var(--f-display); font-weight: 600; font-stretch: 108%; text-transform: uppercase; font-size: clamp(1.45rem, 2.2vw, 2rem); line-height: 1.02; letter-spacing: -.015em; color: var(--off); margin: .7rem 0 .9rem; } .ppanel__lead { color: var(--muted); font-size: .95rem; } .ppanel__privacy { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1.1rem; font-size: .82rem; color: var(--muted); } .ppanel__privacy svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 1.4; margin-top: .15rem; } .ppanel__cta { margin-top: 1.6rem; } .ppanel__flag { margin-top: 1rem; } .pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 188px), 1fr)); gap: 14px; } .pgrid--single { grid-template-columns: minmax(0, 1fr); } .pcard { position: relative; display: flex; flex-direction: column; width: 100%; text-align: left; color: var(--off); border-radius: var(--radius); background: rgba(9, 12, 18, .32); border: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: transform .6s var(--ease), border-color .5s; } .pcard:hover { transform: translateY(-4px); border-color: rgba(211, 166, 79, .4); } .pcard__img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #0d1520; } .pcard__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease); } .pcard:hover .pcard__img img { transform: scale(1.1); } .pcard__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 27, 43, 0) 45%, rgba(16, 27, 43, .85)); } .pcard__body { display: grid; gap: .45rem; padding: 1rem 1.05rem 1.15rem; } .pcard__name { font-family: var(--f-display); font-weight: 600; font-stretch: 106%; font-size: 1.02rem; line-height: 1.15; letter-spacing: -.005em; } .pcard__short { font-size: .84rem; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pcard .link-more { margin-top: .35rem; } .pcard__flag { display: inline-block; margin-top: .3rem; padding: .22rem .55rem; border: 1px dashed rgba(245, 222, 155, .5); border-radius: 6px; font-size: .62rem; letter-spacing: .06em; color: var(--gold-hi); } .pgrid--single .pcard { flex-direction: row; } .pgrid--single .pcard__img { aspect-ratio: 1 / 1; flex: 0 0 min(46%, 420px); } .pgrid--single .pcard__body { align-content: center; padding: clamp(1.4rem, 3vw, 2.6rem); gap: .8rem; } .pgrid--single .pcard__name { font-size: clamp(1.4rem, 2.2vw, 2rem); text-transform: uppercase; } .pgrid--single .pcard__short { -webkit-line-clamp: 4; font-size: .95rem; } .procedures__note { margin-top: 1.4rem; font-size: .72rem; letter-spacing: .04em; color: rgba(242, 238, 230, .42); } .pdots { display: none; } /* ========================================================================== Drawer (procedimento) ========================================================================== */ .drawer { position: fixed; inset: 0; z-index: 120; } .drawer__scrim { position: absolute; inset: 0; background: rgba(5, 8, 12, .62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; } .drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(540px, 100%); overflow-y: auto; overscroll-behavior: contain; padding: clamp(28px, 4vw, 52px); padding-top: 84px; background: linear-gradient(180deg, var(--petrol), var(--night) 40%, #0b1119); border-left: 1px solid rgba(211, 166, 79, .25); } .drawer__panel:focus { outline: none; } .drawer__close { position: absolute; top: 22px; right: 22px; } .drawer__media { margin: -84px calc(clamp(28px, 4vw, 52px) * -1) 1.6rem; height: 230px; position: relative; overflow: hidden; } .drawer__media img { width: 100%; height: 100%; object-fit: cover; } .drawer__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 43, 61, .2), var(--petrol)); } .drawer__cat { font-family: var(--f-display); font-weight: 600; font-stretch: 110%; font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); } .drawer__title { font-family: var(--f-display); font-weight: 600; font-stretch: 108%; text-transform: uppercase; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; letter-spacing: -.02em; color: var(--off); margin: .7rem 0 1rem; } .drawer__short { font-size: 1rem; color: var(--text); } .drawer__block { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line); } .drawer__block h3 { font-family: var(--f-display); font-size: .64rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-hi); margin-bottom: .7rem; } .drawer__block p { color: var(--muted); } .drawer__block ul { display: grid; gap: .6rem; } .drawer__block li { position: relative; padding-left: 1.3rem; color: var(--muted); font-size: .95rem; } .drawer__block li::before { content: ''; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold-metallic); } .drawer__note { margin-top: 1.6rem; padding: .9rem 1.1rem; border-radius: var(--radius-sm); background: rgba(242, 238, 230, .04); border: 1px solid var(--line); font-size: .84rem; color: var(--muted); } .drawer__pending { margin-top: 1rem; padding: .7rem 1rem; border: 1px dashed rgba(245, 222, 155, .5); border-radius: 8px; font-size: .76rem; color: var(--gold-hi); } .drawer__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; } /* ========================================================================== Diferenciais (claro) ========================================================================== */ .pillars { overflow: clip; } .pillars__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.6rem 4rem; align-items: end; margin-bottom: clamp(2.2rem, 4.4vw, 3.6rem); } .pillars__head .h2 { margin-bottom: 0; max-width: 18ch; } .pillars__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-dark); } .pillar { position: relative; padding: 1.8rem 1.6rem 1.6rem 0; } .pillar + .pillar { padding-left: 1.6rem; border-left: 1px solid var(--line-dark); } .pillar::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--gold-metallic); transform-origin: 0 50%; transform: scaleX(var(--draw, 1)); } .pillar__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.2rem; } .pillar__n { font-family: var(--f-display); font-weight: 500; font-stretch: 110%; font-size: .7rem; letter-spacing: .2em; color: var(--gold-lo); } .pillar__icon svg { width: 30px; height: 30px; fill: none; stroke: url(#goldStroke); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } .pillar h3 { font-family: var(--f-display); font-weight: 600; font-stretch: 106%; font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.15; color: var(--ink); margin-bottom: .6rem; text-transform: uppercase; letter-spacing: .01em; } .pillar p { font-size: .9rem; line-height: 1.55; color: var(--ink-soft); max-width: 30ch; } /* ========================================================================== Resultados ========================================================================== */ .results { background: linear-gradient(180deg, var(--black) 0%, #0c131d 30%, var(--night) 70%); padding-bottom: clamp(80px, 9vw, 130px); } .results__intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem 4rem; align-items: end; margin-bottom: clamp(1rem, 3vw, 2.4rem); } .results__intro .h2 { margin-bottom: 0; } .results__intro .lead { justify-self: end; } .review-flag { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem; padding: .5rem .85rem; border: 1px dashed rgba(245,222,155,.55); border-radius: 8px; font-size: .7rem; letter-spacing: .08em; color: var(--gold-hi); } .review-flag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-hi); box-shadow: 0 0 10px var(--gold); } /* uma imagem → cinco */ .five { position: relative; } .five__stage { position: relative; width: 100%; height: 100vh; height: 100svh; overflow: clip; } .five__head { position: absolute; left: 0; right: 0; top: calc(var(--header-h) + 2.4vh); z-index: 3; pointer-events: none; } .five__title { font-family: var(--f-display); font-weight: 600; font-stretch: 110%; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 2.5rem); line-height: 1; letter-spacing: -.02em; color: var(--off); } .five__head .eyebrow { margin-bottom: .8rem; } .five__tiles { position: absolute; inset: 0; } .five__tile { position: absolute; border-radius: var(--radius); overflow: hidden; background: #0d1520; will-change: left, top, width, height; } .five__tile img { position: absolute; max-width: none; object-fit: cover; } .five__slice { will-change: transform; } .five__own { inset: 0; width: 100%; height: 100%; opacity: 0; } .five__tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 27, 43, 0) 45%, rgba(10, 16, 26, .82)); opacity: var(--shade, 0); pointer-events: none; } .five__label { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; opacity: 0; } .five__label b { display: block; font-family: var(--f-display); font-weight: 600; font-stretch: 108%; text-transform: uppercase; font-size: clamp(.86rem, 1.15vw, 1.08rem); color: var(--off); line-height: 1.1; letter-spacing: .01em; } .five__label small { display: block; font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); margin-top: .3rem; } .five__go { flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(9,10,12,.45); border: 1px solid rgba(245,222,155,.5); display: grid; place-items: center; transition: background-color .3s; } .five__go svg { width: 14px; height: 14px; fill: none; stroke: var(--gold-hi); stroke-width: 1.5; } .five__tile:hover .five__go { background: var(--gold); } .five__tile:hover .five__go svg { stroke: var(--black); } .five__cross { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .five__cross i { position: absolute; background: var(--gold-metallic); opacity: 0; box-shadow: 0 0 14px rgba(245, 222, 155, .55); } /* galeria */ .gal { margin-top: clamp(3rem, 6vw, 5rem); scroll-margin-top: 90px; } .gal__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.6rem; } .gal__bar .ptabs { margin-bottom: 0; } .gal__hint { font-size: .74rem; color: rgba(242, 238, 230, .5); } .gal__wrap { position: relative; } .gal__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr)); gap: 14px; } .rcard { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); background: rgba(242, 238, 230, .03); border: 1px solid var(--line); overflow: hidden; transition: border-color .5s, transform .6s var(--ease); } .rcard:hover { border-color: rgba(211, 166, 79, .4); } .rcard__media { position: relative; aspect-ratio: 4 / 5; background: #0a0f17; overflow: hidden; cursor: ew-resize; touch-action: pan-y; } .rcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-select: none; } .rcard__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--p, 50%)); } .rcard__line { position: absolute; top: 0; bottom: 0; left: var(--p, 50%); width: 1px; margin-left: -.5px; background: rgba(242, 238, 230, .85); box-shadow: 0 0 12px rgba(0, 0, 0, .6); pointer-events: none; } .rcard__media--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; cursor: default; } .rcard__media--pair figure { position: relative; overflow: hidden; } .rcard__tag { position: absolute; top: 10px; z-index: 2; padding: .26rem .55rem; border-radius: 99px; background: rgba(9,10,12,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--f-display); font-size: .54rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--off); pointer-events: none; } .rcard__tag--b { left: 10px; } .rcard__tag--a { right: 10px; color: var(--gold-hi); } .rcard__body { display: grid; gap: .35rem; padding: .95rem 1rem 1.05rem; } .rcard__name { font-family: var(--f-display); font-weight: 600; font-stretch: 106%; font-size: .98rem; line-height: 1.2; color: var(--off); } .rcard__short { font-size: .82rem; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rcard__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .35rem; } .rcard__foot .link-more { white-space: nowrap; } .rcard__pill { white-space: nowrap; font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 238, 230, .45); } .rcard__review { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: .2rem .5rem; border-radius: 6px; background: rgba(9,10,12,.7); border: 1px dashed rgba(245,222,155,.55); font-size: .56rem; color: var(--gold-hi); letter-spacing: .04em; } /* três etapas: cada foto entra por máscara; a faixa inferior divide o card nas mesmas colunas do cursor */ .rcard__step { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); } .rcard__media--steps .rcard__line { left: var(--pl, 100%); opacity: 0; transition: opacity .25s; } .rcard__media--steps.is-wiping .rcard__line { opacity: 1; } .rcard__steps { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); padding-top: 1.8rem; background: linear-gradient(rgba(6, 9, 14, 0), rgba(6, 9, 14, .8)); } .rcard__steps button { position: relative; padding: .5rem .2rem .7rem; font-family: var(--f-display); font-size: .56rem; font-weight: 600; font-stretch: 110%; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; color: rgba(242, 238, 230, .55); transition: color .35s; } .rcard__steps button + button::before { content: ''; position: absolute; left: 0; top: 32%; bottom: 38%; width: 1px; background: rgba(242, 238, 230, .2); } .rcard__steps button:hover { color: var(--off); } .rcard__steps button.is-on { color: var(--gold-hi); } .rcard__steps i { position: absolute; left: 0; bottom: 0; width: calc(100% / var(--n, 3)); height: 2px; background: var(--gold-metallic); box-shadow: 0 0 10px rgba(245, 222, 155, .45); transform: translateX(calc(var(--v, 0) * 100%)); pointer-events: none; } .rcard.is-locked .rcard__steps, .rcard.is-locked .rcard__line { visibility: hidden; } .rcard.is-locked .rcard__media img { opacity: 0; } .rcard.is-locked .rcard__media::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(242,238,230,.03) 0 12px, transparent 12px 24px), radial-gradient(70% 60% at 50% 40%, rgba(40, 72, 108, .35), transparent 70%); } .gal__gate { position: absolute; inset: 0; z-index: 5; display: grid; place-content: start center; padding-top: clamp(3rem, 12vh, 8rem) !important; justify-items: center; gap: .9rem; padding: 2rem; text-align: center; background: linear-gradient(180deg, rgba(10, 16, 24, .55), rgba(10, 16, 24, .9) 30%, rgba(10, 16, 24, .9) 70%, rgba(10, 16, 24, .55)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: var(--radius); } .gal__gate .emblem { width: 54px; } .gal__gate-title { font-family: var(--f-display); font-weight: 600; font-stretch: 108%; text-transform: uppercase; font-size: 1.25rem; color: var(--off); } .gal__gate p { max-width: 42ch; font-size: .88rem; color: var(--muted); } .gal__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); } .gal__note { font-size: .74rem; line-height: 1.5; color: rgba(242, 238, 230, .45); max-width: 70ch; } .gal__more { display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; } .gal__more p { font-family: var(--f-display); font-stretch: 106%; font-size: .9rem; color: var(--text); } .gal__empty { padding: clamp(2rem, 5vw, 3.6rem); border-radius: var(--radius); border: 1px solid var(--line); background: rgba(242, 238, 230, .03); } .gal__empty p { color: var(--muted); margin: .8rem 0 1.4rem; max-width: 52ch; } .gal__nav { display: none; } /* ========================================================================== Visualizador de resultado (modal) + comparador ========================================================================== */ .lb { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: clamp(12px, 3vw, 40px); } .lb__scrim { position: absolute; inset: 0; background: rgba(5, 8, 12, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lb__panel { position: relative; width: min(1180px, 100%); max-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(1.2rem, 2.4vw, 2.4rem); align-items: center; padding: clamp(16px, 2vw, 28px); border-radius: calc(var(--radius) + 4px); background: linear-gradient(160deg, var(--petrol), var(--night) 45%, #0a1018); border: 1px solid rgba(211, 166, 79, .2); overflow: auto; overscroll-behavior: contain; } .lb__panel:focus { outline: none; } .lb__close { position: absolute; top: 14px; right: 14px; z-index: 6; background: rgba(9, 10, 12, .5); } .lb__info { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: .8rem; padding-right: .6rem; } .lb__kicker { font-family: var(--f-display); font-weight: 600; font-stretch: 110%; font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } .lb__title { font-family: var(--f-display); font-weight: 600; font-stretch: 108%; text-transform: uppercase; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.02; color: var(--off); } .lb__text { color: var(--muted); font-size: .92rem; } .lb__note { font-size: .74rem; line-height: 1.5; color: rgba(242, 238, 230, .45); padding: .7rem .9rem; border-left: 1px solid var(--gold); background: rgba(242, 238, 230, .03); } .lb__pager { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .4rem; font-family: var(--f-display); font-size: .7rem; letter-spacing: .18em; color: var(--muted); } .lb__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; } .cmp__stage { position: relative; display: grid; justify-items: center; gap: .8rem; } .cmp__frame { position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; background: #0a0f17; user-select: none; -webkit-user-select: none; touch-action: pan-y; isolation: isolate; } .cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .cmp__after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); } .cmp__brush { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; } .cmp__divider { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .cmp__line { fill: none; stroke: rgba(242, 238, 230, .9); stroke-width: 1.2; filter: drop-shadow(0 0 6px rgba(0,0,0,.55)); } .cmp__tag { position: absolute; top: 12px; z-index: 3; padding: .32rem .7rem; border-radius: 99px; background: rgba(9,10,12,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--f-display); font-size: .58rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--off); pointer-events: none; transition: opacity .4s; } .cmp__tag--before { left: 12px; } .cmp__tag--after { right: 12px; color: var(--gold-hi); } .cmp__pair { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--black); z-index: 4; } .cmp__pair figure { position: relative; overflow: hidden; } .cmp__pair img { width: 100%; height: 100%; object-fit: contain; background: #0a0f17; } .cmp__pair figcaption { position: absolute; left: 10px; top: 10px; padding: .28rem .6rem; border-radius: 99px; background: rgba(9,10,12,.62); font-family: var(--f-display); font-size: .56rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; } .cmp__frame.mode-brush .cmp__after, .cmp__frame.mode-brush .cmp__divider { opacity: 0; } .cmp__frame.mode-brush .cmp__brush { opacity: 1; } .cmp__after, .cmp__divider { transition: opacity .45s var(--ease); } .cmp__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.2rem; } .cmp__modes { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 99px; background: rgba(242,238,230,.05); border: 1px solid var(--line); } .cmp__modes button { padding: .5rem .9rem; border-radius: 99px; font-family: var(--f-display); font-stretch: 106%; font-size: .7rem; font-weight: 500; color: var(--muted); transition: background-color .3s, color .3s; } .cmp__modes button.is-active { background: var(--off); color: var(--black); } .cmp__modes button:disabled { opacity: .35; cursor: not-allowed; } .cmp__reset { display: inline-flex; align-items: center; gap: .5rem; font-size: .74rem; color: var(--gold-hi); padding: .5rem .2rem; } .cmp__reset svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; } .cmp__range { -webkit-appearance: none; appearance: none; width: min(100%, 420px); height: 28px; background: transparent; cursor: pointer; } .cmp__range::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi), var(--gold-lo)); } .cmp__range::-moz-range-track { height: 1px; background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi), var(--gold-lo)); } .cmp__range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 14px; margin-top: -7px; border-radius: 7px; background: var(--off); border: 0; box-shadow: 0 2px 8px rgba(0,0,0,.4); } .cmp__range::-moz-range-thumb { width: 26px; height: 14px; border-radius: 7px; background: var(--off); border: 0; } .cmp__hint { font-size: .72rem; color: rgba(242,238,230,.45); text-align: center; } /* rótulos das etapas sob as paradas do controle (início, meio e fim) */ .cmp__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 420px); margin-top: -.55rem; } .cmp__steps[hidden] { display: none; } .cmp__steps button { padding: .45rem 0; font-family: var(--f-display); font-size: .64rem; font-weight: 600; font-stretch: 110%; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); transition: color .3s; } .cmp__steps button:first-child { text-align: left; } .cmp__steps button:last-child { text-align: right; } .cmp__steps button:hover { color: var(--off); } .cmp__steps button.is-on { color: var(--gold-hi); } /* ========================================================================== Experiência ========================================================================== */ .experience { position: relative; background: var(--black); overflow: clip; padding-block: clamp(90px, 11vw, 170px) clamp(40px, 6vw, 80px); } .experience__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: min(78vh, 760px); } .experience__title { font-family: var(--f-display); font-weight: 600; font-stretch: 112%; text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 5.2rem); line-height: .94; letter-spacing: -.035em; color: var(--off); max-width: 12ch; margin-bottom: 1.6rem; } .experience__keys { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 2rem 0 2.4rem; } .experience__keys li { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--f-display); font-weight: 500; font-stretch: 106%; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text); } .experience__keys li::before { content: ''; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold-metallic); } .experience__figure { position: relative; align-self: end; height: min(78vh, 760px); } .experience__figure::before { content: ''; position: absolute; left: 50%; top: 40%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(46, 84, 124, .5), rgba(24, 43, 61, .2) 55%, transparent 72%); } .experience__figure img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); -webkit-mask-image: linear-gradient(to top, transparent 0, #000 24%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, transparent 0, #000 24%), linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%); mask-composite: intersect; } .experience__lane { height: var(--seam-h); position: relative; } /* ========================================================================== Depoimentos ========================================================================== */ .testimonials { background: radial-gradient(90% 70% at 85% 0%, rgba(40, 72, 108, .35), transparent 60%), var(--night); overflow: clip; } .tst { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; } .tst__head .h2 { max-width: 13ch; } .tst__stage { position: relative; min-height: 260px; padding: clamp(1.8rem, 3.6vw, 3rem); border-radius: calc(var(--radius) + 4px); border: 1px solid var(--line); background: linear-gradient(135deg, rgba(9,10,12,.4), rgba(9,10,12,.08)); overflow: hidden; } .tst__quote { position: absolute; right: 4%; top: -18%; font-family: var(--f-display); font-weight: 700; font-size: clamp(10rem, 20vw, 18rem); line-height: 1; background: var(--gold-metallic); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: .16; pointer-events: none; } .tst__slide blockquote { font-family: var(--f-display); font-weight: 400; font-stretch: 104%; font-size: clamp(1.15rem, 1.8vw, 1.55rem); line-height: 1.4; color: var(--off); max-width: 40ch; } .tst__meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .tst__meta span + span { color: var(--muted); } .tst__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; } .tst__dots { display: flex; gap: .5rem; } .tst__dots button { width: 22px; height: 2px; background: var(--faint); transition: background-color .3s, width .4s var(--ease); } .tst__dots button[aria-current="true"] { width: 40px; background: var(--gold); } .tst__empty p { position: relative; color: var(--text); max-width: 46ch; font-size: clamp(1rem, 1.3vw, 1.12rem); } .tst__actions { position: relative; display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; } .partners__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 2.4rem; } .partner { padding: 1.8rem; border-radius: var(--radius); border: 1px solid var(--line); } /* ========================================================================== Instagram ========================================================================== */ .social { background: linear-gradient(180deg, var(--night) 0, var(--black) 180px); padding-bottom: clamp(36px, 4vw, 56px); } .social__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; } .social__cards { display: grid; gap: 12px; } .social__card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.1rem; padding: 1.1rem 1.3rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(242,238,230,.025); transition: border-color .4s, background-color .4s, transform .6s var(--ease); } .social__card:hover { border-color: rgba(211,166,79,.45); background: rgba(211,166,79,.05); transform: translateX(6px); } .social__avatar { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--night); position: relative; } .social__avatar::after { content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px; background: var(--gold-metallic); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .social__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; } .social__avatar--brand .emblem { width: 62%; } .social__meta b { display: block; font-family: var(--f-display); font-weight: 600; font-stretch: 106%; font-size: 1.05rem; color: var(--off); } .social__meta span { font-size: .8rem; color: var(--muted); } .social__arrow { width: 22px; height: 22px; fill: none; stroke: var(--gold-hi); stroke-width: 1.5; transition: transform .5s var(--ease); } .social__card:hover .social__arrow { transform: translate(3px, -3px); } /* grupo privado: faixa curta logo abaixo do Instagram */ .private { position: relative; background: var(--black); padding-bottom: clamp(56px, 6.5vw, 100px); } .private__band { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.1rem clamp(1.2rem, 2.4vw, 2.2rem); padding: clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.2rem, 2.4vw, 2rem); border-radius: var(--radius); overflow: hidden; isolation: isolate; background: radial-gradient(60% 140% at 0% 50%, rgba(211, 166, 79, .16), transparent 60%), radial-gradient(50% 160% at 100% 0%, rgba(40, 72, 108, .55), transparent 70%), linear-gradient(110deg, var(--night), var(--petrol) 55%, var(--night)); } .private__band::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gold-metallic-wide); background-size: 300% 100%; animation: privateEdge 9s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .7; z-index: -1; } .private__band::after { content: ''; position: absolute; top: -40%; bottom: -40%; width: 30%; left: -35%; background: linear-gradient(100deg, transparent, rgba(245, 222, 155, .1), transparent); transform: skewX(-18deg); animation: privateSheen 7s var(--ease) infinite; z-index: -1; pointer-events: none; } @keyframes privateEdge { to { background-position: 300% 50%; } } @keyframes privateSheen { 0%, 55% { left: -35%; } 100% { left: 120%; } } .private__icon { position: relative; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: rgba(9, 12, 18, .5); } .private__icon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px; background: var(--gold-metallic); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .private__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--gold-hi); stroke-width: 1.4; } .private__title { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; font-family: var(--f-display); font-weight: 600; font-stretch: 110%; text-transform: uppercase; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.1; letter-spacing: -.005em; color: var(--off); } .private__age { padding: .18rem .45rem; border: 1px solid rgba(245, 222, 155, .45); border-radius: 6px; font-size: .56rem; font-weight: 600; letter-spacing: .14em; color: var(--gold-hi); } .private__text p { margin-top: .35rem; font-size: .9rem; line-height: 1.45; color: var(--muted); } /* ========================================================================== Localização ========================================================================== */ .location__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; } .location__address { display: grid; gap: .2rem; font-family: var(--f-display); font-weight: 600; font-stretch: 106%; font-size: clamp(1.2rem, 1.9vw, 1.7rem); line-height: 1.25; color: var(--ink); margin-bottom: 1.2rem; text-transform: uppercase; letter-spacing: -.005em; } .location__hours { color: var(--ink-soft); margin-bottom: 1.8rem; } .location__hours dl { display: grid; gap: .3rem; } .location__hours dl div { display: flex; justify-content: space-between; gap: 1rem; max-width: 340px; border-bottom: 1px solid var(--line-dark); padding: .4rem 0; } .location__actions { display: flex; flex-wrap: wrap; gap: .8rem; } .location__map-frame { position: relative; aspect-ratio: 7 / 5; border-radius: var(--radius); overflow: hidden; background: var(--night); box-shadow: 0 40px 70px -40px rgba(16, 27, 43, .6); } .location__map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.9) contrast(.92) brightness(.95) hue-rotate(180deg) sepia(.12); } .location__map-frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(211,166,79,.35); pointer-events: none; } .location__map-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1rem; color: var(--off); font-family: var(--f-display); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; background: radial-gradient(60% 60% at 50% 45%, rgba(40,72,108,.45), transparent 70%), var(--night); } .location__map-load .emblem { width: 52px; } /* ========================================================================== CTA final + rodapé ========================================================================== */ .final { position: relative; background: linear-gradient(180deg, var(--off) 0, #8f9298 26px, #1c2738 110px, var(--night) 220px); padding-top: clamp(110px, 14vw, 200px); overflow: clip; text-align: center; } .final__glow { position: absolute; left: 50%; top: 18%; width: 90vmin; height: 90vmin; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(211,166,79,.16), rgba(211,166,79,.04) 55%, transparent 75%); pointer-events: none; } .final__inner { display: grid; justify-items: center; } .final__emblem { width: clamp(84px, 9vw, 120px); margin-bottom: 2.2rem; filter: drop-shadow(0 0 30px rgba(211,166,79,.35)); } .final__title { font-family: var(--f-display); font-weight: 600; font-stretch: 112%; text-transform: uppercase; font-size: clamp(2.4rem, 6.4vw, 6.4rem); line-height: .94; letter-spacing: -.035em; color: var(--off); max-width: 13ch; margin-bottom: 1.6rem; } .final .lead { margin-bottom: 2.6rem; text-align: center; color: var(--text); } .final__lane { height: calc(var(--seam-h) * 1.25); } .footer { position: relative; z-index: 2; background: var(--black); border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 90px) 0 calc(28px + env(safe-area-inset-bottom)); } .footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.4rem; } .footer__brand p { margin-top: 1.2rem; color: var(--muted); font-size: .9rem; max-width: 30ch; } .footer__col { display: grid; align-content: start; gap: .7rem; } .footer__col h3 { font-family: var(--f-display); font-weight: 600; font-stretch: 110%; font-size: .66rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: .4rem; } .footer__col a { font-size: .9rem; color: var(--muted); transition: color .3s; width: fit-content; } .footer__col a:hover { color: var(--gold-hi); } .footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); font-size: .76rem; color: rgba(242,238,230,.45); } .footer__legal a:hover { color: var(--gold-hi); } .footer__pro { flex-basis: 100%; order: -1; } /* WhatsApp flutuante */ .wa-float { position: fixed; right: clamp(16px, 2.4vw, 32px); bottom: calc(clamp(16px, 2.4vw, 32px) + env(safe-area-inset-bottom)); z-index: 50; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(16, 27, 43, .82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 14px 30px -12px rgba(0,0,0,.7); opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); } .wa-float::before { content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 1.5px; background: var(--gold-metallic); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .wa-float svg { width: 26px; height: 26px; fill: var(--gold-hi); } .wa-float.is-visible { opacity: 1; transform: none; pointer-events: auto; } .wa-float__tip { position: absolute; right: 68px; white-space: nowrap; padding: .5rem .8rem; border-radius: 8px; background: var(--off); color: var(--black); font-size: .74rem; font-weight: 500; opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .3s; pointer-events: none; } .wa-float:hover .wa-float__tip, .wa-float:focus-visible .wa-float__tip { opacity: 1; transform: none; } /* ========================================================================== Responsivo ========================================================================== */ @media (max-width: 1200px) { .nav__list { gap: 1rem; } .nav__link { font-size: .62rem; letter-spacing: .12em; } .pillars__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pillar:nth-child(3) { padding-left: 0; border-left: 0; } .pillar:nth-child(n+3) { border-top: 1px solid var(--line-dark); } .lb__panel { grid-template-columns: minmax(0, 1fr) 280px; } } @media (max-width: 1080px) { .nav, .header__cta { display: none; } .burger { display: block; margin-left: auto; } .ppanel { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; } .ppanel__aside { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 2rem; align-items: end; } .ppanel__aside > :not(.ppanel__cta) { grid-column: 1; } .ppanel__cta { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; align-self: end; } } @media (max-width: 900px) { :root { --header-h: 70px; } .specialist__grid, .social__grid, .location__grid, .tst, .experience__grid { grid-template-columns: minmax(0, 1fr); } .specialist__photo { max-width: 520px; } .procedures__head, .results__intro, .pillars__head { grid-template-columns: minmax(0, 1fr); } .procedures__head .lead, .results__intro .lead { justify-self: start; } .experience__grid { min-height: 0; } .experience__figure { height: min(64vh, 560px); order: -1; } .lb__panel { grid-template-columns: minmax(0, 1fr); align-items: start; } .lb__info { padding-right: 0; } .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } } @media (max-width: 760px) { :root { --pad: 26px; --seam-h: 104px; } .hero { min-height: 600px; } .hero__light { width: 120vw; height: 120vw; } .hero__subject { left: 50%; right: auto !important; transform: translateX(-50%); } .hero__slide--dr { --lx: 50%; --ly: 26%; } .hero__slide--dr .hero__subject { height: 55%; bottom: 38%; } .hero__slide--cos { --lx: 56%; --ly: 30%; } /* a foto termina no meio do abdômen: ancorada na borda direita para o cós ficar no quadro */ .hero__slide--cos { --lx: 70%; --ly: 30%; } .hero__slide--cos .hero__subject { height: 64%; bottom: 36%; left: 50%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 82%, transparent 100%), linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 82%, transparent 100%), linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%); } .hero__slide--rt { --lx: 50%; --ly: 28%; } .hero__slide--rt .hero__subject { height: auto; width: 100%; top: 56px; bottom: auto; left: 50%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 66%, transparent 100%), linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 66%, transparent 100%), linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%); } .hero__shade { background: linear-gradient(0deg, rgba(9,10,12,1) 0%, rgba(9,10,12,.92) 34%, rgba(9,10,12,.2) 54%, rgba(9,10,12,0) 66%), linear-gradient(180deg, rgba(9,10,12,.55), rgba(9,10,12,0) 18%); } .hero__content { bottom: 92px; } .hero__title { font-size: clamp(2.2rem, 10.6vw, 3.1rem); } .hero__lead { margin-top: 1rem; font-size: .95rem; } .hero__actions { margin-top: 1.4rem; gap: .6rem; } .hero__actions .btn { flex: 1 1 100%; } .hero__nav { bottom: 22px; justify-content: space-between; } .btn { --bh: 50px; padding: 0 1.2rem; letter-spacing: .14em; } .stats { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; } .ptabs { width: auto; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); border-radius: 0; border-left: 0; border-right: 0; background: transparent; } .ptabs__pill { display: none; } .ptab[aria-selected="true"] { background: var(--gold-metallic-wide); background-size: 220% 100%; } .ppanel__aside { grid-template-columns: minmax(0, 1fr); } .ppanel__cta { grid-column: 1; grid-row: auto; margin-top: 1rem; justify-self: start; } .pgrid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); scroll-padding-inline: var(--pad); } .pgrid::-webkit-scrollbar { display: none; } .pgrid .pcard { flex: 0 0 72%; scroll-snap-align: start; } .pgrid--single .pcard { flex: 0 0 100%; flex-direction: column; } .pgrid--single .pcard__img { flex: none; aspect-ratio: 1 / 1; min-height: 0; } .pdots { display: flex; justify-content: center; gap: .45rem; margin-top: 1rem; } .pdots i { width: 18px; height: 2px; background: var(--faint); transition: background-color .3s, width .3s; } .pdots i.is-on { width: 32px; background: var(--gold); } .pillars__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pillar { padding: 1.3rem .9rem 1.2rem 0; } .pillar + .pillar { padding-left: .9rem; } .pillar:nth-child(3) { padding-left: 0; } .pillar__top { margin-bottom: 1.2rem; } .pillar p { font-size: .82rem; } .gal__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .rcard__media { cursor: pointer; } .rcard__body { padding: .7rem .75rem .8rem; } .rcard__name { font-size: .84rem; } .rcard__short { display: none; } .rcard__pill { display: none; } .rcard__tag { top: 7px; font-size: .48rem; padding: .2rem .45rem; } .rcard__tag--b { left: 7px; } .rcard__tag--a { right: 7px; } .gal__foot { flex-direction: column; align-items: flex-start; } .rcard__steps { padding-top: 1.4rem; } .rcard__steps button { padding: .45rem 0 .6rem; font-size: .5rem; letter-spacing: .12em; } .private__band { grid-template-columns: auto minmax(0, 1fr); gap: .9rem 1rem; padding: 1rem 1.1rem 1.1rem; } .private__icon { width: 40px; height: 40px; align-self: start; } .private__icon svg { width: 18px; height: 18px; } .private__title { font-size: .98rem; } .private__text p { font-size: .84rem; } .private__cta { grid-column: 1 / -1; } .lb { padding: 0; } .lb__panel { border-radius: 0; height: 100%; padding: 64px 16px 24px; align-content: start; } .tst__stage { padding: 1.6rem 1.3rem; } .tst__quote { display: none; } .ptabs { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); } .ptabs.is-end { -webkit-mask-image: none; mask-image: none; } .footer__grid { grid-template-columns: 1fr; } .footer__legal { flex-direction: column; } .wa-float { width: 52px; height: 52px; } .wa-float__tip { display: none; } } /* tablet em retrato: a hero usa a composição vertical do celular */ @media (min-width: 761px) and (max-width: 900px) and (orientation: portrait) { .hero__light { width: 110vw; height: 110vw; } .hero__subject { left: 50%; right: auto !important; transform: translateX(-50%); } .hero__slide--dr { --lx: 50%; --ly: 28%; } /* usa a foto do desktop: o rosto fica a ~61% da largura, então a âncora compensa para centralizá-lo */ .hero__slide--dr .hero__subject { height: 54%; bottom: 42%; transform: translateX(-61%); } .hero__slide--cos { --lx: 70%; --ly: 30%; } .hero__slide--cos .hero__subject { height: 60%; bottom: 38%; left: 50%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 82%, transparent 100%), linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 82%, transparent 100%), linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%); } .hero__slide--rt { --lx: 54%; --ly: 26%; } .hero__slide--rt .hero__subject { height: auto; width: min(100%, 640px); top: 64px; bottom: auto; left: 50%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 66%, transparent 100%), linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 8%, #000 66%, transparent 100%), linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%); } .hero__shade { background: linear-gradient(0deg, rgba(9,10,12,1) 0%, rgba(9,10,12,.9) 32%, rgba(9,10,12,.15) 56%, rgba(9,10,12,0) 66%), linear-gradient(180deg, rgba(9,10,12,.55), rgba(9,10,12,0) 18%); } } @media (max-width: 380px) { :root { --pad: 24px; } .gal__grid { gap: 8px; } } /* ========================================================================== Movimento reduzido ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .grain { animation: none; } .aura__orb, .aura::before, .aura::after { animation: none; } .hero__slide { transition: opacity .6s linear !important; } }