/* =========================================================
   Catálogo Atacado · Animal Balance — VISS 2026
   Base 1440×900 (deck) · Inter · mobile ≤ 820px reflow
   ========================================================= */

:root {
  --orange: #f5874f;
  --orange-soft: #fef6f3;
  --gold: #c9a659;
  --ink: #111111;
  --gutter: 50px;   /* respiro lateral padrão de todas as telas */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #16151c;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

button { font-family: inherit; border: 0; background: none; cursor: pointer; }
img { display: block; }

/* =========================================================
   LOGIN
   ========================================================= */
.login {
  position: fixed;
  inset: 0;
  display: flex;
  z-index: 30;
  background: #fff;
}

.login__brand {
  position: relative;
  width: 50%;
  height: 100%;
  background: url('../assets/img/panel-brand.png') 50% / cover no-repeat, #0E1019;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 44px;
  padding: 72px 80px;
  overflow: hidden;
}

/* estrelinhas flutuando no painel escuro (ref. floating stars) */
.login__stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* a luz central vem na própria panel-brand.png;
   a vinheta fica POR CIMA das estrelas, escurecendo as das bordas */
.login__brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, .16) 100%);
  pointer-events: none;
}

/* campo de estrelinhas: centenas de pontos desenhados em box-shadow,

   três camadas em velocidades diferentes dão profundidade */

.login__stars .s1,
.login__stars .s1::after {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  background: transparent;
  border-radius: 50%;
  box-shadow: 25px 961px #fff, 230px 1564px #fff, 804px 288px #fff, 88px 284px #fff, 230px 1096px #fff, 474px 1457px #fff, 285px 301px #fff, 67px 1356px #fff, 124px 279px #fff, 473px 1097px #fff, 916px 1077px #fff, 844px 419px #fff, 190px 241px #fff, 41px 1577px #fff, 825px 699px #fff, 406px 421px #fff, 676px 802px #fff, 747px 1222px #fff, 504px 430px #fff, 444px 852px #fff, 122px 1953px #fff, 105px 1717px #fff, 368px 728px #fff, 275px 417px #fff, 302px 1712px #fff, 770px 62px #fff, 176px 1505px #fff, 1087px 1778px #fff, 898px 1333px #fff, 447px 425px #fff, 885px 1494px #fff, 752px 396px #fff, 677px 1312px #fff, 448px 987px #fff, 84px 539px #fff, 688px 600px #fff, 684px 1171px #fff, 811px 986px #fff, 647px 1968px #fff, 436px 1999px #fff, 195px 1617px #fff, 627px 1835px #fff, 361px 1146px #fff, 604px 191px #fff, 355px 394px #fff, 58px 1886px #fff, 767px 1424px #fff, 195px 1371px #fff, 817px 583px #fff, 625px 1329px #fff, 403px 233px #fff, 931px 414px #fff, 683px 910px #fff, 825px 1615px #fff, 99px 1150px #fff, 241px 548px #fff, 202px 1788px #fff, 244px 1967px #fff, 397px 411px #fff, 686px 332px #fff, 311px 974px #fff, 118px 1020px #fff, 1048px 569px #fff, 762px 1254px #fff, 1004px 1302px #fff, 77px 1750px #fff, 229px 994px #fff, 282px 1632px #fff, 1019px 1993px #fff, 50px 521px #fff, 1003px 1567px #fff, 962px 714px #fff, 486px 22px #fff, 198px 768px #fff, 578px 913px #fff, 360px 92px #fff, 270px 255px #fff, 102px 1891px #fff, 422px 1615px #fff, 395px 1938px #fff, 611px 1411px #fff, 376px 1135px #fff, 931px 1143px #fff, 1051px 1073px #fff, 1031px 822px #fff, 464px 1073px #fff, 398px 1468px #fff, 945px 631px #fff, 956px 667px #fff, 273px 760px #fff, 252px 1070px #fff, 710px 1525px #fff, 392px 1930px #fff, 599px 1413px #fff, 776px 1187px #fff, 340px 86px #fff, 243px 1500px #fff, 870px 425px #fff, 288px 502px #fff, 779px 1807px #fff, 629px 419px #fff, 871px 1823px #fff, 628px 1109px #fff, 497px 1882px #fff, 551px 1505px #fff, 77px 67px #fff, 967px 1258px #fff, 561px 530px #fff, 1098px 414px #fff, 890px 1666px #fff, 745px 431px #fff, 821px 68px #fff, 908px 786px #fff, 406px 491px #fff, 439px 659px #fff, 707px 608px #fff, 754px 230px #fff, 442px 135px #fff, 510px 1812px #fff, 982px 1819px #fff, 1023px 925px #fff, 568px 1348px #fff, 371px 855px #fff, 69px 139px #fff, 988px 315px #fff, 608px 1655px #fff, 970px 1703px #fff, 11px 0px #fff, 567px 777px #fff, 558px 1551px #fff, 582px 615px #fff, 503px 1186px #fff, 629px 826px #fff, 477px 489px #fff, 291px 1733px #fff, 654px 1740px #fff, 196px 1372px #fff, 384px 42px #fff, 764px 1856px #fff, 1008px 1927px #fff, 626px 1379px #fff, 960px 1063px #fff, 531px 632px #fff, 793px 815px #fff, 437px 1135px #fff, 453px 1571px #fff, 841px 98px #fff, 496px 1964px #fff, 490px 98px #fff, 842px 1400px #fff, 662px 558px #fff, 221px 1631px #fff, 126px 671px #fff, 508px 1493px #fff, 1006px 1557px #fff, 875px 288px #fff, 97px 632px #fff, 640px 1635px #fff, 91px 1913px #fff, 837px 461px #fff, 902px 1118px #fff, 289px 156px #fff, 47px 1010px #fff, 969px 901px #fff, 556px 983px #fff, 979px 1366px #fff, 6px 1844px #fff, 694px 481px #fff, 345px 183px #fff, 952px 1759px #fff, 735px 116px #fff, 802px 1863px #fff, 659px 1267px #fff, 796px 414px #fff, 856px 448px #fff, 118px 1401px #fff, 913px 79px #fff, 844px 923px #fff, 822px 278px #fff, 1057px 1863px #fff, 652px 876px #fff, 490px 1138px #fff, 527px 1607px #fff, 186px 928px #fff, 114px 281px #fff, 628px 1784px #fff, 401px 256px #fff, 780px 959px #fff, 468px 563px #fff, 698px 697px #fff, 862px 1586px #fff, 641px 1708px #fff, 558px 1224px #fff, 901px 1680px #fff, 860px 701px #fff, 141px 381px #fff, 463px 1836px #fff, 532px 1664px #fff, 347px 238px #fff, 221px 1450px #fff, 635px 544px #fff, 922px 884px #fff, 402px 160px #fff, 1043px 193px #fff, 683px 1638px #fff, 995px 976px #fff, 721px 293px #fff, 893px 987px #fff, 319px 127px #fff, 523px 1230px #fff, 658px 642px #fff, 630px 1124px #fff, 121px 1584px #fff, 665px 246px #fff, 467px 1129px #fff, 1044px 1212px #fff, 364px 540px #fff, 287px 1115px #fff, 622px 1611px #fff, 796px 1217px #fff, 903px 1111px #fff, 650px 1752px #fff, 530px 1532px #fff, 153px 1323px #fff, 344px 304px #fff, 292px 971px #fff, 1093px 1476px #fff, 291px 872px #fff, 928px 1979px #fff, 369px 352px #fff, 943px 1049px #fff, 272px 1397px #fff, 728px 1640px #fff, 797px 999px #fff, 408px 1686px #fff, 987px 688px #fff, 26px 1023px #fff, 761px 1358px #fff, 384px 1475px #fff, 278px 989px #fff, 630px 331px #fff, 424px 1449px #fff, 195px 1511px #fff, 944px 1211px #fff, 1017px 708px #fff, 274px 1610px #fff, 145px 1543px #fff, 592px 1666px #fff, 345px 133px #fff, 200px 38px #fff, 105px 1736px #fff, 712px 1160px #fff, 368px 487px #fff, 150px 758px #fff, 847px 850px #fff, 609px 1056px #fff, 106px 1972px #fff, 609px 819px #fff, 201px 133px #fff, 197px 827px #fff, 335px 1053px #fff, 602px 331px #fff, 74px 704px #fff, 152px 1111px #fff, 294px 809px #fff, 588px 1765px #fff, 206px 666px #fff, 501px 510px #fff, 967px 1891px #fff, 735px 1068px #fff, 845px 875px #fff, 339px 2000px #fff, 538px 1456px #fff, 28px 1293px #fff, 493px 1891px #fff, 439px 1162px #fff, 36px 304px #fff, 215px 1838px #fff, 575px 1351px #fff, 385px 1004px #fff, 463px 704px #fff, 934px 328px #fff, 590px 957px #fff, 748px 1922px #fff, 477px 568px #fff, 731px 1355px #fff, 545px 1983px #fff, 954px 702px #fff, 768px 410px #fff, 887px 849px #fff, 85px 33px #fff, 948px 1092px #fff, 688px 1085px #fff, 966px 863px #fff, 163px 1045px #fff, 948px 1005px #fff, 1075px 1571px #fff, 56px 1px #fff, 491px 1031px #fff, 103px 806px #fff, 577px 1542px #fff, 813px 571px #fff, 179px 927px #fff, 502px 325px #fff, 912px 1234px #fff, 500px 802px #fff, 382px 1403px #fff, 1009px 1960px #fff, 471px 261px #fff, 1097px 561px #fff, 700px 72px #fff, 533px 1923px #fff, 561px 1423px #fff, 209px 52px #fff, 811px 817px #fff, 87px 952px #fff, 193px 913px #fff, 237px 1952px #fff, 1038px 957px #fff, 787px 1582px #fff, 619px 1910px #fff, 348px 147px #fff, 695px 759px #fff, 332px 1241px #fff, 588px 763px #fff, 556px 1805px #fff, 258px 243px #fff, 312px 518px #fff, 141px 139px #fff, 442px 996px #fff, 93px 623px #fff, 900px 445px #fff, 518px 208px #fff, 107px 1555px #fff, 781px 1071px #fff, 116px 91px #fff, 67px 1158px #fff, 407px 314px #fff, 526px 240px #fff, 915px 1143px #fff, 164px 178px #fff, 131px 152px #fff, 274px 660px #fff, 771px 1599px #fff, 591px 667px #fff, 250px 1682px #fff, 756px 1673px #fff, 100px 1779px #fff, 338px 1796px #fff, 887px 1727px #fff, 1017px 459px #fff, 963px 1610px #fff, 464px 1154px #fff, 1069px 1320px #fff, 48px 1670px #fff, 115px 1426px #fff, 718px 1895px #fff, 1063px 510px #fff, 454px 303px #fff, 115px 930px #fff, 297px 1170px #fff, 230px 1414px #fff, 803px 1281px #fff, 763px 168px #fff, 518px 986px #fff, 703px 1082px #fff, 597px 1354px #fff, 809px 1035px #fff, 720px 198px #fff, 787px 1147px #fff, 102px 308px #fff, 738px 3px #fff, 309px 1669px #fff, 510px 236px #fff, 1021px 274px #fff, 409px 1388px #fff, 729px 1722px #fff, 384px 1441px #fff, 700px 38px #fff, 531px 1370px #fff, 568px 813px #fff, 777px 590px #fff, 1068px 1457px #fff, 762px 431px #fff, 650px 403px #fff, 190px 1425px #fff, 867px 1182px #fff, 650px 1766px #fff, 520px 1113px #fff, 290px 1923px #fff, 490px 1144px #fff, 949px 1468px #fff, 128px 1767px #fff, 79px 1067px #fff, 613px 1751px #fff, 728px 1432px #fff, 1053px 688px #fff, 513px 527px #fff, 724px 1938px #fff, 1033px 891px #fff, 17px 1286px #fff, 433px 902px #fff, 649px 148px #fff, 1064px 1697px #fff, 629px 1808px #fff, 668px 761px #fff, 826px 1947px #fff, 19px 1478px #fff, 805px 65px #fff, 0px 173px #fff, 630px 447px #fff, 833px 871px #fff, 969px 891px #fff, 657px 1519px #fff, 364px 216px #fff, 104px 465px #fff, 172px 1837px #fff, 395px 787px #fff, 183px 888px #fff, 1056px 1447px #fff, 995px 1388px #fff, 565px 1091px #fff, 348px 1398px #fff, 194px 1119px #fff, 488px 878px #fff, 734px 856px #fff, 125px 1046px #fff, 575px 519px #fff, 382px 1798px #fff, 33px 1499px #fff, 671px 1182px #fff, 200px 1723px #fff, 695px 823px #fff, 1045px 1729px #fff, 304px 1315px #fff, 743px 1278px #fff, 406px 1535px #fff, 583px 1314px #fff, 42px 1320px #fff, 868px 1312px #fff, 342px 900px #fff, 340px 1145px #fff, 1051px 1127px #fff, 587px 415px #fff, 950px 157px #fff, 947px 1679px #fff, 77px 1417px #fff, 947px 1045px #fff, 693px 1871px #fff, 630px 372px #fff, 520px 1030px #fff, 840px 215px #fff, 264px 663px #fff, 52px 1673px #fff, 387px 1389px #fff, 979px 8px #fff, 96px 765px #fff, 1011px 63px #fff, 616px 584px #fff, 990px 286px #fff, 751px 206px #fff, 473px 1951px #fff, 500px 47px #fff, 779px 969px #fff, 497px 1343px #fff, 548px 1703px #fff, 700px 553px #fff, 771px 1937px #fff, 292px 1830px #fff, 616px 1012px #fff, 660px 277px #fff, 721px 1091px #fff, 1017px 1753px #fff, 399px 503px #fff, 707px 1470px #fff, 586px 1554px #fff, 582px 1627px #fff, 522px 1032px #fff, 516px 1088px #fff, 106px 563px #fff, 557px 466px #fff, 136px 1230px #fff, 380px 420px #fff, 728px 1605px #fff, 1003px 1647px #fff, 96px 920px #fff, 115px 225px #fff, 424px 21px #fff, 730px 1899px #fff, 892px 1791px #fff, 108px 1374px #fff, 794px 1820px #fff, 771px 362px #fff, 965px 937px #fff, 535px 1577px #fff, 606px 1213px #fff, 1002px 733px #fff, 284px 1585px #fff, 315px 1696px #fff, 603px 1223px #fff, 278px 271px #fff, 491px 1258px #fff, 942px 20px #fff, 797px 1973px #fff, 769px 1790px #fff, 550px 1089px #fff, 186px 716px #fff, 1045px 1850px #fff, 100px 1006px #fff, 956px 1332px #fff, 152px 1926px #fff, 716px 1522px #fff, 620px 1513px #fff, 935px 574px #fff, 264px 1975px #fff, 500px 1843px #fff, 717px 835px #fff, 17px 1405px #fff, 581px 105px #fff, 807px 1315px #fff, 99px 1849px #fff, 1066px 1311px #fff, 729px 1912px #fff, 1038px 409px #fff, 372px 456px #fff, 861px 378px #fff, 904px 499px #fff, 957px 456px #fff, 474px 91px #fff, 200px 844px #fff, 1089px 1535px #fff, 485px 372px #fff, 193px 1268px #fff, 784px 1738px #fff, 969px 275px #fff, 985px 383px #fff, 625px 1187px #fff, 1059px 1497px #fff, 521px 41px #fff, 1052px 558px #fff, 709px 419px #fff, 127px 798px #fff, 60px 1064px #fff, 919px 1761px #fff, 1015px 1624px #fff, 775px 739px #fff, 1001px 1281px #fff, 331px 191px #fff, 267px 645px #fff, 1089px 1675px #fff, 356px 1760px #fff, 96px 794px #fff, 903px 149px #fff, 295px 422px #fff, 785px 1212px #fff, 164px 1497px #fff, 485px 381px #fff, 790px 207px #fff, 787px 18px #fff, 726px 1392px #fff, 145px 1101px #fff, 190px 716px #fff, 1065px 245px #fff, 905px 348px #fff, 1023px 1409px #fff, 57px 1054px #fff, 403px 1555px #fff, 785px 1608px #fff, 282px 1981px #fff, 1024px 918px #fff, 517px 833px #fff, 69px 1978px #fff, 82px 44px #fff, 941px 1128px #fff, 713px 718px #fff, 513px 1729px #fff, 108px 1871px #fff, 838px 163px #fff, 603px 15px #fff, 378px 1580px #fff, 550px 1744px #fff, 888px 50px #fff, 123px 1756px #fff, 697px 861px #fff, 589px 767px #fff, 276px 672px #fff, 664px 558px #fff, 13px 852px #fff, 1px 1690px #fff, 608px 881px #fff, 923px 982px #fff, 777px 226px #fff, 488px 498px #fff, 253px 473px #fff, 431px 1329px #fff, 796px 1910px #fff, 707px 186px #fff, 950px 938px #fff, 69px 298px #fff, 666px 1633px #fff, 928px 944px #fff, 550px 1975px #fff, 751px 309px #fff, 864px 422px #fff, 309px 40px #fff, 524px 1323px #fff, 574px 900px #fff, 35px 1816px #fff, 723px 38px #fff, 661px 202px #fff, 966px 1262px #fff, 909px 1037px #fff, 287px 2000px #fff, 630px 1338px #fff, 494px 1289px #fff, 155px 244px #fff, 422px 1088px #fff, 216px 54px #fff, 717px 1011px #fff, 1010px 1492px #fff, 73px 403px #fff, 484px 1988px #fff, 926px 28px #fff, 886px 1446px #fff, 991px 1397px #fff, 241px 1304px #fff, 59px 373px #fff, 6px 839px #fff, 316px 1779px #fff, 6px 1357px #fff, 265px 324px #fff, 755px 381px #fff, 436px 687px #fff, 931px 676px #fff, 818px 1033px #fff, 878px 374px #fff, 884px 1543px #fff, 637px 1044px #fff, 709px 162px #fff, 944px 1863px #fff, 811px 1895px #fff, 55px 46px #fff, 430px 751px #fff, 1015px 985px #fff, 527px 1920px #fff, 275px 93px #fff, 723px 1426px #fff, 41px 492px #fff, 647px 1336px #fff, 763px 389px #fff, 287px 798px #fff, 30px 1342px #fff, 534px 1308px #fff, 985px 879px #fff, 652px 521px #fff, 677px 129px #fff, 20px 1943px #fff, 1068px 1624px #fff, 160px 278px #fff, 24px 1923px #fff, 956px 481px #fff, 206px 371px #fff, 879px 629px #fff, 258px 1593px #fff, 491px 337px #fff, 1021px 1633px #fff, 843px 1156px #fff, 476px 1583px #fff, 677px 668px #fff, 390px 109px #fff, 619px 905px #fff, 126px 802px #fff, 57px 1351px #fff, 1049px 1800px #fff, 612px 1033px #fff, 289px 408px #fff, 1044px 1476px #fff, 308px 402px #fff, 31px 38px #fff, 578px 1438px #fff, 495px 700px #fff, 280px 71px #fff, 366px 993px #fff, 882px 157px #fff, 284px 1423px #fff, 333px 969px #fff, 855px 232px #fff, 266px 1587px #fff, 401px 724px #fff, 80px 36px #fff, 43px 977px #fff, 757px 1383px #fff, 974px 31px #fff, 633px 1172px #fff, 453px 1312px #fff, 274px 147px #fff, 232px 1162px #fff, 12px 1547px #fff, 521px 1306px #fff, 895px 1295px #fff, 117px 347px #fff, 282px 1526px #fff, 870px 1264px #fff, 991px 1443px #fff, 386px 871px #fff, 683px 647px #fff, 668px 1213px #fff, 1014px 273px #fff, 885px 1417px #fff, 952px 966px #fff, 864px 371px #fff, 296px 1354px #fff, 293px 838px #fff, 742px 1681px #fff, 499px 1613px #fff, 862px 624px #fff, 169px 1801px #fff, 93px 1946px #fff, 239px 1531px #fff, 328px 973px #fff, 571px 225px #fff, 522px 1012px #fff, 867px 1385px #fff, 796px 1735px #fff, 696px 610px #fff, 382px 452px #fff, 819px 1091px #fff, 753px 583px #fff, 137px 1522px #fff, 242px 1015px #fff, 348px 666px #fff, 358px 693px #fff, 303px 397px #fff, 874px 1641px #fff, 226px 902px #fff, 999px 1887px #fff, 19px 1278px #fff, 30px 1763px #fff, 106px 1947px #fff, 925px 1470px #fff, 962px 1407px #fff, 827px 1580px #fff, 621px 1019px #fff, 1024px 1618px #fff, 169px 1236px #fff, 238px 1284px #fff, 141px 1274px #fff, 1024px 988px #fff, 258px 154px #fff, 386px 1028px #fff, 685px 1573px #fff, 7px 1497px #fff, 404px 1369px #fff, 349px 912px #fff, 980px 1921px #fff, 50px 252px #fff, 49px 65px #fff, 151px 1432px #fff, 647px 327px #fff, 937px 1543px #fff;
}
/* as três camadas ficam a 30%, bem discretas sobre o fundo escuro */
.login__stars .s1,
.login__stars .s2,
.login__stars .s3 { opacity: .3; }

.login__stars .s1 { top: 0; animation: starsRise 110s linear infinite; }
.login__stars .s1::after { content: ''; top: 2000px; }

.login__stars .s2,
.login__stars .s2::after {
  position: absolute;
  left: 0;
  width: 1.5px;
  height: 1.5px;
  background: transparent;
  border-radius: 50%;
  box-shadow: 166px 964px #fff, 850px 131px #fff, 63px 690px #fff, 564px 557px #fff, 353px 680px #fff, 708px 902px #fff, 200px 411px #fff, 278px 125px #fff, 231px 1057px #fff, 824px 607px #fff, 641px 485px #fff, 813px 433px #fff, 6px 1352px #fff, 414px 1042px #fff, 303px 1264px #fff, 295px 1383px #fff, 884px 1703px #fff, 170px 869px #fff, 487px 1094px #fff, 29px 749px #fff, 524px 950px #fff, 781px 317px #fff, 681px 542px #fff, 874px 1339px #fff, 708px 1040px #fff, 8px 1101px #fff, 94px 548px #fff, 586px 1495px #fff, 901px 378px #fff, 179px 471px #fff, 874px 774px #fff, 384px 1377px #fff, 848px 420px #fff, 958px 1201px #fff, 309px 1273px #fff, 880px 374px #fff, 387px 720px #fff, 1011px 1858px #fff, 148px 706px #fff, 777px 1424px #fff, 60px 1179px #fff, 249px 291px #fff, 974px 1169px #fff, 572px 446px #fff, 393px 594px #fff, 758px 1942px #fff, 598px 646px #fff, 850px 1298px #fff, 1004px 383px #fff, 416px 1445px #fff, 693px 1503px #fff, 147px 554px #fff, 775px 1539px #fff, 985px 238px #fff, 123px 1892px #fff, 609px 319px #fff, 414px 1636px #fff, 989px 902px #fff, 425px 555px #fff, 741px 152px #fff, 754px 682px #fff, 785px 1402px #fff, 877px 1466px #fff, 47px 939px #fff, 1078px 1128px #fff, 1028px 1442px #fff, 154px 1553px #fff, 584px 1768px #fff, 807px 947px #fff, 585px 851px #fff, 772px 95px #fff, 569px 921px #fff, 95px 268px #fff, 977px 697px #fff, 586px 1873px #fff, 35px 1151px #fff, 84px 34px #fff, 360px 100px #fff, 1068px 1789px #fff, 73px 459px #fff, 142px 1298px #fff, 92px 1393px #fff, 785px 1261px #fff, 67px 377px #fff, 523px 505px #fff, 617px 378px #fff, 121px 477px #fff, 581px 1746px #fff, 195px 1834px #fff, 827px 460px #fff, 509px 1561px #fff, 673px 715px #fff, 676px 916px #fff, 950px 826px #fff, 899px 1018px #fff, 504px 1530px #fff, 515px 1493px #fff, 704px 1348px #fff, 672px 474px #fff, 348px 928px #fff, 455px 153px #fff, 625px 452px #fff, 948px 649px #fff, 1047px 1774px #fff, 321px 543px #fff, 1037px 1472px #fff, 598px 1046px #fff, 118px 1774px #fff, 652px 922px #fff, 494px 1254px #fff, 190px 1113px #fff, 942px 940px #fff, 20px 1040px #fff, 551px 88px #fff, 377px 61px #fff, 225px 1460px #fff, 897px 1697px #fff, 999px 871px #fff, 311px 1041px #fff, 769px 561px #fff, 258px 854px #fff, 912px 1100px #fff, 516px 1874px #fff, 881px 473px #fff, 317px 2px #fff, 883px 1764px #fff, 145px 627px #fff, 121px 1540px #fff, 17px 234px #fff, 616px 1933px #fff, 82px 1799px #fff, 1093px 272px #fff, 258px 1760px #fff, 184px 1328px #fff, 957px 607px #fff, 558px 1684px #fff, 784px 1850px #fff, 790px 533px #fff, 1007px 463px #fff, 138px 848px #fff, 539px 1715px #fff, 269px 749px #fff, 103px 1903px #fff, 511px 633px #fff, 512px 1389px #fff, 727px 1292px #fff, 41px 1862px #fff, 350px 847px #fff, 297px 1533px #fff, 98px 993px #fff, 235px 31px #fff, 260px 644px #fff, 405px 1839px #fff, 1025px 1580px #fff, 311px 279px #fff, 966px 651px #fff, 460px 1166px #fff, 972px 1093px #fff, 979px 1829px #fff, 962px 1779px #fff, 861px 1574px #fff, 698px 1622px #fff, 726px 1944px #fff, 419px 1351px #fff, 871px 1040px #fff, 680px 1927px #fff, 712px 1616px #fff, 185px 595px #fff, 177px 1778px #fff, 377px 1350px #fff, 491px 1132px #fff, 321px 1680px #fff, 429px 1448px #fff, 1034px 1941px #fff, 947px 1334px #fff, 761px 1920px #fff, 913px 1794px #fff, 208px 1022px #fff, 148px 285px #fff, 144px 1834px #fff, 556px 1905px #fff, 295px 211px #fff, 334px 432px #fff, 943px 194px #fff, 846px 1431px #fff, 497px 43px #fff, 0px 140px #fff, 705px 504px #fff, 659px 1886px #fff, 21px 1145px #fff, 225px 1481px #fff, 716px 1637px #fff, 941px 1843px #fff, 599px 485px #fff, 56px 1797px #fff, 462px 556px #fff, 83px 552px #fff, 1015px 1101px #fff, 682px 1010px #fff, 815px 500px #fff, 129px 519px #fff, 310px 1540px #fff, 50px 1243px #fff, 710px 1182px #fff, 621px 1114px #fff, 230px 689px #fff, 1044px 1997px #fff, 814px 859px #fff, 814px 1571px #fff, 180px 618px #fff, 46px 1495px #fff, 730px 1281px #fff, 327px 1055px #fff, 522px 1205px #fff, 169px 1679px #fff, 230px 1376px #fff, 457px 721px #fff, 1088px 1329px #fff, 138px 1822px #fff, 413px 1027px #fff, 1008px 553px #fff, 868px 722px #fff, 952px 1585px #fff, 111px 1840px #fff, 418px 1653px #fff, 673px 271px #fff, 58px 1754px #fff, 520px 566px #fff, 307px 1990px #fff, 338px 1979px #fff, 843px 1320px #fff, 744px 208px #fff, 84px 1523px #fff, 667px 540px #fff, 556px 541px #fff, 390px 126px #fff, 288px 1797px #fff, 364px 141px #fff, 118px 1339px #fff, 790px 1953px #fff, 1041px 1388px #fff, 270px 13px #fff, 1094px 173px #fff, 716px 1632px #fff, 802px 1561px #fff, 481px 1100px #fff, 715px 1928px #fff, 249px 1013px #fff, 83px 981px #fff, 324px 1433px #fff, 400px 700px #fff, 744px 131px #fff, 693px 391px #fff, 823px 1258px #fff, 133px 701px #fff, 952px 916px #fff, 160px 232px #fff, 660px 1251px #fff, 469px 1798px #fff, 894px 409px #fff, 140px 1067px #fff, 815px 1008px #fff, 453px 807px #fff, 106px 1846px #fff, 240px 444px #fff, 1056px 1096px #fff, 967px 1850px #fff, 263px 1828px #fff, 187px 275px #fff, 209px 1972px #fff, 1004px 263px #fff, 278px 467px #fff, 200px 1699px #fff, 403px 67px #fff, 346px 1689px #fff, 963px 63px #fff, 814px 1577px #fff, 600px 506px #fff, 671px 458px #fff, 807px 105px #fff, 629px 988px #fff, 29px 1280px #fff, 998px 257px #fff, 991px 496px #fff, 775px 1987px #fff, 139px 1499px #fff, 603px 867px #fff, 468px 277px #fff, 997px 633px #fff, 163px 1062px #fff, 688px 556px #fff, 151px 620px #fff, 683px 1468px #fff, 9px 1594px #fff, 797px 1659px #fff, 652px 1397px #fff, 12px 1120px #fff, 83px 2000px #fff, 364px 1125px #fff, 735px 1943px #fff, 837px 1234px #fff, 319px 686px #fff, 725px 3px #fff, 1014px 1345px #fff, 465px 869px #fff, 657px 1079px #fff, 855px 807px #fff, 644px 549px #fff, 331px 485px #fff, 635px 855px #fff, 621px 612px #fff, 903px 1837px #fff, 848px 342px #fff, 661px 1031px #fff, 720px 947px #fff, 500px 930px #fff, 210px 324px #fff, 569px 997px #fff, 1058px 1142px #fff, 546px 1834px #fff, 1009px 310px #fff, 612px 259px #fff, 914px 1375px #fff, 190px 408px #fff, 742px 1924px #fff, 54px 749px #fff, 877px 600px #fff, 166px 1401px #fff, 591px 192px #fff, 85px 715px #fff, 17px 1956px #fff, 489px 1470px #fff, 1081px 986px #fff, 88px 361px #fff, 766px 174px #fff, 117px 62px #fff, 686px 22px #fff, 843px 1429px #fff, 862px 1298px #fff, 200px 1791px #fff, 504px 1835px #fff, 826px 886px #fff, 1041px 12px #fff, 676px 1247px #fff, 953px 1842px #fff, 328px 246px #fff, 1029px 1994px #fff, 1033px 1236px #fff, 736px 1802px #fff, 133px 263px #fff, 527px 1139px #fff, 278px 1405px #fff, 288px 337px #fff, 374px 460px #fff, 174px 643px #fff, 60px 1220px #fff, 279px 149px #fff, 767px 367px #fff, 333px 1966px #fff, 251px 695px #fff, 957px 1072px #fff, 1044px 541px #fff, 798px 458px #fff, 1096px 814px #fff, 410px 660px #fff, 900px 1091px #fff, 630px 1741px #fff, 682px 713px #fff, 374px 681px #fff, 1037px 1234px #fff, 812px 1827px #fff, 1041px 414px #fff, 584px 1477px #fff, 263px 1593px #fff, 11px 398px #fff, 310px 636px #fff, 366px 1363px #fff, 188px 1973px #fff, 643px 322px #fff, 1031px 1631px #fff;
}
.login__stars .s2 { top: 0; animation: starsRise 160s linear infinite; }
.login__stars .s2::after { content: ''; top: 2000px; }

.login__stars .s3,
.login__stars .s3::after {
  position: absolute;
  left: 0;
  width: 2px;
  height: 2px;
  background: transparent;
  border-radius: 50%;
  box-shadow: 991px 1951px #fff, 340px 1292px #fff, 410px 1606px #fff, 1074px 1879px #fff, 272px 867px #fff, 47px 1948px #fff, 568px 1545px #fff, 929px 1785px #fff, 449px 459px #fff, 133px 1640px #fff, 559px 1698px #fff, 750px 1748px #fff, 107px 520px #fff, 594px 532px #fff, 252px 914px #fff, 1041px 357px #fff, 1085px 1544px #fff, 870px 689px #fff, 389px 928px #fff, 1085px 847px #fff, 242px 1498px #fff, 1094px 651px #fff, 731px 883px #fff, 347px 45px #fff, 225px 1465px #fff, 834px 1347px #fff, 571px 165px #fff, 8px 1751px #fff, 932px 1548px #fff, 1089px 27px #fff, 162px 485px #fff, 1000px 1136px #fff, 586px 1555px #fff, 501px 217px #fff, 790px 1693px #fff, 980px 613px #fff, 643px 1592px #fff, 759px 1258px #fff, 1059px 792px #fff, 623px 743px #fff, 251px 1017px #fff, 322px 810px #fff, 734px 897px #fff, 929px 1351px #fff, 356px 1277px #fff, 1058px 1246px #fff, 530px 311px #fff, 822px 1335px #fff, 582px 1220px #fff, 89px 1567px #fff, 684px 313px #fff, 745px 1118px #fff, 512px 818px #fff, 127px 640px #fff, 764px 1303px #fff, 1054px 1456px #fff, 886px 1943px #fff, 141px 1583px #fff, 1088px 239px #fff, 238px 718px #fff, 467px 1197px #fff, 233px 1426px #fff, 838px 427px #fff, 916px 551px #fff, 392px 686px #fff, 164px 1367px #fff, 941px 1634px #fff, 998px 132px #fff, 764px 1798px #fff, 528px 1406px #fff, 1043px 1473px #fff, 659px 1971px #fff, 119px 885px #fff, 492px 969px #fff, 579px 1758px #fff, 422px 599px #fff, 790px 1182px #fff, 520px 1164px #fff, 445px 4px #fff, 64px 1190px #fff, 647px 787px #fff, 34px 865px #fff, 1025px 108px #fff, 656px 668px #fff, 636px 426px #fff, 239px 1709px #fff, 902px 180px #fff, 104px 1280px #fff, 426px 621px #fff, 887px 1997px #fff, 973px 1621px #fff, 497px 1125px #fff, 706px 234px #fff, 144px 9px #fff, 127px 293px #fff, 578px 983px #fff, 737px 1293px #fff, 590px 1763px #fff, 127px 1639px #fff, 569px 1880px #fff, 52px 1332px #fff, 277px 1260px #fff, 613px 182px #fff, 740px 698px #fff, 630px 924px #fff, 371px 142px #fff, 151px 1940px #fff, 634px 1635px #fff, 1056px 1270px #fff, 179px 496px #fff, 1046px 1218px #fff, 1041px 1370px #fff, 1017px 850px #fff, 1057px 751px #fff, 259px 1955px #fff, 241px 266px #fff, 55px 630px #fff, 671px 542px #fff, 240px 1435px #fff, 902px 1337px #fff, 1029px 1982px #fff, 492px 911px #fff, 699px 348px #fff, 993px 1240px #fff, 345px 487px #fff, 23px 1029px #fff, 684px 92px #fff, 682px 1498px #fff, 367px 1125px #fff, 899px 601px #fff, 13px 373px #fff, 82px 1456px #fff, 304px 1854px #fff, 474px 1128px #fff, 831px 1760px #fff, 420px 708px #fff, 1024px 1349px #fff, 659px 899px #fff, 508px 1003px #fff, 680px 511px #fff, 903px 1287px #fff, 671px 148px #fff, 782px 525px #fff, 171px 287px #fff, 120px 85px #fff, 389px 902px #fff, 469px 257px #fff, 225px 855px #fff, 910px 233px #fff, 123px 609px #fff, 501px 691px #fff, 267px 383px #fff, 971px 497px #fff, 585px 546px #fff, 1040px 1827px #fff, 995px 735px #fff, 926px 1960px #fff, 560px 1046px #fff, 857px 159px #fff, 399px 1994px #fff, 215px 1901px #fff, 969px 511px #fff, 1039px 421px #fff, 1085px 217px #fff, 197px 412px #fff, 1043px 1098px #fff, 789px 191px #fff, 577px 149px #fff, 825px 375px #fff, 665px 1518px #fff;
}
.login__stars .s3 { top: 0; animation: starsRise 210s linear infinite; }
.login__stars .s3::after { content: ''; top: 2000px; }

@keyframes starsRise {
  from { transform: translateY(0); }
  to   { transform: translateY(-2000px); }
}

@media (prefers-reduced-motion: reduce) {
  .login__stars .s1,
  .login__stars .s2,
  .login__stars .s3 { animation: none; }
}

/* conteúdo acima das estrelas */
.login__brand-copy,
.login__fan,
.login__caption { position: relative; z-index: 1; }

.login__brand-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.login__eyebrow {
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
}

.login__title {
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 40px;
}

.login__fan {
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 623 / 627;
  max-height: 56vh;
}

/* sombra no chão, entra depois que o leque abre */
.login__fan::after {
  content: '';
  position: absolute;
  left: 4%;
  bottom: 2%;
  width: 92%;
  height: 9%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 70%);
  opacity: 0;
  animation: fanShadow .7s ease .95s forwards;
}

.fan__item {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  height: var(--h);
}
/* o estado FECHADO é só do login: lá o leque abre na entrada. O mesmo leque na
   galeria nasce aberto e fecha na saída (ver .gal__fan) */
.login__fan .fan__item {
  transform: translateX(var(--cx));
  animation: fanOut 1.15s cubic-bezier(.22, 1, .36, 1) var(--d) both;
}

.fan__item img { width: 100%; height: 100%; object-fit: contain; }

@keyframes fanOut {
  from { transform: translateX(var(--cx)); }
  to   { transform: translateX(0); }
}

@keyframes fanShadow { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .fan__item { animation: none; transform: none; }
  .login__fan::after { animation: none; opacity: 1; }
}

.login__caption span { color: #fff; }

.login__caption {
  color: #8d8a9c;
  font-size: 13px;
  font-weight: 300;
}

.login__form-panel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 40px 24px;
}

.login__form {
  width: 400px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.login__logo { width: 200px; height: auto; }

.login__headline { text-align: center; display: flex; flex-direction: column; gap: 10px; }
.login__headline h2 { color: var(--ink); font-size: 30px; font-weight: 700; }
.login__headline p { color: #777; font-size: 14px; line-height: 24px; }

.login__fields { width: 100%; display: flex; flex-direction: column; gap: 14px; }

.login__label {
  color: #999;
  font-size: 11px;
  font-weight: 600;
}

.login__input-wrap {
  height: 56px;
  background: #f5f5f5;
  border-radius: 100px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  transition: box-shadow .2s;
}
.login__input-wrap:focus-within { box-shadow: 0 0 0 2px rgba(245, 135, 79, .35); }
.login__input-wrap.error { box-shadow: 0 0 0 2px rgba(220, 60, 60, .45); animation: shake .4s; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-4px); }
}

.login__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
}
.login__input::placeholder { color: #bbb; }

.login__show {
  color: #999;
  font-size: 10px;
  font-weight: 600;
  flex-shrink: 0;
}

.login__submit {
  height: 56px;
  border-radius: 100px;
  background: var(--orange);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: filter .2s, transform .15s;
}
.login__submit:hover { filter: brightness(1.06); }
.login__submit:active { transform: scale(.985); }

.login__note {
  color: #999;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
.login__note.error { color: #d33c3c; }

.login__cta { color: #777; font-size: 14px; }
.login__cta a { color: var(--orange); font-weight: 600; text-decoration: none; }

/* =========================================================
   VIEWER / DECK
   ========================================================= */
.viewer {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.viewer[hidden] { display: none; }

/* deck fluido: ocupa a janela inteira e respira pelo --gutter,
   em vez de um palco fixo de 1440 escalado (que deixava faixas nas laterais) */
.stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.track {
  display: flex;
  height: 100%;
  transition: transform .55s cubic-bezier(.65, 0, .25, 1);
}

.slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--slide-bg, #fff);
}

/* ---------- 02 · carregando ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #1a1d2a;
  display: grid;
  place-items: center;
  transform: translateY(0);
  transition: transform .9s cubic-bezier(.76, 0, .24, 1);
}

.loader[hidden] { display: none; }
.loader.is-out { transform: translateY(-100%); }

.loader__count {
  position: absolute;
  color: rgba(255, 255, 255, .05);
  font-size: clamp(120px, 19.4vw, 280px);
  font-weight: 600;
  line-height: 1;
  user-select: none;
}

.loader__mark {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 20px;
}

.loader__mark img { width: min(470px, 62vw); height: auto; }

.loader__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--orange);
  margin-bottom: 4px;
}

/* o arco que varre a tela na saída, como no goats */
.loader__curve {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 12vh;
  fill: #1a1d2a;
}

/* ---------- 01 · hero vídeo ---------- */
.slide--hero { background: transparent; }

/* fora do palco: sangra a janela inteira, sem barras nas laterais */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.hero-bg.on { opacity: 1; }

.hero__pause {
  position: absolute;
  left: var(--gutter);
  bottom: 84px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .08);
}

/* topbar clara com a pílula branca (hero e capa).
   O conteúdo padrão é branco (feito pros slides escuros), então some
   dentro da pílula: aqui ele volta pro escuro. */
/* o atributo hidden sozinho não vence o display:flex das regras acima */
.topbar[hidden],
.slide-footer[hidden] { display: none; }
/* no recuo da capa o painel continua sólido, então a topbar não pode sumir de
   estalo em cima dele: sai por fade antes de o slide trocar */
.topbar,
.slide-footer { transition: opacity .22s ease; }

.topbar--pill .topbar__right {
  background: #fff;
  border-radius: 100px;
  padding: 12px 24px 12px 20px;
  gap: 20px;
}

.topbar--pill .pedido-pill {
  background: rgba(0, 0, 0, .05);
  color: var(--ink);
}
.topbar--pill .pedido-pill:hover { background: rgba(0, 0, 0, .1); }

/* nos slides de produto o JS injeta --badge-pill-*; nas demais telas as vars
   não existem e o selo volta para o laranja da marca */
.topbar--pill .topbar__baixar,
.topbar--pill .topbar__badge {
  background: var(--badge-pill-bg, var(--orange-soft));
  color: var(--badge-pill-tx, var(--orange));
  transition: background .45s ease, color .45s ease;
}
.topbar--pill .topbar__badge .dot {
  background: var(--badge-pill-tx, var(--orange));
  transition: background .45s ease;
}

/* Variante só do slide 1: a pílula perde o selo e o SAIR e vira
   "VER CATÁLOGO" + o ano. */
.pedido-pill__ver,
.topbar__year { display: none; }
.topbar--hero .pedido-pill__pedido,
.topbar--hero .topbar__baixar,
.topbar--hero .topbar__badge,
.topbar--hero .topbar__sair { display: none; }
.topbar--hero .pedido-pill__ver { display: inline; }
/* sem a sacola, o botão do hero volta a ser cápsula de texto */
.topbar--hero .pedido-pill {
  width: auto;
  height: auto;
  padding: 8px 14px;
  border-radius: 100px;
}
.topbar--hero .topbar__year {
  display: inline;
  font-size: 20px;
  font-weight: 900;
  color: var(--orange);
}
/* o degradê só entra onde dá para recortar no texto; sem o @supports,
   color:transparent apagaria o ano */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .topbar--hero .topbar__year {
    background-image: linear-gradient(114.17deg, #f5874f 14.878%, #fa995a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.topbar--pill .topbar__sair { color: rgba(17, 17, 17, .45); }
.topbar--pill .topbar__sair:hover { color: var(--ink); }

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange-soft);
  border-radius: 100px;
  padding: 10px 18px;
  color: var(--orange);
  font-size: 11px;
  font-weight: 600;
}
.badge-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

/* ---------- galeria ---------- */
.slide--galeria { background: transparent; }

/* fundo do deck: duas camadas alternadas fazem a cor trocar por crossfade
   em toda a janela, sem o corte duro do deslize horizontal */
.deck-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.deck-bg.on { opacity: 1; }

/* mosaico fora do palco: ocupa a janela inteira, sem faixas nas laterais */
.gal-bg {
  position: absolute;
  inset: 0;
  background: #0a0a0d;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.gal-bg.on { opacity: 1; }

/* saída da galeria (ref. showreel do Mōno): medindo o site deles, o mosaico
   inteiro é UMA escala só a partir do centro — as células não se movem
   individualmente, mantêm as posições relativas e as de fora saem do quadro
   enquanto a do meio cresce. Origem e fator vêm do JS, calculados da própria
   célula do reel, para continuarem certos se o mosaico mudar. */
.gal-bg__board {
  position: absolute;
  inset: 0;
  transform-origin: var(--reel-x, 50%) var(--reel-y, 50%);
  transition: transform .45s cubic-bezier(.5, 0, .3, 1);
  will-change: transform;
}
.gal-bg__board.is-zooming { transform: scale(var(--reel-scale, 3)); }
/* volta ao tamanho normal sem animar, depois que a camada já sumiu */
.gal-bg__board.no-anim { transition: none; }

.gal__cell {
  position: absolute;
  border-radius: 8px;
  overflow: hidden;
  background: #1b1a23;
}
.gal__cell img,
.gal__cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.gal__cell:hover img,
.gal__cell:hover video { transform: scale(1.035); }

/* célula do meio: deixou de ser a imagem com o play e virou o leque dos 7
   frascos, no fundo escuro que a arte tinha */
.gal__cell--fan {
  background: radial-gradient(ellipse 90% 85% at 50% 38%, #1f2132 0%, #0b0b12 62%, #050508 100%);
}
.gal__fan {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 86%;
  aspect-ratio: 623 / 627;
}
/* precisa vencer .gal__cell img, que é cover e cortaria os frascos */
.gal__fan .fan__item img { object-fit: contain; }
.gal__cell--fan:hover img { transform: none; }

@keyframes fanIn {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--cx)); }
}
/* fecha junto com o zoom: entra 200ms depois e termina com ele, então o último
   quadro antes do corte já é um frasco só — o Noir, que é o slide seguinte */
.gal__fan.is-closing .fan__item {
  animation: fanIn .35s cubic-bezier(.6, 0, .3, 1) both;
  animation-delay: calc(.1s + var(--dc, 0s));
}
/* estado fechado parado, sem animar: é por onde a VOLTA começa */
.gal__fan.is-closed .fan__item { transform: translateX(var(--cx)); }
.gal__fan.no-anim .fan__item { animation: none; }
/* e o leque reabre, agora do centro para fora, como no login */
.gal__fan.is-opening .fan__item {
  animation: fanOut .4s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: var(--do, 0s);
}

/* ---------- slide de produto ---------- */
.slide--product {
  /* tokens do tema escuro padrão */
  --tx-body: rgba(255, 255, 255, .72);
  --tx-meta: rgba(255, 255, 255, .45);
  --tx-label: rgba(255, 255, 255, .5);
  --tx-price-label: rgba(255, 255, 255, .6);
  --card-bg: rgba(255, 255, 255, .07);
  --badge-bg: rgba(255, 255, 255, .08);
  --tx-sair: rgba(255, 255, 255, .55);
  --tx-page: rgba(255, 255, 255, .55);
  --tx-fline: rgba(255, 255, 255, .4);
  --arrow-bd: rgba(255, 255, 255, .25);
  --eyebrow: rgba(255, 255, 255, .75);
}
.slide--bright {
  /* fundos claros (teal, verde, azul-claro, sage) */
  --tx-body: rgba(255, 255, 255, .85);
  --tx-meta: rgba(255, 255, 255, .62);
  --tx-label: rgba(255, 255, 255, .68);
  --tx-price-label: rgba(255, 255, 255, .75);
  --card-bg: rgba(255, 255, 255, .14);
  --badge-bg: rgba(255, 255, 255, .15);
  --tx-sair: rgba(255, 255, 255, .7);
  --tx-page: rgba(255, 255, 255, .7);
  --tx-fline: rgba(255, 255, 255, .55);
  --arrow-bd: rgba(255, 255, 255, .45);
  --eyebrow: rgba(255, 255, 255, .85);
}

/* marca d'água igual em todos os produtos: #111 a 10%, soft light, 200px e
   sem entreletra. Centraliza pelo próprio centro, já que mudar corpo e
   entreletra altera a largura do texto e invalidaria offsets fixos. */
.wm {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 200px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  color: rgba(17, 17, 17, .10);
  mix-blend-mode: soft-light;
  user-select: none;
  pointer-events: none;
}
.wm-l { display: inline-block; }

/* todo frasco é centrado no quadro (648+145/2 = 720 no projeto original),
   então centralizar por margem vale para todos e acompanha qualquer largura */
.bottle {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: calc(var(--b-w) / -2);
  margin-top: calc(var(--b-h) / -2);
  width: var(--b-w);
  height: var(--b-h);
  /* contra-parallax sutil, direção oposta ao wm */
  transform: translate3d(var(--bx, 0px), var(--by, 0px), 0);
  transition: transform 1.3s cubic-bezier(.16, .6, .18, 1);
  will-change: transform;
}
/* .bottle--center-y virou redundante: todo frasco já centraliza pela margem */

/* flutuação suave: vai no <img> porque o transform do .bottle é do parallax */
@keyframes bottleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-15px); }
}
.slide--product .bottle > img {
  animation: bottleFloat 6.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .slide--product .bottle > img { animation: none; }
}
.bottle > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.bottle--duo > img.blend { mix-blend-mode: multiply; }
.bottle--crop { overflow: hidden; }
.bottle--crop > img {
  /* recorte do Power Skin, valores do Figma */
  inset: auto;
  left: 0;
  top: -34.15%;
  width: 99.06%;
  height: 159.35%;
  object-fit: fill;
}

/* topbar */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 6;
}
.topbar__logo { width: 208px; height: auto; }
.topbar__right { display: flex; align-items: center; gap: 24px; }

/* o "PEDIDO · N" em texto virou uma sacola com balão de quantidade: é o
   gesto que todo mundo já conhece de loja, e cabe num botão redondo */
.pedido-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255, 255, 255, .12);
  border-radius: 50%;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s;
}
.pedido-pill:hover { background: rgba(255, 255, 255, .22); }
.pedido-pill__pedido { display: block; line-height: 0; }
.ico { display: block; width: 19px; height: 19px; }
.ico--sair { width: 16px; height: 16px; }

/* o balão encosta no canto da sacola. Com o pedido vazio ele some: um zero
   laranja pisca atenção sem ter o que mostrar */
.pedido-pill__bolha {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4.5px;
  border-radius: 100px;
  background: var(--orange);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.pedido-pill--vazio .pedido-pill__bolha { display: none; }

/* o botão de baixar substituiu o selo REVENDEDOR: mesma cápsula, agora clicável */
.topbar__baixar { position: relative; cursor: pointer; border: 0; font: inherit; }
.topbar__baixar,
.topbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--badge-bg);
  border-radius: 100px;
  padding: 10px 18px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
/* o BAIXAR CATÁLOGO é a única cápsula sem entreletra (pedido da Ge) */
.topbar__badge { }
.topbar__badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent, var(--gold)); }

.topbar__sair {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--tx-sair);
  font-size: 11px;
  font-weight: 600;
}
.topbar__sair:hover { color: #fff; }

/* copy à esquerda */
.left-copy {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 4;
}
.left-copy__eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--eyebrow);
}
/* micro estrelinhas só nos Petsplash: três camadas de pontos em ritmos
   diferentes, o que evita o padrão ficar óbvio */
.slide--petsplash::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px   at 74% 14%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 63%, rgba(255,255,255,.5),  transparent 60%),
    radial-gradient(1px 1px   at 9%  71%, rgba(255,255,255,.4),  transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 86%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1px 1px   at 63% 47%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 52%, rgba(255,255,255,.3),  transparent 60%),
    radial-gradient(1px 1px   at 95% 31%, rgba(255,255,255,.4),  transparent 60%);
  background-repeat: repeat;
  background-size: 620px 520px, 430px 380px, 760px 640px, 520px 470px,
                   680px 560px, 390px 340px, 590px 500px, 470px 410px;
  animation: twinkle 7s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .slide--petsplash::before { animation: none; opacity: .8; }
}

.slide--petsplash .left-copy__eyebrow { color: var(--gold); }
.left-copy__title { color: #fff; font-size: 28px; font-weight: 700; line-height: 36px; }
.left-copy__desc { color: var(--tx-body); font-size: 15px; line-height: 25px; text-align: justify; }
.left-copy__meta { color: var(--tx-meta); font-size: 12.5px; line-height: 20px; }

/* card de info */
.info-card {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  width: 330px;
  background: var(--card-bg);
  border-radius: 20px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  z-index: 5;
}
.info-card__label {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--tx-label);
}
.info-card__insp { font-size: 19px; font-weight: 500; color: var(--card-accent, var(--gold)); }
.info-card__ind { font-size: 17px; font-weight: 500; color: #fff; }

.fix-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  font-weight: 600;
}
.fix-row .l { color: var(--tx-label); }
.fix-row .v { color: var(--card-accent, var(--gold)); }

.fix-bar { width: 100%; display: flex; gap: 5px; }
.fix-bar span { flex: 1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.fix-bar span.on { background: var(--card-accent, var(--gold)); }

.info-card__pdv { font-size: 13px; color: var(--tx-label); }
.info-card__price-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--tx-price-label);
}
.slide--petsplash .info-card__price-label { color: var(--card-accent, var(--gold)); }

.price-row { display: flex; align-items: baseline; gap: 6px; }
.price-row .p { color: #fff; font-size: 34px; font-weight: 700; }
.price-row .u { color: var(--tx-label); font-size: 14px; }

/* Os dois invólucros do card só existem para a barra de compra do celular
   virar duas colunas. Fora dela eles somem da caixa: o card segue sendo o
   mesmo flex de sempre, com os filhos diretos que sempre teve. */
.ic__info, .ic__preco { display: contents; }

.order-row { display: flex; align-items: center; gap: 10px; width: 100%; }

.stepper {
  width: 104px;
  height: 44px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: #fff;
}
.stepper button {
  color: #fff;
  font-size: 16px;
  width: 22px;
  height: 100%;
  flex-shrink: 0;
}
.stepper .q { font-size: 15px; font-weight: 600; min-width: 20px; text-align: center; }

.btn-add {
  width: 150px;
  height: 44px;
  border-radius: 100px;
  background: #fff;
  color: #17141c;
  font-size: 11.5px;
  font-weight: 600;
  transition: transform .15s, background .2s;
  white-space: nowrap;
}
.btn-add:active { transform: scale(.97); }
.btn-add.ok { background: var(--orange); color: #fff; }

/* rodapé do slide */
.slide-footer {
  position: absolute;
  left: 0;
  bottom: 20px;      /* ancorado na base da janela, não nos 900px do palco */
  width: 100%;
  height: 80px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 6;
}
/* o rodapé vive fora do slide, então as cores ficam nele mesmo:
   branco nas telas escuras e escuro na variante clara */
.slide-footer__page {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.slide-footer__line {
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  white-space: pre;
}

.slide-footer--light .slide-footer__page { color: #999; }
.slide-footer--light .slide-footer__line { color: var(--ink); }
.slide-footer__line .on { color: var(--accent, var(--gold)); }
.slide-footer__arrows { display: flex; gap: 12px; }

.arrow {
  width: 52px;
  height: 52px;
  border-radius: 100px;
  border: 1px solid var(--arrow-bd, rgba(255, 255, 255, .25));
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
.arrow:hover { background: rgba(255, 255, 255, .12); }

/* setas flutuantes (capa/galeria + mobile) */
/* passagem automática: barra de progresso no pé da galeria. O trilho fica
   visível o tempo todo enquanto conta, senão o laranja sozinho parece um risco
   perdido na borda em vez de um progresso. */
.seq-progresso {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, .16);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.seq-progresso::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
}
.seq-progresso.on { opacity: 1; }
.seq-progresso.on::after { animation: seqAndando 1.5s linear forwards; }
@keyframes seqAndando { to { transform: scaleX(1); } }

/* anel que sai das laterais e some. Vive num filho absoluto porque em <button>
   o ::after é traiçoeiro, e assim o currentColor acompanha a cor do slide. */
.pulso {
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: 100px;
  opacity: 0;
  pointer-events: none;
  animation: pulso 2.6s ease-out infinite;
}
@keyframes pulso {
  0%   { transform: scale(1);    opacity: .5; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }

/* a seta some para o lado que aponta; a contagem é só a barra */
.arrow { position: relative; transition: background .25s, border-color .25s, transform .25s; }
.arrow[data-nav="1"]:hover  { transform: translateX(3px); }
.arrow[data-nav="-1"]:hover { transform: translateX(-3px); }

@media (prefers-reduced-motion: reduce) {
  .seq-progresso.on::after { animation: none; }
}

.float-nav {
  position: fixed;
  right: 28px;
  bottom: 22px;
  display: none;
  gap: 12px;
  z-index: 20;
}
.float-nav.show { display: flex; }
/* Na tela de pedido o canto inferior direito é do IR PARA O PAGAMENTO: as
   cápsulas iam por cima do botão e comiam 94px dele. Aqui elas são a única
   saída por ponteiro (o rodapé some), então em vez de apagá-las movo para o
   vão entre o total e o botão. */
.float-nav[data-tela="pedido"] {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
/* branco nos dois temas: sobre o mosaico escuro ou sobre a capa clara, o
   contorno translúcido sumia conforme o slide */
.float-nav .arrow {
  backdrop-filter: blur(6px);
  background: #fff;
  border-color: transparent;
  color: var(--ink);
  /* na tela de pedido o fundo também é branco: sem a sombra as cápsulas
     sumiam e só sobrava a setinha solta no canto */
  box-shadow: 0 2px 14px rgba(17, 17, 17, .14);
}
.float-nav .arrow:hover { background: #fff; }

/* ---------- perfil vitrine (influencer) ---------- */
/* Só olha: sem preço, sem carrinho, sem tela de pedido. O card vira uma ficha
   do produto — inspiração e fixação continuam, que é o que o influencer
   precisa para falar do produto. */
body.vitrine .topbar:not(.topbar--hero) .pedido-pill { display: none; }

/* ---------- slide pedido ---------- */
/* grid de 3 faixas: cabeçalho, grade (elástica) e rodapé colado embaixo.
   Usa o mesmo --gutter da topbar, então a grade e o botão terminam
   exatamente na vertical do SAIR e o total nunca fica cortado. */
.slide--pedido {
  background: transparent;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  column-gap: 24px;
  /* Respiros em vh para o rodapé caber em notebook baixo — MENOS no topo: a
     topbar tem 88px fixos e é absoluta, então encolher a folga de cima metia
     a fila de filtros por baixo dela (em janela de 700px de altura o clamp
     caía para 78 e cortava 10px das pílulas). O piso agora é 88 + 12 de ar. */
  padding: clamp(100px, 11vh, 104px) var(--gutter) clamp(20px, 4vh, 34px);
}

.topbar--solid { background: #fff; }
.topbar--solid .pedido-pill { background: rgba(0, 0, 0, .06); color: var(--ink); }
.topbar--solid .pedido-pill:hover { background: rgba(0, 0, 0, .12); }
.topbar--solid .topbar__baixar,
.topbar--solid .topbar__badge { background: var(--orange-soft); color: var(--orange); }
.topbar--solid .topbar__badge .dot { background: var(--orange); }
.topbar--solid .topbar__sair { color: #999; }
.topbar--solid .topbar__sair:hover { color: var(--ink); }

.pedido__head {
  grid-column: 1;
  grid-row: 1;
  /* na mesma linha dos filtros: a faixa tem a altura das pílulas e sem isto a
     frase encostava no topo dela */
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pedido__filters {
  grid-column: 2;
  grid-row: 1;
  /* centrado na faixa do cabeçalho: o status muda de altura conforme o texto
     e com align-self:end os filtros desciam junto */
  align-self: center;
  display: flex;
  gap: 6px;
}
.filtro {
  border-radius: 100px;
  padding: 9px 15px;
  font-size: 10.5px;
  font-weight: 600;
  background: #f5f5f5;
  color: #595959;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.filtro.on { background: var(--orange); color: #fff; }

.pedido__grid {
  grid-column: 1 / -1;
  grid-row: 2;
  /* encostado no topo: com um filtro que devolve 2 itens, centralizar deixava
     os cards boiando no meio de uma faixa vazia, longe da fila de filtros */
  align-content: start;
  margin-top: clamp(12px, 3vh, 26px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.mini-card {
  /* encolhe em telas baixas para o rodapé sempre caber */
  height: clamp(84px, 12.6vh, 116px);
  background: #f5f5f5;
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity .25s;
}
.mini-card.zero { opacity: .55; }
.mini-card__thumb { width: 44px; height: 100%; max-height: 94px; object-fit: contain; flex-shrink: 0; }
.mini-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mini-card__name { color: var(--ink); font-size: 12.5px; font-weight: 500; }
.mini-card__price { color: #999; font-size: 11.5px; }

.mini-card .stepper {
  width: 78px;
  height: 32px;
  background: rgba(0, 0, 0, .07);
  color: var(--ink);
  padding: 0 10px;
}
.mini-card .stepper button { color: var(--ink); font-size: 13px; width: 16px; }
.mini-card .stepper .q { font-size: 12.5px; min-width: 14px; }

.pedido__foot {
  grid-column: 1 / -1;
  grid-row: 3;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.pedido__total { display: flex; flex-direction: column; gap: 4px; }
.pedido__total .l { color: #999; font-size: 10px; font-weight: 600; }
.pedido__total .v { color: var(--ink); font-size: 30px; font-weight: 700; }
/* o cabeçalho virou uma linha só: o logo acima já ancora a tela, então título
   e subtítulo saíram. A chamada fica em negrito preto e o valor que falta em
   negrito laranja, que é a única informação que muda a cada item. */
.pedido__note { color: #000; font-size: 14px; font-weight: 300; }
.pedido__note .lead { font-weight: 700; color: #000; }
.pedido__note #totalNote b { font-weight: 700; color: var(--orange); }

.btn-fechar-pedido {
  width: 340px;
  height: 54px;
  border-radius: 100px;
  background: var(--orange);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  transition: filter .2s, opacity .2s;
}
.btn-fechar-pedido:hover { filter: brightness(1.06); }
.btn-fechar-pedido.off { opacity: .45; cursor: not-allowed; }

/* no rodapé claro a seta usa a mesma cor da numeração */
.slide-footer--light .arrow { border-color: rgba(0, 0, 0, .18); color: #999; }
.slide-footer--light .arrow:hover { background: rgba(0, 0, 0, .05); color: var(--ink); }

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  background: rgba(17, 17, 17, .92);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 13px 22px;
  border-radius: 100px;
  z-index: 60;
  white-space: nowrap;
  animation: toast-in .25s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* =========================================================
   ENTRADAS DE SLIDE
   letras do wm em cascata + produto/copy/card escalonados
   (ref. Scoop Society) · galeria em stagger (ref. Mōno showreel)
   ========================================================= */

@keyframes wmRise {
  from { opacity: 0; transform: translateY(.45em); }
  to   { opacity: 1; transform: none; }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bottleIn {
  from { opacity: 0; transform: translateY(38px) scale(.93); }
  to   { opacity: 1; transform: none; }
}
@keyframes cellIn {
  from { opacity: 0; transform: translateY(28px) scale(.965); }
  to   { opacity: 1; transform: none; }
}

.deck-bg.on .wm-l {
  animation: wmRise .85s cubic-bezier(.2, .75, .2, 1) both;
  animation-delay: var(--d, 0s);
}

/* entra e, em seguida, fica flutuando devagar */
.slide--product.is-active .bottle img {
  animation:
    bottleIn .9s cubic-bezier(.16, .8, .24, 1) .16s both,
    bottleFloat 6.5s ease-in-out 1.1s infinite;
}

.slide--product.is-active .left-copy > * {
  animation: riseIn .7s cubic-bezier(.2, .75, .2, 1) both;
}
.slide--product.is-active .left-copy > :nth-child(1) { animation-delay: .3s; }
.slide--product.is-active .left-copy > :nth-child(2) { animation-delay: .38s; }
.slide--product.is-active .left-copy > :nth-child(3) { animation-delay: .46s; }
.slide--product.is-active .left-copy > :nth-child(4) { animation-delay: .54s; }

/* o card centraliza por translateY(-50%); riseIn terminava em `transform: none`
   e apagava esse deslocamento, jogando o card para baixo */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(calc(-50% + 26px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}

.slide--product.is-active .info-card {
  animation: cardIn .75s cubic-bezier(.2, .75, .2, 1) .5s both;
}

.slide--product.is-active .slide-footer,
.slide--product.is-active .topbar {
  animation: riseIn .7s ease both;
  animation-delay: .55s;
  animation-name: fadeOnly;
}
@keyframes fadeOnly {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* galeria — células em stagger */
.slide--galeria.is-active .gal__cell {
  animation: cellIn .7s cubic-bezier(.17, .7, .26, 1) both;
  animation-delay: calc(.06s + var(--i, 0) * .065s);
}

/* pedido — blocos em stagger leve */
.slide--pedido.is-active .pedido__head    { animation: riseIn .6s ease both .1s; }
.slide--pedido.is-active .pedido__filters { animation: riseIn .6s ease both .18s; }
.slide--pedido.is-active .pedido__grid    { animation: riseIn .65s ease both .26s; }
.slide--pedido.is-active .pedido__foot    { animation: riseIn .65s ease both .38s; }

@media (prefers-reduced-motion: reduce) {
  .deck-bg.on .wm-l,
  .slide--product.is-active .bottle img,
  .slide--product.is-active .left-copy > *,
  .slide--product.is-active .info-card,
  .slide--product.is-active .slide-footer,
  .slide--product.is-active .topbar,
  .slide--galeria.is-active .gal__cell,
  .slide--pedido.is-active .pedido__head,
  .slide--pedido.is-active .pedido__filters,
  .slide--pedido.is-active .pedido__grid,
  .slide--pedido.is-active .pedido__foot { animation: none; }
  .track { transition: none; }
}

/* =========================================================
   TELAS PEQUENAS ≤ 1023px
   Base comum ao celular e ao tablet (login, capa, galeria e pedido). O slide
   de produto tem desenho próprio em cada um dos dois e vem logo em seguida,
   em bandas separadas — o Figma desenhou 390 e 768 como telas diferentes,
   não como a mesma coisa esticada.
   ========================================================= */
@media screen and (max-width: 1023px) {

  :root { --gutter: 20px; }

  body { overflow: auto; }

  /* ---- login ---- */
  .login {
    position: static;
    min-height: 100dvh;
    flex-direction: column;
    overflow-y: auto;
  }
  .login__brand {
    width: 100%;
    height: auto;
    padding: 48px 28px 36px;
    gap: 26px;
  }
  .login__title { font-size: 23px; line-height: 32px; }
  .login__fan { max-height: 34vh; }
  .login__form-panel { padding: 44px 28px 56px; }

  /* ---- deck ---- */
  .stage {
    width: 100vw;
    height: 100dvh;
    transform: none;
  }

  .slide {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
  }
  .slide > * { flex-shrink: 0; }

  /* A topbar e o rodapé vivem FORA dos slides, dentro do .viewer. Pô-los em
     fluxo (sticky/static) fazia o rodapé nascer grudado embaixo da topbar, no
     alto da tela: os dois seguem absolutos como no desktop, só menores. */
  .topbar { height: 66px; }
  .topbar__logo { width: 118px; }
  .topbar__right { gap: 12px; }
  .topbar__baixar, .topbar__badge { display: none; }

  .slide-footer { padding: 0 var(--gutter); }
  .slide-footer__line { display: none; }

  /* A galeria NÃO tem regra aqui de propósito. Os ladrilhos saíram do slide e
     hoje moram em #galBg > .gal-bg__board, posicionados em % — o mosaico
     acompanha qualquer largura sozinho. As regras antigas ainda miravam
     .gal__cell e, com !important, desmontavam o mosaico numa pilha vertical. */

  /* pedido */
  .topbar--solid { background: #fff; }
  /* volta a empilhar em fluxo normal, sem o grid de 3 faixas. A topbar é
     absoluta FORA do slide e cobre os primeiros 66px: sem essa folga o
     cabeçalho sumia atrás dela e os filtros nasciam cortados pela metade. */
  .slide--pedido { display: block; padding: 66px 0 0; }
  .pedido__head { padding: 18px var(--gutter) 0; }

  .pedido__filters {
    position: relative;
    padding: 14px var(--gutter) 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .pedido__filters::-webkit-scrollbar { display: none; }
  /* a fila arrasta e não havia pista nenhuma disso: "PRO ARGAN" e "POWER"
     simplesmente nasciam fora da tela. A borda desbota enquanto houver fila
     à direita, e a classe sai ao chegar no fim (pintarArrasteFiltros) */
  .pedido__filters.tem-mais {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent 100%);
  }

  .pedido__grid {
    position: static;
    width: auto;
    grid-template-columns: 1fr;
    padding: 10px var(--gutter) 0;
  }
  .mini-card { height: 96px; }
  .mini-card__thumb { height: 76px; }

  /* o fôlego embaixo é para o FECHAR PEDIDO não terminar debaixo das setas
     flutuantes, que aqui ficam ancoradas no canto inferior direito */
  .pedido__foot {
    padding: 22px var(--gutter) 88px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .btn-fechar-pedido { width: 100%; }
}

/* =========================================================
   PRODUTO · CELULAR ≤ 639px   (Figma "M · 04 Produto", 390 × 844)
   Uma tela só: frasco no meio com as setas nas laterais, copy embaixo e a
   barra de compra colada no pé. A barra é sticky (e não absolute) porque o
   slide rola: em aparelho baixo, ou com descrição longa, o texto passa por
   baixo dela em vez de ser cortado.
   ========================================================= */
@media screen and (max-width: 639px) {

  .slide--product {
    display: flex;
    flex-direction: column;
    padding: 66px 0 0;
  }

  /* a marca d'água mora na camada de fundo, fora do slide: ela não rola junto,
     por isso a altura vai em % e não em px */
  .wm {
    top: 33%;
    font-size: clamp(54px, 22vw, 88px);
    color: rgba(255, 255, 255, .05);
    mix-blend-mode: normal;
  }

  /* o frasco tem piso de altura e cresce com a sobra; as margens laterais
     abrem os 66px de cada lado onde ficam as setas */
  .bottle {
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 66px !important;
    width: auto !important;
    height: clamp(190px, 38vh, 344px) !important;
    flex: 1 0 auto;
    min-height: 0;
  }
  /* Power Skin (kind:'crop'). Medi o alfa do PNG (1005x1340): o pote ocupa
     x 165-1004 e y 351-1052, ou seja 83,6% da largura (encostado na direita) e
     só 52,4% da altura. Com object-fit:contain puro a moldura mostra a borda
     transparente inteira e o pote sai com ~metade do tamanho dos outros
     frascos. Fixar a proporção da ARTE na caixa deixa os percentuais abaixo
     estáveis: a arte entra 19,6% maior e desencostada da direita, e o que
     sobra é cortado pelo overflow:hidden do .bottle--crop. */
  .bottle--crop {
    aspect-ratio: 1005 / 1340;
    align-self: center;
    width: auto !important;
  }
  .bottle--crop > img {
    inset: auto;
    left: -19.7%;
    top: -12.7%;
    width: 119.6%;
    height: 119.6%;
    object-fit: contain;
  }

  .left-copy {
    position: static;
    transform: none;
    width: auto;
    padding: 0 var(--gutter);
    margin: 46px 0 44px;   /* 44 embaixo = faixa do contador de páginas */
    gap: 9px;
  }
  .left-copy__eyebrow { font-size: 9.5px; }
  .left-copy__title   { font-size: 36px; line-height: 44px; }
  .left-copy__desc    { font-size: 12.5px; line-height: 20px; hyphens: auto; }
  .left-copy__meta    { font-size: 10.5px; line-height: 17px; }

  /* ---- barra de compra (138px) ---- */
  .info-card {
    position: sticky;
    left: auto;
    right: auto;
    top: auto;
    bottom: 0;
    margin-top: auto;
    width: auto;
    transform: none;
    border-radius: 0;
    padding: 16px var(--gutter) 14px;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    display: grid;
    /* as duas colunas encolhem: em 320px a régua de fixação com largura fixa
       empurrava o "ALTA" por cima do preço */
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: start;
    column-gap: 14px;
    row-gap: 14px;
    z-index: 7;
  }
  /* o cardIn do desktop termina em translateY(-50%): aqui o card não centraliza
     por transform nenhum, então ele entra com um riseIn comum */
  .slide--product.is-active .info-card { animation-name: riseIn; }

  /* Faixa de desbote em cima da barra. Em aparelho baixo, ou com descrição
     longa, o texto rola por baixo da barra e passava por cima do contador de
     páginas. A rampa usa a cor do PÉ do slide (--fade, a mesma borda do radial
     de fundo), então o conteúdo some antes de chegar lá. */
  .info-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 62px;
    background: linear-gradient(to top, var(--fade, #111) 0%, var(--fade, #111) 34%, transparent 100%);
    pointer-events: none;
  }

  /* coluna da esquerda: rótulo, inspiração e a régua de fixação com o valor
     ao lado. A régua vem DEPOIS do valor no HTML, daí as posições explícitas */
  .ic__info {
    display: grid;
    /* a régua vale 146px quando cabe e encolhe quando não cabe; com as duas
       colunas em `auto` ela segurava os 146 e empurrava o "ALTA" por cima do
       preço em 320px. O `start` mantém o valor colado na régua, como no Figma,
       em vez de jogá-lo na borda direita. */
    grid-template-columns: minmax(0, 146px) auto;
    justify-content: start;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 5px;
    min-width: 0;
  }
  .ic__info > .info-card__label { grid-area: 1 / 1 / 2 / 3; }
  .ic__info > .info-card__insp,
  .ic__info > .info-card__ind   { grid-area: 2 / 1 / 3 / 3; }
  .ic__info > .fix-bar { grid-area: 3 / 1 / 4 / 2; width: 100%; min-width: 0; gap: 4px; }
  .ic__info > .fix-row { grid-area: 3 / 2 / 4 / 3; width: auto; }
  .fix-row .l { display: none; }
  .fix-row .v { font-size: 8.5px; }
  .fix-bar span { height: 3px; border-radius: 100px; }

  .info-card__label { font-size: 8.5px; }
  .info-card__insp  { font-size: 15px; }
  .info-card__ind   { font-size: 14px; }

  /* coluna da direita: PDV, preço e /un empilhados e alinhados à direita */
  .ic__preco {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
  }
  .info-card__pdv { font-size: 10.5px; }
  .info-card__price-label { display: none; }   /* fora do desenho do celular */
  .price-row { flex-direction: column; align-items: flex-end; gap: 0; }
  .price-row .p { font-size: 26px; }
  .price-row .u { font-size: 11px; }

  .order-row { grid-column: 1 / -1; gap: 12px; }
  .stepper { height: 40px; padding: 0 14px; }
  .btn-add { flex: 1; width: auto; height: 40px; font-size: 11px; }

  /* sem preço e sem botão não há barra: o card desce para o fluxo, logo
     depois da copy, e o contador volta para o pé da tela */
  body.vitrine .info-card {
    position: static;
    margin: 22px 0 0;
    padding: 0 var(--gutter);
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    grid-template-columns: 1fr;
  }
  body.vitrine .info-card::before { content: none; }
  body.vitrine .slide--product { padding-bottom: 58px; }
  body.vitrine .slide-footer--produto { bottom: 31px; }

  /* ---- moldura ---- */
  /* o contador sobe para cima da barra de compra; as setas do rodapé somem
     porque no celular quem navega são as duas cápsulas flutuantes */
  .slide-footer__arrows { display: none; }
  /* sem as setas o rodapé não precisa mais dos 80px de caixa: ele vira só a
     linha do contador, encostada embaixo como no Figma */
  .slide-footer { height: auto; bottom: 31px; }
  .slide-footer--produto { bottom: 152px; }
  .slide-footer__page { font-size: 11px; }

  .float-nav { display: flex; right: 18px; bottom: 18px; gap: 8px; left: auto; transform: none; }
  .float-nav .arrow { width: 46px; height: 46px; }

  /* no produto elas saem do canto e vão ladear o frasco, na altura dele */
  .float-nav[data-tela="produto"] {
    left: 0;
    right: 0;
    top: 33%;
    bottom: auto;
    transform: translateY(-50%);
    justify-content: space-between;
    padding: 0 12px;
    pointer-events: none;
  }
  .float-nav[data-tela="produto"] .arrow {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
  }
  /* voltar é a ação secundária: fica mais apagada, como no Figma */
  .float-nav[data-tela="produto"] .arrow[data-nav="-1"] { opacity: .55; }
}

/* A legenda dos produtos só cabe entre o contador e as setas a partir de
   720px: abaixo disso os três se encavalavam e a fila vazava a janela. */
@media screen and (min-width: 720px) and (max-width: 1023px) {
  .slide-footer { gap: 16px; }
  .slide-footer__line { display: block; font-size: clamp(8px, 1.18vw, 9px); }
}

/* =========================================================
   PRODUTO · TABLET 640–1023px   (Figma "T · 04 Produto", 768 × 1024)
   Duas colunas: frasco à esquerda, texto e card empilhados à direita. As
   setas voltam para o rodapé — na mão do polegar já não fazem falta.
   ========================================================= */
@media screen and (min-width: 640px) and (max-width: 1023px) {

  :root { --gutter: 40px; }

  .topbar { height: 80px; }
  .topbar__logo { width: 150px; }
  .topbar__right { gap: 18px; }
  .topbar__baixar { display: inline-flex; }

  .slide--pedido { padding-top: 80px; }
  .pedido__grid { grid-template-columns: 1fr 1fr; }

  .slide--product {
    display: grid;
    /* 8/10 reproduz os 290 / 366 do Figma em 768 e continua dividindo bem em
       640, onde colunas fixas espremiam o ADICIONAR a 76px */
    grid-template-columns: minmax(0, 8fr) minmax(0, 10fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "frasco copy"
      "frasco card";
    /* `safe` para o celular deitado: centralizar conteúdo mais alto que a tela
       esconderia o topo atrás da borda, sem jeito de rolar até ele */
    align-content: center;
    align-content: safe center;
    column-gap: 32px;
    row-gap: 26px;
    padding: 80px var(--gutter) 108px;
  }

  .wm {
    top: 38%;
    font-size: clamp(96px, 22vw, 170px);
    color: rgba(255, 255, 255, .05);
    mix-blend-mode: normal;
  }

  /* o frasco ocupa as duas faixas da coluna da esquerda e o object-fit
     resolve a proporção de cada produto sem tabela de tamanhos */
  .bottle {
    grid-area: frasco;
    position: relative;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    align-self: stretch;
    min-height: 0;
  }
  /* Power Skin (kind:'crop'). Medi o alfa do PNG (1005x1340): o pote ocupa
     x 165-1004 e y 351-1052, ou seja 83,6% da largura (encostado na direita) e
     só 52,4% da altura. Com object-fit:contain puro a moldura mostra a borda
     transparente inteira e o pote sai com ~metade do tamanho dos outros
     frascos. Fixar a proporção da ARTE na caixa deixa os percentuais abaixo
     estáveis: a arte entra 19,6% maior e desencostada da direita, e o que
     sobra é cortado pelo overflow:hidden do .bottle--crop. */
  .bottle--crop {
    aspect-ratio: 1005 / 1340;
    align-self: center;
    height: auto !important;
  }
  .bottle--crop > img {
    inset: auto;
    left: -19.7%;
    top: -12.7%;
    width: 119.6%;
    height: 119.6%;
    object-fit: contain;
  }

  .left-copy {
    grid-area: copy;
    position: static;
    transform: none;
    width: auto;
    gap: 12px;
  }
  .left-copy__eyebrow { font-size: 10px; }
  .left-copy__title   { font-size: 32px; line-height: 39px; }
  .left-copy__desc    { font-size: 14px; line-height: 22px; hyphens: auto; }
  .left-copy__meta    { font-size: 11px; line-height: 18px; }

  .info-card {
    grid-area: card;
    position: static;
    transform: none;
    width: auto;
    align-self: start;
    padding: 24px;
    gap: 16px;
  }
  .slide--product.is-active .info-card { animation-name: riseIn; }
  .order-row { gap: 12px; }
  .btn-add { flex: 1; width: auto; }

  .arrow { width: 48px; height: 48px; }
  .float-nav { right: 24px; bottom: 24px; }
}

/* =========================================================
   IMPRESSÃO / PDF
   O deck é um slider: os 20 slides existem juntos no DOM, mas o fundo, a
   marca d'água, a topbar e o rodapé vivem FORA deles, em camadas únicas que só
   mostram o slide ativo. Imprimir direto sairiam 20 páginas sem fundo e sem
   cabeçalho — por isso prepararPDF() no app.js devolve tudo isso para dentro
   de cada slide antes de chamar a impressão, e desfaz depois.
   ========================================================= */
@page { size: 1440px 900px; margin: 0; }

@media print {
  html, body { background: #fff !important; height: auto !important; overflow: visible !important; }
  .login, .loader, .toast, .float-nav, .seq-progresso,
  .deck-bg, .gal-bg, .hero-bg,
  .topbar, .slide-footer { display: none !important; }

  .viewer, .viewer[hidden] { position: static !important; display: block !important;
                             overflow: visible !important; height: auto !important; }
  .stage { position: static !important; overflow: visible !important; height: auto !important; }
  .track { display: block !important; transform: none !important; transition: none !important; }

  .slide {
    width: 1440px !important;
    height: 900px !important;
    position: relative !important;
    overflow: hidden !important;
    break-after: page;
    page-break-after: always;
    /* sem isto o navegador descarta os fundos e sai tudo em branco */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .slide:last-child { break-after: auto; page-break-after: auto; }

  /* nada de animação de entrada na versão impressa */
  .slide, .slide * { animation: none !important; transition: none !important; }
  .slide .wm { opacity: 1; }

  /* moldura clonada para dentro de cada página */
  .pdf-chrome { position: absolute !important; left: 0; width: 100%; display: flex !important; }
  .pdf-chrome--top { top: 0; }
  .pdf-chrome--bottom { bottom: 20px; }
  .pdf-chrome .arrow, .pdf-chrome .topbar__baixar, .pdf-chrome .topbar__sair { display: none !important; }
}

@media print {
  /* no PDF a pílula de ações não faz sentido; no hero ela é a marca "VER
     CATÁLOGO 2026" e fica */
  .pdf-chrome .topbar__right { display: none !important; }
  .pdf-chrome.topbar--hero .topbar__right { display: flex !important; }

  /* Duas telas não entram no catálogo impresso: a de PEDIDO, que é a
     ferramenta de compra e não uma página de portfólio, e a CAPA, cuja arte
     já volta no encerramento. */
  .slide--pedido { display: none !important; }

  /* No papel nada é clicável: o ADICIONAR e o medidor de quantidade saem
     juntos, porque são o mesmo controle — um medidor sozinho ficaria órfão.
     O card encolhe sozinho (flex column sem altura fixa) e continua centrado. */
  .order-row { display: none !important; }

  .stage, .viewer { width: auto !important; }

  /* ---------- página de encerramento ---------- */
  .pdf-final { position: relative !important; background: #cdcccf; }
  /* NÃO é a mesma arte da capa do deck. A `capa-bg.webp` é um enquadramento
     mais fechado, com os cães descendo até y=841 — as cápsulas cairiam em cima
     das patas. Esta é a arte que a Ge usou para desenhar o encerramento no
     Figma: cães de 193 a 682, com o chão livre embaixo. */
  .pdf-final__arte {
    position: absolute;
    inset: 0;
    background: url('../assets/img/encerramento-bg.webp') 50% 50% / cover no-repeat;
  }
  /* a marca já vem com o degradê branco→transparente embutido no PNG: máscara
     de CSS é justamente o tipo de coisa que alguns navegadores descartam ao
     imprimir */
  .pdf-final__logo { position: absolute; left: 217px; top: 96px; width: 1007px; height: auto; }
  /* as cápsulas se dimensionam pelo conteúdo: acrescentar um contato depois
     não exige recalcular largura nenhuma */
  /* Medidas fechadas pela Ge no Figma (opção A, nó 14671:2): as duas
     cápsulas com a MESMA largura de 260, num bloco de 530 centralizado.
     O valor usa flex:1, então ele preenche o que sobrar do rótulo — assim a
     cápsula não quebra se a métrica da fonte do navegador diferir do Figma. */
  .pdf-final__pills {
    position: absolute;
    left: 432.5px;
    top: 753px;
    display: flex;
    gap: 10px;
  }
  .pdf-final__pill {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 260px;
    height: 46px;
    padding: 0 5px 0 27px;
    border-radius: 100px;
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    color: #111;
    white-space: nowrap;
  }
  .pdf-final__pill--wa { padding-left: 20px; }
  .pdf-final__valor {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 37px;
    padding: 0 16px;
    border-radius: 100px;
    background: #f7f7f7;
    font-size: 14px;
    font-weight: 700;
    color: #000;
  }
  .pdf-final__valor--fone { justify-content: flex-start; font-size: 13px; }
}

/* =========================================================
   FINALIZAR PEDIDO (dados do comprador)
   ========================================================= */
.ck {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(17, 17, 17, .45);
  backdrop-filter: blur(3px);
}
.ck[hidden] { display: none; }

.ck__card {
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
}

.ck__topo {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 26px 30px 18px;
}
.ck__topo h2 { font-size: 21px; font-weight: 700; }
.ck__sub { margin-top: 5px; color: #8a8a8a; font-size: 13px; font-weight: 300; }
.ck__sub b { color: var(--ink); font-weight: 600; }
.ck__fechar {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--mist, #f5f5f5);
  color: #777;
  font-size: 13px;
  cursor: pointer;
}
.ck__fechar:hover { background: #ececec; color: var(--ink); }

/* rolagem só no miolo: topo e rodapé ficam sempre à vista */
.ck__corpo { flex: 1; overflow-y: auto; padding: 4px 30px 26px; }

.ck__corpo h3 {
  margin: 22px 0 12px;
  font-size: 10.5px;
  font-weight: 600;
  color: #aaa;
}
.ck__corpo h3:first-child { margin-top: 6px; }

/* Rótulo de campo em peso REGULAR: em 11px o semibold engrossa a letra e
   atrapalha justamente onde a leitura tem de ser rápida. */
.ck label, .cl label { display: block; margin-bottom: 12px; font-size: 11.5px; font-weight: 400; color: #8a8a8a; }
.ck label i, .cl label i { color: var(--orange); font-style: normal; }
.ck input, .ck textarea, .cl input, .cl select {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 15px;
  border: 0;
  border-radius: 12px;
  background: #F6F6F6;
  font: 400 14px Inter, sans-serif;
  color: var(--ink);
}
.ck textarea { resize: vertical; font-weight: 300; line-height: 1.5; }
.ck input:focus, .ck textarea:focus, .cl input:focus, .cl select:focus { outline: 2px solid var(--orange); }
.ck input.erro, .cl input.erro { outline: 2px solid #d9534f; }

.ck__linha, .cl__linha { display: grid; gap: 14px; }
.ck__linha--2, .cl__linha--2 { grid-template-columns: 1fr 1fr; }
.ck__linha--3 { grid-template-columns: 1fr 1fr 1fr; }
.ck__linha--endereco, .cl__linha--endereco { grid-template-columns: 170px 1fr 120px; }
.ck__linha--local { grid-template-columns: 1fr 1fr 1fr 96px; }
.ck__dica {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.3;
  color: #b0b0b0;
}
.ck__dica.ok { color: #2b6b32; }
.ck__dica.err { color: #c0392b; }

/* ---------- frete ---------- */
/* O espaço existe desde o começo com a frase apagada: assim a virada para o
   selo verde é uma recompensa por ter preenchido, e não um bloco que aparece
   do nada empurrando o formulário. */
.ck__frete { margin-bottom: 4px; }
.ck__frete-vazio {
  padding: 15px 18px;
  border-radius: 12px;
  background: #f5f5f5;
  color: #b0b0b0;
  font-size: 13px;
  font-weight: 300;
}
.ck__frete-ok {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #eef7f0;
  color: #2b6b32;
  animation: freteEntra .34s cubic-bezier(.22, 1, .36, 1) both;
}
.ck__frete-ok[hidden] { display: none; }
.ck__frete-ico {
  flex: none;
  width: 24px;
  height: 24px;
  animation: freteChega .5s cubic-bezier(.22, 1, .36, 1) .06s both;
}
.ck__frete-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.ck__frete-txt b { font-size: 14px; font-weight: 700; }
.ck__frete-txt span { font-size: 12px; font-weight: 300; color: #5b8c68; }
.ck__frete-selo {
  margin-left: auto;
  padding: 7px 14px;
  border-radius: 100px;
  background: #d9ecdd;
  font-size: 12px;
  font-weight: 700;
}
@keyframes freteEntra {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
/* o caminhão entra rodando de fora, que é o que dá o "algo acontecendo" */
@keyframes freteChega {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ck__frete-ok, .ck__frete-ico { animation: none; }
}

.ck__pag { display: flex; gap: 10px; margin-bottom: 4px; }
/* `position: relative` aqui é o que impede o rádio invisível de virar uma
   caixa da largura da janela — ver o comentário em .cl__op. */
.ck__opcao { position: relative; margin: 0; cursor: pointer; }
.ck__opcao input { position: absolute; opacity: 0; pointer-events: none; width: auto; }
.ck__opcao span {
  display: block;
  padding: 11px 26px;
  border-radius: 100px;
  background: #f5f5f5;
  color: #777;
  font-size: 12px;
  font-weight: 600;
  transition: background .2s, color .2s;
}
.ck__opcao input:checked + span { background: var(--orange); color: #fff; }

.ck__pe {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 30px 22px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .07);
}
.ck__erro { flex: 1; font-size: 12.5px; font-weight: 500; color: #c0392b; }
.ck__enviar {
  border: 0;
  border-radius: 100px;
  padding: 15px 34px;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ck__enviar:disabled { opacity: .5; cursor: default; }

@media screen and (max-width: 820px) {
  .ck { padding: 0; }
  .ck__card { max-width: 100%; max-height: 100vh; border-radius: 0; }
  .ck__topo, .ck__corpo, .ck__pe { padding-left: 20px; padding-right: 20px; }
  .ck__linha--2, .ck__linha--3, .ck__linha--endereco,
  .ck__linha--local { grid-template-columns: 1fr; }
  .ck__dica { padding-top: 0; }
}

@media print { .ck { display: none !important; } }

/* ---------- 21 · obrigado (página do pagamento) ---------- */
/* Página própria, não overlay: o Pix leva minutos e o revendedor recarrega,
   volta pelo histórico e reabre o link depois. */

/* #F6F6F6 é o cinza padrão: página → card branco → campos, três camadas que
   se separam sem precisar de contorno em nada.

   `height: auto` e `overflow: visible` desfazem o `html, body { height: 100% }`
   e o `body { overflow: hidden }` lá do topo, que existem para o catálogo em
   slides. Sem isto estas telas não rolam no desktop — e só no desktop, porque
   uma media query devolve `overflow: auto` no celular. Foi assim que passou
   despercebido nos meus testes. */
.ob-body {
  background: #F6F6F6;
  height: auto;
  min-height: 100%;
  overflow: visible;
}

.ob {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 40px 20px 60px;
  font-family: Inter, sans-serif;
  color: var(--ink);
}

.ob__carregando { margin-top: 22vh; color: #9b968f; font-size: 14px; font-weight: 300; }

.ob__topo {
  width: 100%;
  max-width: 560px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ob__logo { height: 26px; }
.ob__numero {
  font-size: 11px; font-weight: 600;
  color: #8d877f; background: #e9e5e0;
  padding: 6px 11px; border-radius: 999px;
}

.ob__card {
  width: 100%; max-width: 560px;
  background: #fff; border-radius: 18px;
  padding: 28px 28px 26px;
  box-shadow: 0 18px 44px rgba(20, 16, 12, .09);
}

/* cobrança de sandbox: precisa gritar, porque o resto da tela é idêntico */
.ob__teste {
  margin: -6px 0 18px; padding: 11px 14px; border-radius: 10px;
  background: #eef1fb; color: #3b4fa8;
  font-size: 12px; font-weight: 700; text-align: center;
}

.ob__selo { display: flex; gap: 14px; align-items: flex-start; }
.ob__check {
  flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--orange); color: #fff;
  font-size: 19px; font-weight: 700; line-height: 1;
}
.ob__selo--pago .ob__check { background: #2b8a3e; }
.ob__selo h1 { font-size: 22px; font-weight: 700; }
.ob__selo p { margin-top: 3px; font-size: 13px; font-weight: 300; color: #8a8a8a; }

.ob__pag {
  margin-top: 24px; padding: 20px;
  background: var(--orange-soft); border-radius: 14px;
}
.ob__pag--quitado { background: #eef7ef; }
.ob__pag-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ob__pag-rotulo { font-size: 11px; font-weight: 700; color: #b8683c; }
.ob__pag--quitado .ob__pag-rotulo { color: #2b6b32; }
.ob__pag-valor { font-size: 21px; font-weight: 700; }

.ob__pix { margin-top: 16px; display: flex; gap: 18px; align-items: flex-start; }
/* mesmo motivo do .ck label[hidden]: display de autor vence o do atributo */
.ob__pix[hidden], .ob__boleto[hidden] { display: none; }
.ob__qr {
  flex: none; width: 168px; height: 168px;
  background: #fff; border-radius: 10px; padding: 7px;
}
.ob__pix-copia { flex: 1; min-width: 0; }
.ob__boleto { margin-top: 16px; }

.ob__dica { font-size: 12px; font-weight: 300; color: #8a8a8a; margin-bottom: 7px; }

.ob__copiar { display: flex; gap: 7px; }
.ob__copiar input {
  flex: 1; min-width: 0;
  font-family: inherit; font-size: 12px; font-weight: 400; color: #55504a;
  background: #fff; border: 0; border-radius: 12px;
  padding: 11px 12px;
}
.ob__copiar input:focus { outline: 2px solid var(--orange); }
.ob__copiar button {
  flex: none;
  font-family: inherit; font-size: 11px; font-weight: 700;
  color: #fff; background: var(--ink);
  border: 0; border-radius: 100px; padding: 0 18px; cursor: pointer;
  transition: background .15s;
}
.ob__copiar button:hover { background: #333; }
.ob__copiar button.ok { background: #2b8a3e; }

.ob__link {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 600; color: var(--orange); text-decoration: none;
}
.ob__link:hover { text-decoration: underline; }

.ob__vence { margin-top: 14px; font-size: 12px; font-weight: 500; color: #8a8a8a; }
.ob__estado { margin-top: 4px; font-size: 12px; font-weight: 300; color: #8a8a8a; }
.ob__estado.ok { color: #2b6b32; font-weight: 500; }

.ob__itens { margin-top: 26px; }
.ob__itens h2 { font-size: 11px; font-weight: 700; color: #b0aaa2; }
.ob__itens ul { list-style: none; margin-top: 10px; }
.ob__itens li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid #f0edea;
  font-size: 13.5px; font-weight: 300;
}
.ob__itens li b { font-weight: 600; white-space: nowrap; }
.ob__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 13px;
}
.ob__total span { font-size: 11px; font-weight: 700; color: #b0aaa2; }
.ob__total b { font-size: 19px; font-weight: 700; }

.ob__whats {
  display: block; margin-top: 24px;
  text-align: center; text-decoration: none;
  font-size: 12.5px; font-weight: 700;
  color: #fff; background: #25d366;
  border-radius: 100px; padding: 15px;
  transition: filter .15s;
}
.ob__whats:hover { filter: brightness(.94); }

.ob__rodape { margin-top: 14px; text-align: center; font-size: 12px; font-weight: 300; color: #a09a92; }
.ob__rodape b { font-weight: 600; color: #6e6862; }

.ob__falha { max-width: 420px; margin-top: 18vh; text-align: center; }
.ob__falha h1 { font-size: 21px; font-weight: 700; }
.ob__falha p { margin: 9px 0 16px; font-size: 14px; font-weight: 300; color: #8a8a8a; line-height: 1.55; }

/* cobrança falhou mas o pedido existe: o erro vira um caminho, não um beco */
.ck__erro--acao { color: #8a6a2f; }
.ck__erro--acao a { color: var(--orange); font-weight: 700; }

@media screen and (max-width: 600px) {
  .ob { padding: 24px 14px 44px; }
  .ob__card { padding: 22px 18px 20px; border-radius: 15px; }
  .ob__pix { flex-direction: column; align-items: center; }
  .ob__qr { width: 200px; height: 200px; }
  .ob__pix-copia { width: 100%; }
}

/* CPF não tem inscrição estadual: o campo sai e o documento ocupa a linha.
   O [hidden] precisa estar escrito aqui porque `.ck label { display: block }`
   é regra de autor e vence o display:none que o navegador dá ao atributo. */
.ck label[hidden] { display: none; }
.ck__linha--so-doc { grid-template-columns: 1fr; }


/* ---------- Clube: tela de adesão ----------
   Reusa a casca do /obrigado (.ob*) e os campos do checkout (.ck*, estendidos
   para .cl acima). O que existe aqui é só o que a adesão tem e as outras telas
   não: escolha do produto, escolha da forma de pagamento e o resumo do plano. */

.cl__plano {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: -4px 0 20px; padding-bottom: 18px;
  border-bottom: 1px solid #efece8;
}
.cl__plano b { font-size: 26px; font-weight: 700; }
.cl__plano span { font-size: 12.5px; font-weight: 300; color: #8d877f; }

/* Passo numerado, como no checkout de referência: o número dá a noção de
   "falta pouco" que uma lista de campos corrida não dá. */
.cl h3 {
  display: flex; align-items: center; gap: 9px;
  margin: 26px 0 13px; font-size: 11.5px; font-weight: 400; color: #1A1D2A;
}
.cl h3:first-of-type { margin-top: 0; }
.cl h3 i {
  flex: none; width: 19px; height: 19px; border-radius: 100px;
  display: grid; place-items: center;
  /* var(--orange) é exatamente #F5874F: usar a variável faz uma troca de marca
     alcançar isto sozinha. */
  background: var(--orange); color: #fff;
  /* o número segue em negrito: branco sobre laranja a 10px precisa do peso */
  font-size: 10px; font-weight: 700; font-style: normal;
}

/* CEP curto, número curto, complemento com o resto: a proporção evita três
   campos iguais onde dois são de 3 e 8 dígitos. */
.cl__linha--cep { grid-template-columns: 130px 110px 1fr; }

/* O endereço que o CEP resolveu, como texto de conferência. Quatro campos a
   menos para digitar. */
.cl__endereco {
  margin: -2px 0 14px; padding: 12px 14px; border-radius: 12px;
  background: #F6F6F6; color: #55504a;
  font-size: 12.5px; font-weight: 300; line-height: 1.45;
}
.cl__endereco[hidden] { display: none; }

/* preço do plano ao lado do produto, onde antes ficava o "trocar" */
.cl__escolhido-preco { flex: none; font-size: 16px; font-weight: 700; }

/* Resumo logo acima do botão */
.cl__resumo {
  margin-top: 26px; padding: 16px 18px; border-radius: 14px; background: #F6F6F6;
}
.cl__resumo-linha {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 300; color: #55504a;
  padding-bottom: 9px;
}
.cl__resumo-linha b { font-weight: 500; color: #111; }
.cl__resumo-total {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 12px; border-top: 1px solid #e6e6e6;
  font-size: 10.5px; font-weight: 700; color: #8d877f;
}
.cl__resumo-total b { font-size: 20px; font-weight: 700; color: #111; }

/* Escolher o produto e escolher a forma de pagamento são a mesma pergunta em
   formatos diferentes: cartões clicáveis, não <select>. No celular um select de
   16 produtos vira uma roleta. */
.cl__opcoes { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
/* `label.cl__op` e não só `.cl__op`: a opção É um <label>, e `.cl label` lá em
   cima pinta de cinza com especificidade maior. Sem subir o peso aqui, o título
   saía cinza inclusive dentro do bloco laranja. */
.cl label.cl__op {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border-radius: 12px; cursor: pointer;
  background: #F6F6F6; transition: background .15s, color .15s;
  font-size: 12.5px; font-weight: 500; color: #1A1D2A;
}
.cl label.cl__op:hover { background: #efefef; }
/* O rádio é invisível, mas ocupava espaço de VERDADE e puxava a página pro
   lado. Dois problemas somados:

   1. a regra geral `.cl input { width: 100% }` também pegava ele;
   2. `position: absolute` sem nenhum ancestral posicionado faz esse 100%
      valer sobre a JANELA, não sobre o label — então cada rádio virava uma
      caixa da largura da tela inteira, começando no meio dela.

   Resultado: scrollWidth de 1100px numa janela de 721px, e a tela deslizando
   pro lado com o mouse. `position: relative` no label dá a ele um ancestral
   posicionado, e `width: auto` desfaz o 100% herdado. */
.cl label.cl__op { position: relative; }
.cl__op input { position: absolute; opacity: 0; pointer-events: none; width: auto; }
.cl label.cl__op small { display: block; font-size: 11px; font-weight: 300; color: #8d877f; margin-top: 2px; }

/* O ícone é a primeira coisa lida na opção, então ele acompanha a cor do texto
   em vez de ter cor própria: escuro no bloco cinza, branco no laranja. `flex:
   none` porque sem isso ele encolhe quando o rótulo é longo. */
.cl__op-ico { flex: none; width: 21px; height: 21px; }
/* O desenho do cartão é mais largo do que alto, então dentro de uma caixa
   quadrada ele encolhe pela largura e sobra 2px de altura contra a marca do
   Pix, que é redonda e enche a caixa. A caixa dele fica mais larga na mesma
   proporção do viewBox recortado (512 × 460,8) para as duas alturas baterem. */
.cl__op-ico--cartao { width: 23.4px; }

/* Selecionado é laranja cheio, não contorno: num par de opções o contorno pede
   comparação ("qual está marcado?") e o bloco preenchido responde de longe.

   O gradiente veio da Geovania (22/09) e é o mesmo em todas as opções — produto
   e forma de pagamento. Ele NÃO transiciona: gradiente e cor chapada não se
   interpolam, então a troca é seca. É aceitável aqui porque a mudança é de
   clique, não de hover. */
.cl label.cl__op--on,
.cl label.cl__op--on:hover {
  background: linear-gradient(101deg, #F9722E 4.49%, #FA995A 118.19%);
  color: #fff;
}
/* 60% de branco: a descrição continua legível mas para de competir com o
   título dentro do mesmo bloco colorido. */
.cl label.cl__op--on small { color: rgba(255, 255, 255, .6); }

.cl__btn {
  width: 100%; margin-top: 24px; padding: 17px;
  /* 100px é o raio de botão do projeto — mesmo do .btn-add e do checkout */
  border: 0; border-radius: 100px; cursor: pointer;
  /* verde, e não a tinta da marca: pedido da Geovania, e é o que o mercado
     brasileiro lê como "confirmar pagamento" */
  background: #1fa863; color: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 700;
}
.cl__btn:hover { background: #1b9558; }
.cl__btn:disabled { opacity: .55; cursor: default; }

.cl__falta { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 400; color: #c0392b; }
.cl__erro { margin-top: 14px; color: #c0392b; font-size: 12.5px; font-weight: 400; text-align: center; }
.cl__nota { margin-top: 16px; font-size: 11.5px; font-weight: 300; color: #a29c94; line-height: 1.6; text-align: center; }

@media (max-width: 560px) {
  .cl__linha--cep { grid-template-columns: 1fr 1fr; }
  .cl__linha--cep label:last-child { grid-column: 1 / -1; }
  /* Os produtos CONTINUAM em duas colunas no celular: 16 itens empilhados dariam
     uma rolagem inteira antes de a pessoa chegar no formulário, e os rótulos são
     curtos o bastante para caber. Quem vira para uma coluna é a forma de
     pagamento, que tem uma linha de explicação embaixo. */
  .cl__opcoes { gap: 8px; }
  .cl__op { padding: 12px 11px; font-size: 12.5px; }
  #formas { grid-template-columns: 1fr; }
  .cl__linha--2, .cl__linha--endereco { grid-template-columns: 1fr; }
}


/* ---------- Clube: cartão de crédito na nossa tela ----------
   Existe porque a Geovania escolheu o checkout transparente (22/09/2026). O
   número passa pelo nosso servidor — ver o cabeçalho de api/_cartao.js. */

/* Mesmas colunas e mesmo gap das opções de pagamento logo acima: assim o cartão
   nasce exatamente sob a aba laranja, e as duas metades da tela se alinham em
   vez de quase se alinharem. */
.cl__cartao { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; margin-top: 10px; }
.cl__cartao[hidden] { display: none; }
/* Campos mais juntos para a coluna fechar na altura do cartão. O aperto é SÓ
   aqui dentro: são quatro campos curtos e conhecidos (número, validade, CVV,
   nome), diferente do formulário de cima, onde respiro ajuda a ler. */
.cl__cartao-campos { display: grid; gap: 8px; }
.cl__cartao-campos label { margin-bottom: 0; font-size: 11px; }
.cl__cartao-campos input { margin-top: 4px; padding: 11px 14px; }
/* Validade e CVV ficam lado a lado SEMPRE: são 4 e 3 dígitos, empilhá-los no
   celular gasta duas alturas de campo para caber sete caracteres. */
.cl__cartao-campos .cl__linha--2 { grid-template-columns: 1fr 1fr; gap: 8px; }

.cl__cartao-visual {
  display: flex; flex-direction: column; justify-content: space-between;
  /* sem altura fixa: o `stretch` do grid faz ele acompanhar a coluna dos campos,
     então mexer num campo não desalinha o par */
  padding: 20px; border-radius: 14px;
  background: linear-gradient(135deg, #1c1c21 0%, #43404a 100%);
  color: #fff;
}
.cl__chip { width: 36px; height: 26px; border-radius: 6px; background: #d9b55c; }
.cl__cartao-num { font-size: 16px; font-weight: 500; }
.cl__cartao-pe { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cl__cartao-pe b {
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; color: rgba(255,255,255,.82);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 560px) {
  /* Uma coluna: ao lado, em 375, os campos ficariam com metade da largura, e
     campo de 16 dígitos é o último lugar para apertar.

     E o cartão fica DEPOIS dos campos, não antes: aqui ele não é enfeite, é
     conferência — a pessoa digita e olha embaixo para ver se bate. Acima dos
     campos ele seria só um retângulo vazio ocupando a primeira tela. */
  .cl__cartao { grid-template-columns: 1fr; gap: 12px; }
  .cl__cartao-visual { max-width: 260px; min-height: 150px; }
}


/* ---------- Clube: produto já escolhido pelo link ---------- */

.cl__escolhido {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid #efefef;
}
.cl__escolhido[hidden] { display: none; }
.cl__escolhido-foto {
  width: 56px; height: 56px; flex: none;
  border-radius: 12px; background: #F6F6F6;
  object-fit: contain; padding: 6px;
}
.cl__escolhido-txt { flex: 1; min-width: 0; }
.cl__escolhido-txt b { display: block; font-size: 15px; font-weight: 600; }
.cl__escolhido-txt small { display: block; margin-top: 2px; font-size: 12px; font-weight: 300; color: #8d877f; }



/* ---------- Clube: selo de pagamento seguro ---------- */

.cl__seguro {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px; border-radius: 100px;
  background: #eef7f0; color: #1fa863;
  font-size: 11.5px; font-weight: 500;
}
.cl__seguro[hidden] { display: none; }
.cl__seguro svg { width: 14px; height: 14px; flex: none; }

@media (max-width: 420px) {
  /* Em tela estreita o selo empurra a logo: fica só o cadeado, que já carrega
     o recado sozinho. */
  .cl__seguro { padding: 6px 9px; font-size: 0; gap: 0; }
  .cl__seguro svg { width: 15px; height: 15px; }
}


/* ---------- Clube: saída quando o banco não confirma o Pix ---------- */

.cl__demorou {
  margin-top: 16px; padding: 16px 18px; border-radius: 14px;
  background: #fff6f1; color: #a85a2c;
  display: flex; flex-direction: column; gap: 4px;
}
.cl__demorou[hidden] { display: none; }
.cl__demorou b { font-size: 13px; font-weight: 600; }
.cl__demorou span { font-size: 12px; font-weight: 300; line-height: 1.45; }
.cl__demorou button {
  margin-top: 10px; padding: 13px; border: 0; border-radius: 100px; cursor: pointer;
  background: var(--orange); color: #fff;
  font-family: inherit; font-size: 11.5px; font-weight: 700;
}