/* Minification failed. Returning unminified contents. (5,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (49,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (50,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (51,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (52,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (56,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (60,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (61,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (64,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (67,1): run-time error CSS1019: Unexpected token, found '@import' (67,9): run-time error CSS1019: Unexpected token, found 'url('00-variables.css')' (80,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (96,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (100,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-dropdown' (101,28): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (111,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width-bold' (111,49): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (130,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (138,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (150,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (152,37): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (160,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-secondary' (170,35): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light' (181,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (189,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-alt' (190,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (199,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (200,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-bg' (201,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (208,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (218,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (249,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (253,17): run-time error CSS1039: Token not allowed after unary operator: '-color-inverse' (281,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (290,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (291,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-secondary' (325,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (325,44): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (326,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (328,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (334,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (349,22): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (416,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-secondary' (428,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (437,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (464,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (464,44): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (465,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (477,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (480,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-text' (481,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-bg' (592,1): run-time error CSS1019: Unexpected token, found '@keyframes' (593,8): run-time error CSS1035: Expected colon, found '{' (598,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (599,8): run-time error CSS1035: Expected colon, found '{' (671,22): run-time error CSS1039: Token not allowed after unary operator: '-color-control' (672,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (690,22): run-time error CSS1039: Token not allowed after unary operator: '-color-control' (691,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (772,1): run-time error CSS1019: Unexpected token, found '@keyframes' (773,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (782,1): run-time error CSS1019: Unexpected token, found '@keyframes' (783,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (792,1): run-time error CSS1019: Unexpected token, found '@keyframes' (793,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (822,17): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-400' (868,1): run-time error CSS1019: Unexpected token, found '@import' (868,9): run-time error CSS1019: Unexpected token, found 'url('00-variables.css')' (962,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (965,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (973,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (974,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (980,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (980,44): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (988,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (1004,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (1035,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1060,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1130,1): run-time error CSS1019: Unexpected token, found '@import' (1130,9): run-time error CSS1019: Unexpected token, found 'url('00-variables.css')' (1140,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-secondary' (1166,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-surface' (1167,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (1191,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-secondary' (1232,22): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light' (1237,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (1240,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted-2' (1244,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (1277,1): run-time error CSS1019: Unexpected token, found '@import' (1277,9): run-time error CSS1019: Unexpected token, found 'url('00-variables.css')' (1297,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (1298,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (1298,44): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (1299,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (1301,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (1308,25): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (1308,51): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light' (1353,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (1353,44): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (1354,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (1394,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (1394,44): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (1395,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (1425,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (1426,10): run-time error CSS1035: Expected colon, found '{' (1441,34): run-time error CSS1046: Expect comma, found '0' (1441,38): run-time error CSS1046: Expect comma, found '/' (1450,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (1460,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (1489,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (1494,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-surface' (1535,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width-bold' (1535,49): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1552,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1572,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (1572,44): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (1573,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (1584,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (1607,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-secondary' (1612,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (1622,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (1653,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (1657,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (1658,28): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (1675,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (1681,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (1711,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-bg' (1712,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (1713,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-text' (1723,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-outline-bg' (1724,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-outline-text' (1725,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (1725,44): run-time error CSS1039: Token not allowed after unary operator: '-btn-outline-border' (1760,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (1783,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (1784,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-bg' (1785,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-text' (1821,1): run-time error CSS1019: Unexpected token, found '@import' (1821,9): run-time error CSS1019: Unexpected token, found 'url('00-variables.css')' (1827,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (1888,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (1897,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-light' (1898,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (1913,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-text' (1914,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-bg' (1916,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (1935,22): run-time error CSS1039: Token not allowed after unary operator: '-color-disabled-bg' (1936,17): run-time error CSS1039: Token not allowed after unary operator: '-color-disabled-text' (1959,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (1963,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (1963,44): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (1964,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (1978,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (1992,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (1992,44): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (1993,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2006,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (2007,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2007,44): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (2030,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2030,44): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (2031,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2040,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-success' (2041,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (2046,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success' (2065,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success' (2078,17): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-800' (2104,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success' (2115,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success' (2155,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-success' (2157,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (2172,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success' (2180,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (2199,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (2211,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-soft' (2213,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (2243,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (2252,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2272,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (2279,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2279,44): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (2280,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (2302,24): run-time error CSS1039: Token not allowed after unary operator: '-spinner-track' (2303,30): run-time error CSS1039: Token not allowed after unary operator: '-spinner-bar' (2311,24): run-time error CSS1039: Token not allowed after unary operator: '-spinner-track' (2312,30): run-time error CSS1039: Token not allowed after unary operator: '-color-inverse' (2353,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-soft' (2354,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (2390,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2390,44): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (2391,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2399,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width-bold' (2399,49): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2403,32): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light' (2437,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted' (2443,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2443,44): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (2444,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2467,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width-bold' (2467,49): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2471,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2471,44): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (2472,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (2516,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (2527,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width-bold' (2527,49): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2540,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-bg' (2541,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (2542,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-text' (2574,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (2589,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (2612,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2612,44): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (2613,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2624,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width-xbold' (2624,50): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2664,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2665,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-alt' (2679,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (2680,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (2689,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (2690,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (2724,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-outline-bg' (2725,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2725,44): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (2726,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2739,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2739,44): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (2740,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2756,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width-xbold' (2756,50): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2773,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-bg' (2774,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-text' (2775,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2775,44): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (2808,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (2839,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2839,44): run-time error CSS1039: Token not allowed after unary operator: '-color-border' (2840,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (2853,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width-xbold' (2853,50): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (2932,25): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2932,51): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light' (2943,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-outline-bg' (2944,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-outline-text' (2945,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2945,44): run-time error CSS1039: Token not allowed after unary operator: '-btn-outline-border' (2946,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (2954,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-bg' (2955,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-text' (2956,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2956,44): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (2961,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-soft' (2962,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (2968,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (2994,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-bg' (2995,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-text' (2996,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2996,44): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (3018,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3046,17): run-time error CSS1039: Token not allowed after unary operator: '-color-accent' (3074,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-soft' (3084,28): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-100' (3089,28): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-200' (3130,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg-success' (3131,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md' (3150,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success' (3176,17): run-time error CSS1039: Token not allowed after unary operator: '-color-success' (3228,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-outline-bg' (3231,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (3231,44): run-time error CSS1039: Token not allowed after unary operator: '-btn-outline-border' (3232,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (3264,22): run-time error CSS1039: Token not allowed after unary operator: '-color-disabled-bg' (3265,24): run-time error CSS1039: Token not allowed after unary operator: '-color-disabled-bg' (3266,17): run-time error CSS1039: Token not allowed after unary operator: '-color-disabled-text' (3277,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (3277,44): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (3278,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (3299,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (3300,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (3300,44): run-time error CSS1039: Token not allowed after unary operator: '-btn-border' (3323,25): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (3323,51): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (3335,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (3361,17): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-400' (3380,25): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (3380,51): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (3395,17): run-time error CSS1039: Token not allowed after unary operator: '-color-gray-400' (3418,18): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (3418,44): run-time error CSS1039: Token not allowed after unary operator: '-color-border-light' (3419,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (3492,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-bg' (3493,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (3494,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-text' (3508,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text' (3563,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (3564,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (3574,22): run-time error CSS1039: Token not allowed after unary operator: '-color-disabled-bg' (3575,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill' (3576,17): run-time error CSS1039: Token not allowed after unary operator: '-color-disabled-text' (3592,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (3594,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (3597,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (3601,17): run-time error CSS1039: Token not allowed after unary operator: '-color-inverse' (3622,24): run-time error CSS1039: Token not allowed after unary operator: '-spinner-track' (3623,30): run-time error CSS1039: Token not allowed after unary operator: '-spinner-bar' (3629,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary' (3631,23): run-time error CSS1039: Token not allowed after unary operator: '-font-family-primary' (3634,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg' (3638,17): run-time error CSS1039: Token not allowed after unary operator: '-color-inverse' (3655,1): run-time error CSS1019: Unexpected token, found '@keyframes' (3656,8): run-time error CSS1035: Expected colon, found '{' */ @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); :root { /* Fuentes */ --font-family-primary: "Barlow", sans-serif; --font-family-secondary: "Barlow", sans-serif; /* Colores base */ --color-text: #000000; --color-inverse: #FFFFFF; /* Marca */ --color-primary: #003378; /* marca */ --color-accent: #015499; /* secundario */ --color-success: #6FCAEF; /* acento éxito (Trade-In) */ /* Grises y bordes */ --color-muted: #6A6A6A; --color-muted-2: #7A7A7A; --color-border: #AAAAAA; --color-border-light: #BFBFBF; --color-disabled-bg: #E6E6E6; --color-disabled-text: #ACACAC; --color-gray-800: #3A3A3A; --color-gray-400: #9C9C9C; --color-gray-300: #E4E4ED; /* spinner track */ --color-gray-200: #C2C2C2; --color-gray-100: #ECECEC; /* Fondos */ --color-bg: #FFFFFF; --color-bg-surface: #F4F4F4; --color-bg-soft: #F6F6F6; --color-bg-alt: #F1F1F1; --color-bg-light: #F7F7F7; --color-bg-success: #F2FDDB; --color-bg-dropdown: #F8F8F8; /* Botones */ --btn-bg: #003378; --btn-text: #FFFFFF; --btn-border: #000000; --btn-outline-bg: #FFFFFF; --btn-outline-text: #000000; --btn-outline-border: #000000; /* Radio */ --radius-pill: 0.6em; --radius-lg: 1.25em; --radius-md: 1em; --radius-sm: 0.625em; /* Bordes */ --border-width: 2px; --border-width-bold: 3px; --border-width-xbold: 5px; /* Controles y efectos */ --color-control: #8C8C8C; --shadow-elev-1: 0px 4px 4px rgba(0, 0, 0, 0.25); /* Spinner */ --spinner-track: var(--color-gray-300); --spinner-bar: var(--color-primary); } @import url('00-variables.css'); a { cursor: pointer; } a:hover, a:focus, a:active { text-decoration: none !important; } body { font-family: var(--font-family-primary); font-weight: 400; font-style: normal; margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; } body { /* max-width: 1080px; */ max-height: 1920px; /* width: 1080px; */ min-height: 1300px; margin: 0 auto; background: var(--color-bg); } .ui-autocomplete.mCustomScrollbar { background: var(--color-bg-dropdown); border: 1px solid var(--color-muted); box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.22); box-sizing: border-box; position: absolute; top: calc(100% - 10%); width: 100%; } .SEARCH_BOX .form-group:hover, .SEARCH_BOX .form-group:active { border: var(--border-width-bold) solid var(--color-primary); } .ui-autocomplete .ProdsHeadContainer { padding: 17px 27px 0; } .ui-autocomplete .ProdsHeadContainer .prods { padding: 16px 0; } .ui-autocomplete .ProdsHeadContainer .prods p { line-height: 11px; margin-bottom: 0; } .ui-autocomplete .ProdsHeadContainer .prods a { font-size: 18px; font-weight: 500; color: var(--color-text); line-height: 26px; text-decoration: none } .ui-autocomplete .ProdsHeadContainer .prods a.see-all { font-size: 18px; font-weight: 600; color: var(--color-primary); line-height: 31px; text-decoration: underline; text-align: center; display: block; } .CART_BOX .mostrame { position: absolute; right: 0; top: 1px; z-index: 99999; background: var(--color-bg); padding: 36px 45px; border-radius: 0px 0px 0px var(--radius-lg); filter: drop-shadow(-20px 20px 49px rgba(0, 0, 0, 0.15)); width: 569px; } .CART_BOX .mostrame h3 { font-size: 32px; font-weight: 700; font-family: var(--font-family-secondary) !important; } .CART_BOX .mostrame ul { list-style: none; padding: 0; } .CART_BOX .mostrame ul li { display: flex; border-bottom: 1px solid var(--color-border-light); padding: 15px 0; } .CART_BOX .mostrame ul li:last-child { border-bottom: none; } .CART_BOX .mostrame ul li .datos { font-size: 24px; font-weight: 700; font-family: var(--font-family-primary) !important; } .CART_BOX .mostrame ul li .datos .price { font-size: 21px; } .CART_BOX .botones { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 30px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .CART_BOX .botones a { font-family: var(--font-family-primary) !important; background: var(--btn-bg); border-radius: var(--radius-pill); padding: 19px 60px; font-size: 29px; font-weight: 600; } .CART_BOX .botones .subtotal { font-family: var(--font-family-primary) !important; display: flex; width: 334px; justify-content: space-between; font-size: 29px; font-weight: 700; margin: 20px 0; } .CART_BOX .botones .discount { font-family: var(--font-family-primary) !important; display: flex; width: 334px; justify-content: space-between; font-size: 29px; font-weight: 700; } .CART_BOX .datos .name { line-height: 28px; padding-bottom: 10px } .CART_BOX .mostrame .i-close-cart:before { content: url(/Content/Images/i-close-cart.svg); } .CART_BOX .mostrame .title-close { display: flex; justify-content: space-between; align-items: baseline; } .CART_BOX .cart-button { position: relative; } .CART_BOX .items { position: absolute; top: -6px; right: -4px; background: var(--color-primary); border-radius: 50%; width: 33px; height: 33px; color: var(--color-inverse); font-size: 21px; font-weight: 700; display: flex; justify-content: center; align-items: center; } .CART_BOX .items .it { padding-top: 2px; } #search-modal { display: none; } #search-modal.showme { display: flex; width: 100%; height: 100%; position: fixed; top: 0; left: 0; justify-content: center; align-items: center; flex-direction: column; background: var(--color-bg); z-index: 9999; } #modal-pickup h2, #search-modal.showme h2 { font-size: 45px; font-weight: 700; margin-bottom: 15px; color: var(--color-text); font-family: var(--font-family-secondary) !important; } #search-modal .SEARCH_BOX fieldset { width: 788px !important; } #modal-tradeIn.showme .i-close, #modal-pickup.showme .i-close, #search-modal.showme .i-close { content: url(/Content/Images/i-close.svg); position: absolute; right: 64px; top: 64px; } .noresult h3 { font-weight: 600; width: 100%; text-align: center; } /* ========================================================= 1. MOBILE (Por defecto - Tamaños pequeños y apilados) ========================================================= */ .cp-container .local-cp a { font-weight: 700; font-size: 14px; line-height: 1.2; display: inline-flex; align-items: center; gap: 10px; border: var(--border-width) solid var(--btn-border); border-radius: var(--radius-pill); padding: 15px; font-family: var(--font-family-primary); text-decoration: none; } .cp-container .local-cp a:hover, .cp-container .local-cp a:focus { color: var(--color-text); } .cp-container .local-cp .sep-cp { display: flex; align-items: center; gap: 15px; justify-content: center; width: 100%; margin-bottom: 20px; } .cp-container .local-cp .sep-cp span { width: 40px; height: 1px; background: var(--color-text); opacity: 0.2; } .cp-container .local-cp .sep-cp p { margin: 0 !important; padding: 0 !important; font-size: 14px; } .cp-container .local-cp a:before { content: ""; background-image: url(/Content/Images/i-gps.svg); display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center; width: 20px; height: 20px; flex-shrink: 0; } #postalCodeModal .cp-container { width: 100%; height: 100%; top: 0; position: absolute; left: 0; display: flex; align-items: center; justify-content: center; } #postalCodeModal .modal-dialog { width: 95% !important; max-width: 500px !important; margin: 15px auto; } #postalCodeModal .modal-content { /* padding: 15px; */ } #postalCodeModal .modal-body { /* padding: 40px 15px 15px; */ } #postalCodeModal .close { position: absolute; right: 15px; top: 15px; opacity: 1; z-index: 10; } #postalCodeModal .close::before { content: url(/Content/Images/i-close.svg); width: 15px; display: inline-block; } #postalCodeModal h2 { text-align: center; margin-bottom: 15px; } #postalCodeModal h2 span { font-family: var(--font-family-secondary); font-weight: 700; font-size: 18px; line-height: 1.2; } #postalCodeModal p { font-weight: 500; font-size: 14px; line-height: 1.4; text-align: center; padding: 0 10px; font-family: var(--font-family-primary) !important; } #postalCodeModal .jumbotron { display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 15px; background: var(--color-bg); padding: 20px; border-radius: 12px; } #postalCodeModal .form-group { display: flex; align-items: center; justify-content: center; gap: 15px; width: 100%; flex-wrap: wrap; /* Apila en mobile */ } #postalCodeModal .i-ubi { content: url(/Content/Images/i-ubi.svg); width: 25px; } #postalCodeModal .form-group .i-ubi:before { content: url(/Content/Images/i-ubi.svg); } #postalCodeModal .form-group .form-control { width: 100px; height: 40px; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-pill); font-size: 16px; padding-left: 20px; } #postalCodeModal .form-group a { width: 100px; height: 40px; margin-top: 0px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); font-weight: 600; font-size: 13px; color: var(--btn-text); background: var(--btn-bg); text-decoration: none; } /* ========================================================= 2. DESKTOP NORMAL (Web estándar - Tamaños moderados) ========================================================= */ @media (min-width: 768px) { #postalCodeModal .modal-dialog { /* max-width: 700px !important; */ } /* #postalCodeModal .modal-content { padding: 30px; } */ /* #postalCodeModal .modal-body { padding: 50px 30px 20px; } */ #postalCodeModal h2 span { font-size: 20px; } #postalCodeModal p { font-size: 16px; padding: 0 30px; } .cp-container .local-cp a { font-size: 16px; padding: 15px; } .cp-container .local-cp .sep-cp p { font-size: 16px; } #postalCodeModal .form-group { flex-wrap: nowrap; /* En una sola línea */ } /* Tamaños de formulario web normales */ #postalCodeModal .form-group .form-control { width: 100px; height: 40px; font-size: 16px; } #postalCodeModal .form-group a { width: 100px; height: 40px; font-size: 14px; } } /* ========================================================= 3. PANTALLA TÁCTIL (Tótem / Monitores 4K o +1400px) ========================================================= */ @media (min-width: 1400px) { #postalCodeModal .modal-dialog { /* max-width: 933px !important; */ } #postalCodeModal h2 span { font-size: 22px; } #postalCodeModal p { font-size: 18px; line-height: 22px; } .cp-container .local-cp a { font-size: 16px; padding: 15px; } .cp-container .local-cp .sep-cp { margin-bottom: 30px; } .cp-container .local-cp .sep-cp p { font-size: 20px; } #postalCodeModal .jumbotron { gap: 15px; padding: 40px; } /* Recuperamos los botones y campos gigantes */ #postalCodeModal .form-group .form-control { width: 100px; height: 40px; font-size: 18px; } #postalCodeModal .form-group a { width: 140px; height: 40px; font-size: 17px; } } /** MODAL STYLING **/ .modal-open #GatewayLoader.modal { background-color: rgba(0, 0, 0, 0.7); z-index: 999990; } #GatewayLoader h3 { text-align: center; color: #fff; font-size: 22px; } #GatewayLoader .cnt { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100vh; } #GatewayLoader .loader { position: relative; text-align: center; margin: 15px auto 35px auto; z-index: 9999; display: block; width: 50px; height: 50px; border: 10px solid #fff; border-radius: 50%; border-top-color: #171718; animation: spin 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite; } @keyframes spin { to { -webkit-transform: rotate(360deg); } } @-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); } } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { appearance: textfield; -moz-appearance: textfield; } /* .flex-wrap { display: flex; flex-wrap: wrap; } */ .relative { position: relative; } .pagination_wrapper { display: flex; align-items: center; justify-content: space-between; } .pagination_wrapper.onlyStart { justify-content: flex-start; } .pagination_wrapper.onlyEnd { justify-content: flex-end; } .pagination { position: absolute; top: calc(50% + 15px); display: block; left: 0; padding-right: 20px !important; padding-left: 20px !important; } .pagination .p-next:after { content: "\f125"; font-family: "Ionicons"; font-size: 36px; color: #FFF; padding-left: 5px; } .pagination .p-last:after { content: "\f124"; font-family: "Ionicons"; font-size: 36px; color: #FFF; padding-right: 5px; } .pagination .p-next, .pagination .p-last { width: 70px; height: 70px; left: 71px; background: var(--color-control); border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; text-decoration: none; } .noDots .owl-controls { display: none; } .owl-controls .owl-nav .owl-next, .owl-controls .owl-nav .owl-prev { width: 45px; height: 45px; background: var(--color-control); border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; text-decoration: none; position: absolute; top: calc(50% - 22px); } .owl-controls .owl-nav .owl-next { right: 0; } .owl-controls .owl-nav .owl-prev { left: 0; } .owl-controls .owl-nav .owl-next:after { content: "\f125"; font-family: "Ionicons"; font-size: 25px; color: #FFF; padding-left: 5px; } .owl-controls .owl-nav .owl-prev:after { content: "\f124"; font-family: "Ionicons"; font-size: 25px; color: #FFF; padding-right: 5px; } /*infinite loader*/ .loading-infinite { display: flex; align-items: center; justify-content: center; width: 100%; } .lds-ellipsis { display: inline-block; position: relative; width: 80px; height: 50px; } .lds-ellipsis div { position: absolute; top: 33px; width: 13px; height: 13px; border-radius: 50%; background: #999; animation-timing-function: cubic-bezier(0, 1, 1, 0); } .lds-ellipsis div:nth-child(1) { left: 8px; animation: lds-ellipsis1 0.6s infinite; } .lds-ellipsis div:nth-child(2) { left: 8px; animation: lds-ellipsis2 0.6s infinite; } .lds-ellipsis div:nth-child(3) { left: 32px; animation: lds-ellipsis2 0.6s infinite; } .lds-ellipsis div:nth-child(4) { left: 56px; animation: lds-ellipsis3 0.6s infinite; } @keyframes lds-ellipsis1 { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes lds-ellipsis3 { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes lds-ellipsis2 { 0% { transform: translate(0, 0); } 100% { transform: translate(24px, 0); } } /* eliminado bloque vacío de ::-webkit-scrollbar */ .point-distance .i-distance:before { content: url(/Content/Images/i-distance.svg); } .point-distance .i-distance { display: block; text-align: center; margin-top: 13px; } .point-distance .distance { font-weight: 700; font-size: 20px; line-height: 31px; display: block; text-align: center; color: var(--color-gray-400); } .padding-0 { padding: 0px; } .padding-top-20 { padding-top: 20px; } .padding-top-50 { padding-top: 50px; } .padding-top-55 { padding-top: 55px; } .padding-bottom-50 { padding-bottom: 50px; } .padding-left-20 { padding-left: 20px; } .padding-left-30 { padding-left: 30px; } .padding-left-35 { padding-left: 35px; } .padding-right-20 { padding-right: 20px; } .padding-right-30 { padding-right: 30px; } .padding-right-35 { padding-right: 35px; } @import url('00-variables.css'); header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 35px 68px; } header .LOGO { flex: 1; position: relative; width: 290px; padding: 0; height: auto; line-height: 0; } header .LOGO .logo-image { width: 100%; display: flex; justify-content: center; user-select: none; } header .LOGO .logo-image img { width: auto; height: 35px; } header .SEARCH, header .CART_BOX { padding-left: 40px; } header .CART_BOX .cart-button .i-cart:before { content: ""; background-image: url(/Content/images/i-cart.svg); background-size: cover; line-height: 50px; text-align: center; height: 80px; width: 80px; display: block; } header .SEARCH .i-search:before { content: url(/Content/Images/i-search.svg); } header .HOME .i-home:before { content: url(/Content/Images/i-home.svg); } header .right, header .header-actions { display: flex; flex-direction: row; align-items: center; gap: 24px; } header.site-header { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 20px 48px; background: #ffffff; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); position: relative; top: 0; z-index: 1005; transition: box-shadow 0.3s ease; } header .header-search-prominent { flex: 1; max-width: 620px; margin: 0 32px; display: flex; align-items: center; position: relative; } header .header-search-prominent .SEARCH_BOX { width: 100%; } .SEARCH_BOX fieldset { height: 60px; width: 700px; background-color: var(--color-bg); padding: 0; position: relative; border-radius: var(--radius-pill); font-size: 20px; margin: 0 auto; display: flex; align-items: center; } .SEARCH_BOX .form-group { border-radius: var(--radius-pill); background-color: var(--color-bg); height: 100%; margin: 0 !important; padding: 0 45px 0 0; width: 100%; position: relative; border: var(--border-width) solid var(--color-muted); } .SEARCH_BOX .form-control { background: transparent none repeat scroll 0 0; border: 0 none !important; border-radius: 0; box-shadow: none; color: var(--color-text); float: right; font-weight: normal; height: 100%; line-height: 100%; margin: 0 0 0 0 !important; overflow: hidden; padding: 0 25px; z-index: 2; display: block; width: 100%; min-width: 0; float: left; transition: border-color ease-in-out .15s; font-size: 16px; font-weight: 400; font-family: var(--font-family-primary) !important; } .SEARCH_BOX .search_submit { background: transparent; border: 0 none; border-radius: 0 60px 60px 0; color: #000000; height: 60px; position: absolute; right: 1px; top: 1px; z-index: 3; display: flex; justify-content: center; align-items: center; } .SEARCH_BOX .search_submit img { position: relative; top: 0; right: 5px; max-width: 25px; } header .header-search-prominent .SEARCH_BOX fieldset { display: flex; align-items: center; width: 100%; height: 48px; border-radius: 24px; border: 2px solid var(--color-primary, #0056b3); background: #f8fafe; overflow: hidden; transition: all 0.25s ease; } header .header-search-prominent .SEARCH_BOX fieldset:focus-within { background: #ffffff; box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.15); } header .header-search-prominent .SEARCH_BOX input[type="text"], header .header-search-prominent .SEARCH_BOX .form-control { flex: 1; border: none; background: transparent; padding: 0 20px; font-size: 15px; color: #1a1a1a; outline: none; box-shadow: none; } header .header-search-prominent .SEARCH_BOX .search_submit, header .header-search-prominent .search-trigger-btn { background: var(--color-primary, #0056b3); color: #ffffff; border: none; height: 100%; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; } header .header-search-prominent .SEARCH_BOX .search_submit:hover, header .header-search-prominent .search-trigger-btn:hover { filter: brightness(1.1); } header .LOGIN_BOX, header .CART_BOX { padding-left: 0; display: flex; align-items: center; } header .LOGIN_BOX .login-button, header .CART_BOX .cart-button { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 12px; border-radius: 8px; transition: background-color 0.2s ease; } header .LOGIN_BOX .login-button:hover, header .CART_BOX .cart-button:hover { background-color: rgba(0, 0, 0, 0.04); } header .LOGIN_BOX .login-button .i-login:before { content: ""; background-image: url(/Content/Images/i-login.svg); background-size: contain; background-repeat: no-repeat; background-position: center; width: 28px; height: 28px; display: block; } @media (max-width: 991px) { header.site-header { padding: 15px 20px; flex-wrap: wrap; gap: 15px; } header .header-search-prominent { order: 3; width: 100%; max-width: 100%; margin: 0; } .SEARCH_BOX fieldset { max-width: 100%; } } @import url('00-variables.css'); /* Titulo principal: margen superior */ #body h1 { font-size: 32px; font-weight: 700; width: 100%; text-align: center; margin-block: 50px; font-family: var(--font-family-secondary) !important; } #body .b-damero { } .b-damero { display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; justify-content: space-between; margin: 50px 5px 50px 5px; } .b-damero .damero-item { /*width: 33.33% !important;*/ display: flex; position: relative; overflow: hidden; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 30px; } .b-damero .damero-item a { background: var(--color-bg-surface); border-radius: var(--radius-lg); max-width: 230px; } .b-damero .damero-item img { width: 100%; z-index: 0; transition: transform .2s; } .b-damero .damero-item:hover img, .b-damero .damero-item:focus img, .b-damero .damero-item:active img { transform: scale(1.2); transition: ease-in-out .3s; } .b-damero .damero-item span { font-size: 18px; font-weight: 700; line-height: 44px; text-align: center; padding-top: 8px; font-family: var(--font-family-secondary) !important; } .b-damero .damero-item span.product { height: 132px; } .b-servicios, .search-container { width: 100%; float: left; } .search-container h2 { font-weight: 700; font-size: 38px; line-height: 47px; text-align: center; width: 100%; margin-bottom: 30px; } .b-servicios { display: flex; align-items: center; justify-content: center; /*background: var(--color-bg-surface);*/ margin-top: 80px; /*border-radius: var(--radius-lg);*/ /*padding: 40px;*/ text-align: center; } .b-servicios .item { margin: 0 auto; } .b-servicios .sep { height: 203px; width: 2px; background: var(--color-border-light); } .b-servicios .item span { font-size: 24px; font-family: var(--font-family-primary) !important; font-weight: 600; line-height: 31px; color: var(--color-muted-2); } .b-servicios .item span strong { color: var(--color-text); } .b-servicios .item .icono { padding-bottom: 15px; } .b-servicios img { max-width: 100%; width: 100% !important; height: auto !important; } /* --- INICIO: Ajustes para Visuar --- */ /* Box de categorias: margen superior e inferior */ #body .b-damero .damero-item { margin-bottom: 25px; margin-top: 25px; } /* --- FIN: Ajustes para Visuar --- */ @media (max-width: 776px) { .b-damero { justify-content: center; } #body .b-damero .damero-item { margin-bottom: 15px; margin-top: 15px; } } @import url('00-variables.css'); .Category .b-damero { justify-content: center; padding: 0 10%; } .Category .b-damero .damero-item { width: 50% !important; } .Category .see-all-products { display: block; text-align: center; margin-bottom: 40px; } .Category .see-all-products a { font-size: 29px; font-weight: 700; font-family: var(--font-family-primary) !important; border: var(--border-width) solid var(--btn-border); border-radius: var(--radius-pill); padding: 10px 20px; color: var(--color-text); min-width: 241px; min-height: 64px; display: inline-block; } .Category h1 { border-bottom: var(--border-width) solid var(--color-border-light); padding-bottom: 30px; margin-bottom: 25px !important; margin-top: 35px !important; text-align: initial !important; font-weight: 700 !important; font-size: 25px !important; display: inline-flex; align-items: center; gap: 10px; } #back_btn { float: left; } #back_btn:before { content: url(/Content/Images/i-arrow-back.svg); } .title h1 { position: relative; /* Necesario para que el absolute funcione sobre este h1 */ padding-right: 130px; /* Evita que el texto de la búsqueda se meta detrás de los botones */ } .header-buttons { position: absolute; right: 15px; /* Anclado a la derecha del H1 */ top: 50%; transform: translateY(-50%); /* Centrado verticalmente perfecto */ display: flex; gap: 10px; /* Espacio de 10px entre los botones */ } /* ========================================= 2. BOTÓN CATEGORÍAS ========================================= */ a.link.open_menu { /* Quitamos position, right, top */ width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border: var(--border-width) solid var(--btn-border); border-radius: var(--radius-pill); text-decoration: none; overflow: hidden; transition: width 0.3s ease; } a.link.open_menu:before { content: ""; display: inline-block; background-image: url(/Content/Images/i-categories.svg); background-size: contain; background-repeat: no-repeat; background-position: center; width: 20px; height: 20px; flex-shrink: 0; } a.link.open_menu .menu-text { white-space: nowrap; opacity: 0; max-width: 0; margin-left: 0; transition: all 0.3s ease; color: #333; font-size: 16px; } /* ========================================= 3. BOTÓN FILTRAR ========================================= */ #open_filter_btn { /* Quitamos position, right, top */ width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border: var(--border-width) solid var(--btn-border); border-radius: var(--radius-pill); text-decoration: none; overflow: hidden; transition: width 0.3s ease; } #open_filter_btn:before { content: ""; display: inline-block; background-image: url(/Content/Images/i-filters.svg); background-size: contain; background-repeat: no-repeat; background-position: center; width: 20px; height: 20px; flex-shrink: 0; } #open_filter_btn .filter-text { white-space: nowrap; opacity: 0; max-width: 0; margin-left: 0; transition: all 0.3s ease; color: #333; font-size: 16px; } /*Category Menu*/ @-webkit-keyframes aparecer { from { opacity: 0; } to { opacity: 1; } } .v-menu li>ul { position: absolute; top: 0; left: 100%; width: 228px; height: 100%; box-shadow: 3px 0 10px rgb(0 0 0 / 20%); -webkit-animation: aparecer .7s; padding: 0; border-left: 0.557994px solid #e4e4e4; display: none; } .v-menu ul { list-style: none; background: var(--color-bg); overflow: hidden; } .v-menu { /* box-shadow: 3px 0 10px rgba(0, 0, 0, .2); -webkit-transition: left .5s ease; -o-transition: left .5s ease; transition: left .5s ease; */ background: var(--color-bg); position: absolute; float: left; /* height: 100%; */ left: 0; width: 250px; top: 0; z-index: 1000; margin-top: 135px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); border-bottom-right-radius: 30px; border-top-right-radius: 30px; } .v-menu #menu_principal a, label, .category-item { color: #868686; display: flex; flex-direction: column; padding-left: 25px; text-decoration: none; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; align-items: center; justify-content: center; padding: 0; font-weight: 700; font-size: 21px; color: var(--color-text); cursor: pointer; } .v-menu img { background: var(--color-bg-surface); border-radius: 9.45915px; display: none; } .v-menu #menu_principal li { line-height: 60px; width: 100%; margin-bottom: 20px; } .v-menu #menu_principal>li { margin: 0 0 5% 0; } .v-menu .boton { color: #fff; height: 30px; line-height: 30px; position: absolute; left: 96%; top: 8px; border-radius: 3px; box-shadow: 0 0 10px rgba(0, 0, 0, .3); background: #64b4db; -webkit-transition: left .2s; -o-transition: left .2s; transition: left .2s; z-index: -1; } .v-menu ul { padding: 12% 0 !important; } .v-menu li.active>ul { display: block; } .v-menu li.active .category-item img { border: var(--border-width-bold) solid var(--color-primary); } .v-menu li.active>ul li .check { display: none; } .v-menu li.active .category-item div { position: relative; } .v-menu li.active .check { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; background: var(--color-primary); border-radius: 72.9167px; position: absolute; top: -10px; right: -10px; } .v-menu li.active .check:before { content: "\f122"; font-family: "Ionicons"; color: #FFF; font-size: 23px; font-weight: 400; line-height: 25px; } .v-menu .show-all a { font-weight: 700 !important; font-size: 28px !important; line-height: 34px !important; border: var(--border-width) solid var(--btn-border); border-radius: var(--radius-pill); max-width: 181px; margin: auto; padding: 15px 10px 12px !important; margin-top: 30px; } /*Filtros*/ #accordion { background: var(--color-bg); position: fixed; height: 100%; right: 0; width: 450px; top: 135px; box-shadow: 3px 0 10px rgba(0, 0, 0, .2); -webkit-transition: left .5s ease; -o-transition: left .5s ease; transition: left .5s ease; z-index: 1000; padding: 30px 52px 40px 52px; max-height: 1920px; overflow: scroll; border-top-left-radius: 30px; border-bottom-left-radius: 30px; } #accordion .title-filter h3 { font-style: normal; font-weight: 700; font-size: 22px; line-height: 40px; font-family: var(--font-family-secondary) !important; margin: 0; } .accordion { color: var(--color-text) !important; cursor: pointer; float: left; font-weight: 700; font-size: 16px; line-height: 18px; padding: 15px 0 14px; position: relative; width: 100%; border-top: 1px solid #e2e2e2; font-family: var(--font-family-primary) !important; } #accordion .title-filter { position: relative; } .accordion ul { display: flex; flex-wrap: wrap; padding-left: 29px; padding-top: 20px; row-gap: 13px; } .accordion ul li { list-style: none; width: 100%; } .accordion ul li a { font-weight: 400; font-size: 18px; line-height: 30px; text-decoration: none; display: inline-flex; align-items: center; } .accordion ul li a:hover, .accordion ul li a:focus { color: var(--color-text); } .filter_area a::before { background: var(--color-bg) none repeat scroll 0 0; border: 1px solid var(--color-border); border-radius: 50%; content: ""; display: block; float: left; height: 20px; width: 20px; margin: 2px 14px 0 0; position: relative; max-height: 35px; max-width: 35px; /* min-width: 35px; */ } .filter_area a:hover, .filter_area a:focus, .filter_area a.checked { color: var(--color-text) !important; font-weight: 700; } .filter_area a.checked::before, .filter_area a:focus::before { background: var(--color-primary) !important; content: "\f122"; font-family: "Ionicons"; font-size: 12px; color: #FFF; font-weight: 100; display: flex; align-items: center; justify-content: center; } .filter-buttoms { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .filter-buttoms .apply-filter, .filter-buttoms .clear-filter { text-align: center; padding: 20px 0 0; } .filter-buttoms .apply-filter a, .filter-buttoms .clear-filter a { display: flex; align-items: center; justify-content: center; background: var(--btn-bg); border-radius: var(--radius-pill); color: var(--btn-text); font-weight: 700; font-size: 20px; line-height: 38px; /* width: 300px; height: 60px; */ padding: 5px 15px; } .filter-buttoms .clear-filter a { background: var(--btn-outline-bg); color: var(--btn-outline-text); border: var(--border-width) solid var(--btn-outline-border); } #accordion .i-close { content: url(/Content/Images/i-close.svg); position: absolute; right: -30px; top: 0; width: 25px; cursor: pointer } .caret { border-top: none !important; border-right: none !important; border-left: none !important; position: absolute; right: 25px; } .caret:before { content: "\f126"; font-family: "Ionicons"; font-weight: 100; } .collapsed .caret:before { content: "\f123"; } .filter_title { position: relative; } .pcms-search .jumbotron { background: var(--color-bg); text-align: center; } .pcms-search .jumbotron h2 { font-size: 40px; font-weight: 700; width: 100%; text-align: center; margin-bottom: 30px; } .pcms-search .jumbotron p { font-size: 36px; font-weight: 400; width: 100%; text-align: center; margin-bottom: 40px; } .pcms-search .jumbotron a { font-size: 36px; font-weight: 600; border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-text); padding: 15px 40px 10px; } .filter-buttoms .clear-filter a { margin-bottom: 50px; } @media (min-width: 776px) { a.link.open_menu:hover { width: 150px; } a.link.open_menu:hover .menu-text { opacity: 1; max-width: 100px; margin-left: 10px; } #open_filter_btn:hover { width: 120px; } #open_filter_btn:hover .filter-text { opacity: 1; max-width: 80px; margin-left: 8px; } } @media (max-width: 776px) { #accordion { width: 60%; } } @import url('00-variables.css'); .Product h3, .Product span, .Product p, .Product a { font-family: var(--font-family-primary) !important; } .Product a:focus, .Product a:hover { text-decoration: none; } .Product #g_image { max-width: 500px; text-align: center; margin: 0 auto; } .Product .GALLERY img { width: 100%; } .Product .allthumbs { display: none; } .Product .PRODUCTAREA { text-align: center; } .Product .PRODUCTAREA h1 { font-weight: 700 !important; font-size: 30px !important; line-height: 40px !important; text-align: left !important; margin-bottom: 10px !important; } .Product .PRODUCTAREA .title-section { margin-bottom: 20px; } .Product .PRODUCTAREA span.code { font-weight: 500; font-size: 16px; line-height: 30px; text-align: left; display: block; } .Product .tachado { font-weight: 500; font-size: 18px; line-height: 20px; text-decoration-line: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.5); } .Product .promo { font-weight: 700; font-size: 24px; line-height: 32px; color: var(--color-accent); margin-bottom: 15px; } .Product .price_wrapper { display: flex; justify-content: center; align-items: center; flex-direction: column; background: var(--color-bg-light); border-radius: var(--radius-sm); padding: 18px 0; min-height: 183.49px; } .Product .price { font-weight: 700; font-size: 32px; line-height: 20px; margin-top: 10px; } .Product .BUTTONBUY { font-size: 25px; font-weight: 600; color: var(--btn-text); background: var(--btn-bg); padding: 20px 30px; border-radius: var(--radius-pill); margin: 40px 0; display: inline-block; } .Product h1 { margin-top: 50px; } .Product .BUY-BUTTOM { width: 100%; display: inline-flex; align-items: center; justify-content: center; position: relative; } .Product .BUY-BUTTOM.nonavailable a { background: var(--color-disabled-bg); color: var(--color-disabled-text); cursor: not-allowed; } .Product .BUY-BUTTOM.disabled a { pointer-events: none; cursor: not-allowed; } .Product .BUY-BUTTOM a { width: 620px; text-align: center; font-weight: 700; font-size: 38px; line-height: 46px; padding: 27px 30px; } .Product .backsite { font-style: normal; font-weight: 700 !important; font-size: 28px !important; line-height: 34px !important; color: var(--color-text); display: flex; align-items: center; flex-direction: row; border: var(--border-width) solid var(--color-text); border-radius: var(--radius-pill); padding: 21px 30px; } .Product .backsite:before { content: url(/Content/Images/Cart/i-back-arrow.svg) !important; padding-right: 13px; line-height: 0; } .Product .price_wrapper.nonavailable div { font-weight: 700; font-size: 30px; line-height: 20px; color: var(--color-text); opacity: 0.5; } /*Trade In*/ .Product .tradein { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 20px; margin: 50px 0px 0px 0px; padding: 30px; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); } .Product .tradein .trade-title { display: flex; align-items: center; gap: 20px; } .Product .tradein .trade-button { font-weight: 700; font-size: 30px; line-height: 33.58px; border-radius: var(--radius-pill); border: var(--border-width) solid var(--btn-border); width: auto; text-align: center; padding: 26px 126px; box-sizing: border-box; } .Product .tradein .eco-text { margin-top: 10px; } .row.tradein.complete .trade-devices { display: flex; justify-content: center; align-items: center; margin-top: 10px; } .Product .tradein.complete { display: block; width: 100%; margin-top: 50px; padding: 30px; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); } .row.tradein.complete .trade-devices.one-device { justify-content: flex-start; gap: 30px; } .Product .tradein .complete .trade-devices .device { background-color: var(--color-bg-success); border-radius: var(--radius-sm); min-height: 70px; } .Product .tradein .complete .trade-devices .device p { color: var(--color-success); font-weight: 600; font-size: 24px; line-height: 28px; } #First-Device.single-trade { width: 876px; } .row.tradein.complete .trade-value { display: flex; align-items: center; gap: 20px; justify-content: flex-start; margin-top: 10px; } .row.tradein.complete .trade-value .value { color: var(--color-success); font-size: 29px; font-style: normal; font-weight: 700; /*line-height: 20px;*/ display: flex; justify-content: center; align-items: center; align-self: flex-start; margin-top: 6px; } .row.tradein.complete .note { color: var(--color-gray-800); font-size: 24px; font-style: normal; font-weight: 400; line-height: 29px; margin-bottom: 0px; } .Product .tradein .complete .eco-text, .Product .tradein .eco-text span { font-weight: 400; font-size: 21px; line-height: 30px; } .Product .tradein .complete .eco-text { display: flex; align-items: center; gap: 20px; } .Product .tradein.eco-text { font-weight: 800; font-size: 25px; line-height: 30px; margin: 0; color: var(--color-success); } .Product .tradein.eco-text { margin-top: 30px; } .Product .tradein .eco-text p span { font-weight: 800; font-size: 25px; line-height: 30px; color: var(--color-success); } #List-Trade { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0px; padding: 0px; width: 100%; } #List-Trade li { font-weight: 400; font-size: 21px; line-height: 30px; width: 50%; float: left; box-sizing: border-box; } #List-Trade .device .device-edition { display: flex; align-items: center; justify-content: space-between; gap: 30px; } #List-Trade .device .delete-trade { content: url(/Content/Images/Trade/i-borrar.svg); height: 30px; width: 30px; } #List-Trade .device { display: flex; align-items: center; justify-content: space-between; background-color: var(--color-bg-success); gap: 20px; border-radius: var(--radius-sm); padding: 15px 21px; width: 100%; align-self: stretch; } #List-Trade.one-device { width: 50%; } #List-Trade .device p { margin-bottom: 0px; font-weight: 600; font-size: 24px; line-height: 28px; color: var(--color-success); } #List-Trade .device-edit { text-decoration: underline; font-weight: 700; font-size: 26px; line-height: 31.18px; color: var(--color-text); } .row.tradein.complete .add-device { content: url(/Content/Images/i-add-device.svg); width: 30px !important; border: none !important; padding: 0 !important; display: inline-block; vertical-align: text-top; } .add-device-container { display: flex; gap: 10px; width: 50%; } .add-device-container span { font-family: var(--font-family-primary); font-size: 26px; font-weight: 700; line-height: 31px; letter-spacing: 0em; text-align: left; } /*VTEX Custom Info*/ .vtex-info { margin-top: 50px; min-height: 288px; background: var(--color-bg-soft); padding: 30px 64px; border-radius: var(--radius-sm); } .vtex-info .loading-logistic { display: flex; flex-direction: column; gap: 40px; padding-top: 10px; } .vtex-info .pickup, .vtex-info .shipping { display: inline-flex; align-items: flex-start; gap: 10px; } .vtex-info .pickup h3, .vtex-info .shipping h3 { font-weight: 700; font-size: 25px; line-height: 30px; margin: 0; } .vtex-info .pickup p, .vtex-info .shipping p { font-weight: 500; font-size: 24px; line-height: 32px; color: var(--color-muted); opacity: 0.8; } .vtex-info .pickup a { font-weight: 700; font-size: 25px; line-height: 30px; text-decoration-line: underline; color: var(--color-primary); display: inline-flex; gap: 4px; } .vtex-info .pickup a:after { content: url(/Content/Images/i-more-info.svg); float: left; } .i-ubi { content: url(/Content/Images/i-ubi.svg); width: 25px; } .vtex-info .change-cp .my-cp { font-weight: 500; font-size: 32px; line-height: 51px; color: var(--color-accent); } .vtex-info .change-cp a { font-weight: 700; font-size: 28px; line-height: 34px; border: var(--border-width) solid var(--btn-border); border-radius: var(--radius-pill); padding: 10px 10px; padding: 13px 28px; } .vtex-info .change-cp a:hover { color: inherit; } .vtex-info .change-cp { display: inline-flex; align-items: center; gap: 15px; margin-top: 10px; } .loading-price .loading, .vtex-info .loading-data .loading { width: 50px; height: 50px; border-radius: 50%; border: 8px solid; border-color: var(--spinner-track); border-right-color: var(--spinner-bar); animation: s2 1s infinite linear; } .BUY-BUTTOM .to-loading { display: none; position: absolute; top: 38%; border-color: var(--spinner-track); border-right-color: var(--color-inverse) !important; width: 50px; height: 50px; border-radius: 50%; border: 8px solid; animation: s2 1s infinite linear; } .BUY-BUTTOM.active-loading .to-loading { display: block; } .BUY-BUTTOM.active-loading a { color: transparent !important; pointer-events: none; cursor: not-allowed; } .loading-price, .vtex-info .loading-data { align-items: center; justify-content: center; min-height: 200px; display: flex; } .vtex-info span.sin-stock { font-weight: 500; font-size: 29px; line-height: 48px; text-align: center; } .Product .sub-title { font-weight: 500; font-size: 32px; line-height: 51px; } .details-container { background: var(--color-bg-soft); border-radius: var(--radius-sm); margin-bottom: 60px; margin-top: 30px; padding: 30px; } .details-container .product-details { font-size: 24px; line-height: 36px; margin-bottom: 50px; } .details-container .product-details > h4 { font-size: inherit; } /*FILTROS PDP*/ /* .contenedor-filtros removed empty ruleset */ .contenedor-filtros .elementos-filtro .name { font-weight: 500; font-size: 32px; line-height: 51px; flex: 2; } .contenedor-filtros .elementos-filtro { display: inline-flex; gap: 20px; align-items: center; width: 100%; } .contenedor-filtros .elementos-filtro b a { font-weight: 700; font-size: 26px; line-height: 31px; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: 30px 24px; display: inline-block; width: 200px !important; text-align: center; } .contenedor-filtros .elementos-filtro .seleccionado b a { border: var(--border-width-bold) solid var(--color-primary); } .contenedor-filtros .filtro-individual { border-top: 1px solid var(--color-border-light); margin: 30px 0; padding-top: 30px; } .contenedor-filtros .filter_items { flex: 8; padding: 0 55px; max-width: 750px; } .contenedor-filtros .circle-color { border-radius: 100%; width: 46px !important; height: 46px !important; border: 1px solid rgba(0, 0, 0, .1); margin: auto auto 10px; } /* .contenedor-filtros removed empty ruleset */ /*Pickup Modal*/ #modal-pickup.showme { justify-content: flex-start; padding: 15% 0; width: 100%; } #modal-pickup .ubi .change { font-weight: 500; font-size: 21px; line-height: 30px; color: var(--color-muted); } #modal-pickup input { width: 237.35px; height: 80px; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); font-weight: 400; font-size: 28px; line-height: 34px; padding-left: 20px; pointer-events: none; } #modal-pickup h2 { text-align: center; } #modal-pickup .ubi { display: inline-flex; align-items: center; justify-content: center; gap: 15px; width: 100%; margin-top: 40px; margin-bottom: 80px; } #modal-pickup #CarrouselStore li.active { border: var(--border-width-bold) solid var(--color-primary); } #modal-pickup #CarrouselStore li { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); margin: 0 20px; list-style: none; padding: 20px 10px; cursor: pointer; max-width: 460px; display: inline-flex; gap: 15px; } #modal-pickup #CarrouselStore li h4 { font-weight: 800; font-size: 29px; line-height: 35px; } #modal-pickup #CarrouselStore li p { font-weight: 500; font-size: 23px; line-height: 31px; } #modal-pickup #CarrouselStore { width: 100%; } #modal-pickup #CarrouselStore.onlyOne.owl-carousel .owl-stage { width: 100% !important; display: inline-flex !important; justify-content: center !important; } .pickup-container { width: 100%; } #modal-pickup { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: var(--color-bg); z-index: -1000; visibility: hidden; } #modal-pickup.showme { z-index: 1000; visibility: visible; } #modal-pickup #CarrouselStore li.active { border: var(--border-width-bold) solid var(--color-primary); } #modal-pickup .close-modal { display: inline-flex; width: 100%; justify-content: center; margin-top: 32px; } #modal-pickup .close-modal a { width: 400px; height: 80px; background: var(--btn-bg); border-radius: var(--radius-pill); color: var(--btn-text); display: inline-flex; justify-content: center; align-items: center; font-weight: 700; font-size: 38px; line-height: 46px; } #modal-pickup .custom-map { position: relative; bottom: 0; left: 0; height: 932px; width: 100%; margin-top: 60px; } #modal-pickup .cp-container { padding-left: 20px; } /*Trade In*/ #modal-tradeIn { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: var(--color-bg); z-index: 1000; padding: 14% 64px; } #modal-tradeIn.edition { position: absolute; } #modal-tradeIn.showme { display: block; } #modal-tradeIn h3, #modal-tradeIn h3 span { color: var(--color-text); font-size: 40px; font-style: normal; font-weight: 700; line-height: 55px; } #modal-tradeIn #validationMessage { padding-top: 5px; font-size: 21px; color: rgb(170, 170, 170); } #modal-tradeIn .select-flex { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 15px; margin-top: 40px; } #modal-tradeIn .select-flex div { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); height: 236.74px; width: 460px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } #modal-tradeIn .select-flex div.active { border: var(--border-width-xbold) solid var(--color-primary); box-shadow: 12px 12px 30px rgba(0, 0, 0, 0.1); } #modal-tradeIn .select-flex span { font-weight: 700; font-size: 28px; line-height: 34px; } #modal-tradeIn .select-flex span.i-trade-phone { content: url(/Content/Images/Trade/trade-phone.svg); height: auto; width: 150px; } #modal-tradeIn .select-flex span.i-trade-tablet { content: url(/Content/Images/Trade/trade-tablet.svg); height: auto; width: 150px; } #modal-tradeIn .select-flex span.i-trade-tv { content: url(/Content/Images/Trade/trade-tv.svg); height: auto; width: 150px; } #modal-tradeIn .select-flex .Trade-Tv { width: 100%; } #modal-tradeIn #tv-model { display: flex; width: 952px; padding: 30px; flex-direction: column; justify-content: center; align-items: center; gap: 36px; border-radius: var(--radius-md); background-color: var(--color-bg-alt); margin-top: 78px; } #modal-tradeIn #tv-model .model-find { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; } #modal-tradeIn #tv-model .model-find p { align-self: stretch; color: var(--color-text); font-family: var(--font-family-primary); font-size: 26px; font-style: normal; font-weight: 700; line-height: 30px; } #modal-tradeIn #tv-model .model-find li { align-self: stretch; color: var(--color-text); font-family: var(--font-family-primary); font-size: 26px; font-style: normal; font-weight: 500; line-height: 30px; } .model-find p { text-align: left; } .model-find ul { align-self: flex-start; } #modal-tradeIn .tv-model-img { margin-top: 26px; content: url(/Content/Images/Trade/tv-model.svg); height: auto; width: 80%; max-height: 225px; } #modal-tradeIn .tv-model-steps { margin-top: 26px; content: url(/Content/Images/Trade/tv-steps.svg); height: auto; width: 80%; max-height: 69px; } #modal-tradeIn .select-brand, #modal-tradeIn .select-model { height: 110px; background: var(--btn-outline-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); font-size: 34px; line-height: 31px; display: inline-flex; align-items: center; justify-content: initial; width: 100%; padding: 0 20px; margin-bottom: 20px; } #modal-tradeIn .selects select { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); height: 110px; font-weight: 700; font-size: 34px; line-height: 31px; display: flex; align-items: center; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 10px; background: url('/Content/Images/Trade/select-arrow.svg') no-repeat right center; background-position: calc(100% - 30px) center; } #modal-tradeIn .selects .active { border: var(--border-width-xbold) solid var(--color-primary); appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url('/Content/Images/Trade/i-device-check.svg') no-repeat right center; background-position: calc(100% - 30px) center; } #modal-tradeIn .selects { margin-top: 78px; } #trade-wm .selects { margin-top: 10px; } #modal-tradeIn .st1 .buttons a.black { background: var(--btn-bg); color: var(--btn-text); border: var(--border-width) solid var(--btn-border); } #modal-tradeIn #tradeIn_back_btn { position: absolute; top: 64px; } #modal-tradeIn .phone-step { display: inline-flex; gap: 15px; margin-bottom: 30px; } #modal-tradeIn .wm-step { display: inline-flex; margin-bottom: 25px; margin-top: 25px; } #modal-tradeIn .wm-step .content-info { padding-right: 124px; padding-top: 40px; } #modal-tradeIn .phone-step h4, #modal-tradeIn .wm-step h4 { font-weight: 700; font-size: 26px; line-height: 31px; } #modal-tradeIn .wm-step.last-step h4 { font-family: var(--font-family-primary); font-size: 32px; font-weight: 700; line-height: 55px; text-align: left; } #modal-tradeIn .phone-step p, #modal-tradeIn .phone-step li, #modal-tradeIn .wm-step p, #modal-tradeIn .wm-step li { font-weight: 500; font-size: 22px; line-height: 31px; } #modal-tradeIn .phone-step li, #modal-tradeIn .phone-step li, #modal-tradeIn .wm-step li, #modal-tradeIn .wm-step li { color: #000; } #modal-tradeIn .phone-step .options, #modal-tradeIn .wm-step .options { display: inline-flex; gap: 15px; } #modal-tradeIn .phone-step a, #modal-tradeIn .wm-step a { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); width: 200px; height: 71px; font-weight: 700; font-size: 26px; line-height: 31px; display: flex; justify-content: center; align-items: center; } #modal-tradeIn .phone-step a.active, #modal-tradeIn .wm-step a.active { border: var(--border-width-xbold) solid var(--color-primary); } #modal-tradeIn .phone-step .i-trade-01 { content: url(/Content/Images/Trade/trade-01.svg); } #modal-tradeIn .phone-step .i-trade-02 { content: url(/Content/Images/Trade/trade-02.svg); } #modal-tradeIn .phone-step .i-trade-03 { content: url(/Content/Images/Trade/trade-03.svg); } #modal-tradeIn .phone-step .i-trade-04 { content: url(/Content/Images/Trade/trade-04.svg); } #modal-tradeIn .phone-step .i-trade-05 { content: url(/Content/Images/Trade/trade-05.svg); } #modal-tradeIn .phone-step .i-trade-tablet-01 { content: url(/Content/Images/Trade/trade-tablet-01.svg); } #modal-tradeIn .phone-step .i-trade-tablet-02 { content: url(/Content/Images/Trade/trade-tablet-02.svg); } #modal-tradeIn .phone-step .i-trade-tablet-03 { content: url(/Content/Images/Trade/trade-tablet-03.svg); } #modal-tradeIn .phone-step .i-trade-tablet-04 { content: url(/Content/Images/Trade/trade-tablet-04.svg); } #modal-tradeIn .phone-step .i-trade-tablet-05 { content: url(/Content/Images/Trade/trade-tablet-05.svg); } #modal-tradeIn .phone-step .i-trade-tv-01 { content: url(/Content/Images/Trade/trade-tv-01.svg); } #modal-tradeIn .phone-step .i-trade-tv-02 { content: url(/Content/Images/Trade/trade-tv-02.svg); } #modal-tradeIn .phone-step .i-trade-tv-03 { content: url(/Content/Images/Trade/trade-tv-03.svg); } #modal-tradeIn .phone-step .i-trade-tv-04 { content: url(/Content/Images/Trade/trade-tv-04.svg); } #modal-tradeIn .condition-phone { display: flex; flex-direction: column; gap: 23px; justify-content: initial; } #modal-tradeIn .buttons { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 60px; } #modal-tradeIn .buttons div { display: inline-flex; justify-content: space-between; width: 100%; border-bottom: var(--border-width) solid var(--color-border-light); padding-bottom: 30px; margin-bottom: 30px; } #modal-tradeIn .buttons a { font-weight: 700; font-size: 38px; line-height: 46px; width: 460px; height: 80px; background: var(--btn-outline-bg); color: var(--btn-outline-text); border: var(--border-width) solid var(--btn-outline-border); border-radius: var(--radius-pill); display: flex; align-items: center; text-align: center; justify-content: center; } #modal-tradeIn .buttons div a.black { background: var(--btn-bg); color: var(--btn-text); border: var(--border-width) solid var(--btn-border); } #modal-tradeIn .not-allowed .not-allowed-box { margin-top: 50px; background: var(--color-bg-soft) 0 0 no-repeat padding-box; font-family: var(--font-family-primary); border-radius: 6px; box-sizing: border-box; padding: 24px; text-align: center; letter-spacing: 0; color: var(--color-text); opacity: 1; word-break: normal; } #modal-tradeIn .not-allowed .not-allowed-box p { margin-top: 10px; font-weight: 600; font-size: 25px; line-height: 31px; } #modal-tradeIn #trade-wm .not-allowed .not-allowed-box p { font-size: 36px; font-weight: 500; line-height: 43.17px; text-align: left; } #modal-tradeIn .not-allowed span { font-weight: 700; font-size: 15px; line-height: 31px; } #modal-tradeIn .not-allowed .buttons a.black { background: var(--btn-bg); color: var(--btn-text); border: var(--border-width) solid var(--btn-border); } #modal-tradeIn .tyc-text-container { margin-top: 25px; } #modal-tradeIn .tyc .tyc-agree { display: flex; flex-direction: row; gap: 20px; margin-top: 30px; } #modal-tradeIn .tyc span { font-weight: 500; font-size: 29px; line-height: 41px; } #modal-tradeIn .tyc span a { font-weight: 700; color: var(--color-accent); text-decoration: underline; } #modal-tradeIn .tyc span small { font-weight: 700; color: #D93B30; } #modal-tradeIn .tyc input { height: 40px; width: 40px; } #modal-tradeIn .tyc-accept { display: flex; flex-direction: column; align-items: center; } #modal-tradeIn .tyc-accept span { font-weight: 500; font-size: 30px; line-height: 41px; } #modal-tradeIn .tyc-accept a { font-weight: 700; color: var(--color-accent); } #modal-tradeIn .tyc-text p, #modal-tradeIn .tyc-text-container p { font-weight: 500; font-size: 28px; line-height: 37.8px; } #modal-tradeIn .tyc p { font-weight: 700; font-size: 29px; line-height: 39px; } #modal-tradeIn .tyc p, #modal-tradeIn .tyc input { margin: 0; } #modal-tradeIn .tyc-text-container .tyc-text { font-size: 28px; font-style: normal; font-weight: 500; line-height: 135%; margin-top: 30px; background-color: var(--color-bg-soft); padding: 30px 30px 0px 30px; width: auto; height: 552px; overflow: hidden; overflow-y: visible; } #modal-tradeIn .tyc-text-container .tyc-text::-webkit-scrollbar { width: 10px; background-color: var(--color-gray-100); border-radius: 20px; } #modal-tradeIn .tyc-text-container .tyc-text::-webkit-scrollbar-thumb { background-color: var(--color-gray-200); border-radius: 20px; } #modal-tradeIn .tyc-text-container .tyc-text span { font-weight: 700; font-size: 28px; line-height: 37.8px; } #modal-tradeIn .tyc-text-container .tyc-text p { font-weight: 500; font-size: 28px; line-height: 37.8px; } #modal-tradeIn .tyc .check::after { content: url('../../images/i-empty-check.svg'); } #modal-tradeIn .tyc .check.checked::after { content: url('../../images/i-checked.svg'); } .tyc-accept .terms-arrow::after { content: url(/Content/Images/i-arrow-terms.svg); margin-left: 5px; transform: rotateZ(-180deg); display: inline-block; position: relative; top: 5px; transition: transform 0.4s ease; } .tyc-accept .terms-arrow.open::after { transform: rotateZ(0deg); top: 0px; transition: transform 0.4s ease; } #modal-tradeIn .st3 .totals { background: var(--color-bg-success); border-radius: var(--radius-md); height: 165px; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 52px; } #modal-tradeIn .st3 h3 { font-weight: 700; font-size: 30px; line-height: 47px; } #modal-tradeIn .st3 p.thanks { font-weight: 700; font-size: 40px; line-height: 55px; color: var(--color-success); } #modal-tradeIn .st3 .totals.double { align-items: initial; padding: 0 5%; font-weight: 600; font-size: 29px; line-height: 45px; } #modal-tradeIn .st3 .totals.double>div { display: inline-flex; justify-content: space-between; align-items: center; } #modal-tradeIn .st3 .totals.double .total-price { font-weight: 800 !important; font-size: 29px !important; line-height: 45px !important; } #modal-tradeIn .st3 .totals span { font-weight: 600; font-size: 33px; color: var(--color-success); line-height: 45px; } #modal-tradeIn .st3 .description p.paragraph-1 { font-size: 24px; font-weight: 500; line-height: 34px; } #modal-tradeIn .st3 .description p.paragraph-2 { font-size: 29px; font-weight: 600; line-height: 39px; } #modal-tradeIn .st3.edit, #modal-tradeIn .st2.edit { margin-top: 100px; } #modal-tradeIn .st3 .buttons { margin-top: 30px; } #modal-tradeIn .st3 .buttons.edition { padding-bottom: 300px; } #modal-tradeIn .st2 { margin-top: 35px; } #modal-tradeIn .devices div div span { display: block; font-weight: 500; font-size: 25px; line-height: 36px; } #modal-tradeIn .devices div div span.device-name { font-weight: 700; } #modal-tradeIn .devices { display: flex; flex-direction: column; gap: 30px; } #modal-tradeIn .devices .edit { background: var(--btn-outline-bg); width: 211px; height: 64px; border: var(--border-width) solid var(--btn-outline-border); border-radius: var(--radius-pill); display: flex; font-weight: 700; font-size: 29px; line-height: 35px; justify-content: center; align-items: center; } #modal-tradeIn .devices .first-device div:last-child, #modal-tradeIn .devices .second-device div:last-child { display: inline-flex; align-items: center; gap: 25px; } #modal-tradeIn .devices .first-device, #modal-tradeIn .devices .second-device { display: inline-flex; width: 100%; justify-content: space-between; } #modal-tradeIn .devices .delete { content: url(/Content/Images/Trade/i-borrar.svg); width: unset !important; border: none !important; padding: 0 !important; } #modal-tradeIn .disabled { pointer-events: none !important; background: var(--color-disabled-bg) !important; border-color: var(--color-disabled-bg) !important; color: var(--color-disabled-text) !important; } .Product .tradein.complete .trade-button { width: auto; height: 64px; gap: 15px; } .Product .tradein.complete .trade-button a { border: var(--border-width) solid var(--btn-border); border-radius: var(--radius-pill); width: 188px; } .Product .tradein.complete>span { font-style: normal; font-weight: 600; font-size: 25px; line-height: 17px; } /* trade-wm */ #modal-tradeIn #trade-wm .sub-title-amba { font-size: 32px; } #verifyButton, .verify-button { font-weight: 700; font-size: 38px; line-height: 33.58px; border-radius: var(--radius-pill); border: var(--border-width) solid var(--btn-border); width: auto; text-align: center; padding: 21px 58px; margin-left: 40px; box-sizing: border-box; } .know-postal-code { font-size: 24px; font-weight: 600; line-height: 32px; text-align: left; text-decoration: underline; } .verify-postal-code { padding: 20px 50px 30px 50px; } #postal-code-verify { height: 80px; border: none; border-bottom: var(--border-width) solid var(--color-text); outline: none; padding: 8px 0; /*margin-right: 30px;*/ font-size: 32px; width: 100%; } /* Estilos del icono de check */ .check-icon { position: absolute; right: 10px; color: var(--color-primary); font-size: 28px; margin-left: 5px; display: none; /* Oculto por defecto */ } /* Contenedor del ingreso de codigo postal en el trade in de lavarropas */ .pc-container { display: flex; position: relative; margin: 20px 0 5px 0; width: 100%; max-width: 530px; } .pc-container .check-icon { top: 25px; } /* Estilo del label flotante */ .floating-label { position: absolute; top: 50%; /* Posici�n inicial centrada verticalmente */ left: 0; color: var(--color-gray-400); font-size: 16px; pointer-events: none; /* Evita la interacci�n con el label */ transition: 0.3s ease; /* Animaci�n de transici�n */ transform: translateY(-50%); /* Alinea verticalmente al centro */ /*padding-left: 8px;*/ /* Espacio para separar el texto */ font-size: 32px; font-weight: 300; line-height: 38.38px; text-align: left; } /* Estilo del input */ .custom-input { border: none; border-bottom: var(--border-width) solid var(--color-text); outline: none; padding: 10px 0; font-size: 25px; width: 100%; } #serial-number-verify { font-size: 32px; } /* Si hay contenido, mueve el label hacia arriba */ .custom-input:not(:placeholder-shown)+.floating-label, .custom-input:focus+.floating-label { top: -15px; color: var(--color-gray-400); /* Cambia el color al activarse */ font-size: 24px; font-weight: 600; line-height: 51px; text-align: center; } .content-serial-number { margin: 40px; } #validationMessage-serial-number { font-size: 21px; font-weight: 500; line-height: 32px; text-align: left; padding-top: 5px; padding-right: 270px; } /*Box*/ .BOX_DATA { border: var(--border-width) solid var(--color-border-light); border-radius: var(--radius-lg); padding: 20px 10px 30px; height: 700px; overflow: hidden; margin-bottom: 50px; } .BOX_DATA h3.name { font-weight: 700; font-size: 18px; line-height: 29px; display: block; text-align: center; height: 70px; margin: 2px 0 5px; overflow: hidden; } .BOX_DATA .box-image { float: left; height: 260px; position: relative; width: 100%; } .BOX_DATA .box-image img { width: auto; transform-style: unset !important; height: auto; left: 0; margin: auto; max-height: calc(100% - 6px); max-width: calc(100% - 6px); position: absolute; right: 0; bottom: 0; } .BOX_DATA .box-info { display: table; margin: auto; width: 100%; position: relative; } .BOX_DATA .box-info .box-price { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 20px 0; height: 85px; overflow: hidden; } .BOX_DATA .box-info .box-price .price { font-weight: 700; font-size: 22px; line-height: 17px; } .BOX_DATA .box-info .box-price .tachado { font-weight: 500; font-size: 16px; line-height: 15px; color: rgba(0, 0, 0, 0.5); text-decoration-line: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(0, 0, 0, 0.2); } .BOX_DATA .BUTTONBUY a.buy { background: var(--btn-bg); border-radius: var(--radius-pill); color: var(--btn-text); padding: 10px 30px; font-weight: 700; font-size: 16px; line-height: 29px; } .BOX_DATA .BUTTONBUY { text-align: center; padding: 20px 0 0; } .BOX_DATA a, .BOX_DATA a:focus { color: var(--color-text); text-decoration: none; } .BOX_DATA .box-info .vtex-badges { display: inline-flex; justify-content: space-around; align-items: center; width: 100%; text-align: center; height: 105px; overflow: hidden; } .BOX_DATA .box-info .vtex-badges .shipping, .BOX_DATA .box-info .vtex-badges .pickup { width: 50%; min-height: 92px; } .i-shipping-free:before, .BOX_DATA .box-info .vtex-badges .shipping span:before { content: url(/Content/Images/i-truck-free.svg); } .i-pickup:before, .BOX_DATA .box-info .vtex-badges .pickup span:before { content: url(/Content/Images/i-pickup.svg); } .i-pickup-same:before, .BOX_DATA .box-info .vtex-badges .pickup-same span:before { content: url(/Content/Images/i-pickup-same.svg); } .BOX_DATA .box-info .vtex-badges p { font-weight: 600; font-size: 17px; line-height: 18px; padding: 0 5px; } .BOX_DATA .box-tradein { display: flex; align-items: center; justify-content: center; gap: 5px; } .BOX_DATA .box-tradein img { width: 45px; height: auto; } .BOX_DATA .box-tradein p { color: var(--color-primary); font-family: var(--font-family-primary); font-size: 16px; font-style: normal; font-weight: 600; line-height: 20px; letter-spacing: -0.4px; margin: 0; } .BOX_DATA .BUTTONBUY.no-avalaible a.buy { background: var(--color-disabled-bg); border-radius: var(--radius-pill); color: var(--color-disabled-text); padding: 19px 32px; font-weight: 700; font-size: 24px; line-height: 29px; cursor: not-allowed; } .BOX_DATA span.sin-stock { font-weight: 600; font-size: 17px; line-height: 24px; } .BOX_DATA .badge-dto.percent { position: absolute; background: var(--color-primary); z-index: 1; font-family: var(--font-family-primary) !important; height: 35px; width: 65px; border-radius: var(--radius-lg); line-height: 31px; letter-spacing: .5px; text-align: center; color: var(--color-inverse); font-weight: 700; font-size: 18px; line-height: 17px; display: flex; align-items: center; justify-content: center; right: 10%; } .BOX_DATA .badge-highlight { position: absolute; right: 10%; z-index: 1; } .BOX_DATA .loading { width: 50px; height: 50px; border-radius: 50%; border: 8px solid; border-color: var(--spinner-track); border-right-color: var(--spinner-bar); animation: s2 1s infinite linear; } .discount .badge-dto.percent { position: absolute; background: var(--color-primary); z-index: 1; font-family: var(--font-family-primary) !important; height: 41px; width: 78px; border-radius: var(--radius-lg); line-height: 31px; letter-spacing: .5px; text-align: center; color: var(--color-inverse); font-weight: 700; font-size: 21.4762px; line-height: 17px; display: flex; align-items: center; justify-content: center; right: 10%; } .GALLERY .badge-highlight { position: absolute; width: 100px; right: 10%; z-index: 99; } @keyframes s2 { to { transform: rotate(1turn) } } .e3Eco-Site * { padding: 0; margin: 0; } .e3Eco-Site { font-size: 14px; width: 100%; display: flex; align-items: center; justify-content: center; background: #f6f9fa; border: 1px solid #d5e1e4; border-radius: 5px; column-gap: 16px; padding: 15px 2.5%; } .e3Eco-Site .e3Eco-Site-img { display: flex; justify-content: center; align-items: center; } .e3Eco-Site .e3Eco-Site-img .e3Eco-Site-svg { width: 24px; height: auto; } .e3Eco-Site .e3Eco-Site-text { width: auto; } .e3Eco-Site .e3Eco-Site-title { width: 100%; color: #002e5a; margin-bottom: 2px; letter-spacing: -0.01em; } .e3Eco-Site .e3Eco-Site-main { margin-right: 5px; font-weight: 600; font-size: 1.05em; line-height: 120%; display: inline; } .e3Eco-Site .e3Eco-Site-powered { font-weight: 400; font-size: 0.8em; line-height: 120%; margin-top: 2px; opacity: 0.7; display: inline-block; } .e3Eco-Site .e3Eco-Site-copy { width: 100%; font-weight: 400; font-size: 0.92em; line-height: 140%; color: #002e5a; letter-spacing: -0.01em; } /* Responsive */ @media (min-width: 768px) { .e3Eco-Site { column-gap: 16px; font-size: 14px; } .e3Eco-Site .e3Eco-Site-img .e3Eco-Site-svg { width: 27px; } } @media (min-width: 1400px) { .e3Eco-Site { font-size: 16px; } .e3Eco-Site .e3Eco-Site-img .e3Eco-Site-svg { width: 33px; } }