/* Autor: PUM! estudio Index: 1 -- Structure 2 -- Text 3 -- Icons 4 -- Interaction 5 -- Animation 6 -- Components */ @charset "UTF-8"; /* 1 -- Structure */ html { background-color: var(--c-select);} /*body { background-color: var(--c-main);}*/ .p { padding: var(--padd);} .p-h { padding-left: var(--padd); padding-right: var(--padd);} .p-v { padding-top: var(--padd); padding-bottom: var(--padd);} .p-t-1 { padding-top: var(--unit);} .p-t-2 { padding-top: var(--unit-2);} .p-t-3 { padding-top: var(--unit-3);} .p-t-4 { padding-top: var(--unit-4);} .p-t-5 { padding-top: var(--unit-5);} .p-t-6 { padding-top: var(--unit-6);} .p-t-7 { padding-top: var(--unit-7);} .p-t-8 { padding-top: var(--unit-8);} .p-t-9 { padding-top: var(--unit-9);} .p-t-10 { padding-top: var(--unit-10);} .p-t-11 { padding-top: var(--unit-11);} .p-t-12 { padding-top: var(--unit-12);} .p-t-13 { padding-top: var(--unit-13);} .p-t-14 { padding-top: var(--unit-14);} .p-t-15 { padding-top: var(--unit-15);} .p-t-16 { padding-top: var(--unit-16);} .p-t-17 { padding-top: var(--unit-17);} .p-t-18 { padding-top: var(--unit-18);} .p-t-19 { padding-top: var(--unit-19);} .p-t-20 { padding-top: var(--unit-20);} .p-t-21 { padding-top: var(--unit-21);} .p-t-22 { padding-top: var(--unit-22);} .p-t-23 { padding-top: var(--unit-23);} .p-t-24 { padding-top: var(--unit-24);} .p-t-25 { padding-top: var(--unit-25);} .p-t-26 { padding-top: var(--unit-26);} .p-t-27 { padding-top: var(--unit-27);} .p-t-28 { padding-top: var(--unit-28);} .p-t-29 { padding-top: var(--unit-29);} .p-t-30 { padding-top: var(--unit-30);} .p-t-31 { padding-top: var(--unit-31);} .p-t-32 { padding-top: var(--unit-32);} .p-t-33 { padding-top: var(--unit-33);} .p-t-34 { padding-top: var(--unit-34);} .p-t-35 { padding-top: var(--unit-35);} .p-t-36 { padding-top: var(--unit-36);} .p-t-37 { padding-top: var(--unit-37);} .p-t-38 { padding-top: var(--unit-38);} .p-t-39 { padding-top: var(--unit-39);} .p-t-40 { padding-top: var(--unit-40);} .p-b-1 { padding-bottom: var(--unit);} .p-b-2 { padding-bottom: var(--unit-2);} .p-b-3 { padding-bottom: var(--unit-3);} .p-b-4 { padding-bottom: var(--unit-4);} .p-b-5 { padding-bottom: var(--unit-5);} .p-b-6 { padding-bottom: var(--unit-6);} .p-b-7 { padding-bottom: var(--unit-7);} .p-b-8 { padding-bottom: var(--unit-8);} .p-b-9 { padding-bottom: var(--unit-9);} .p-b-10 { padding-bottom: var(--unit-10);} .p-b-11 { padding-bottom: var(--unit-11);} .p-b-12 { padding-bottom: var(--unit-12);} .p-b-13 { padding-bottom: var(--unit-13);} .p-b-14 { padding-bottom: var(--unit-14);} .p-b-15 { padding-bottom: var(--unit-15);} .p-b-16 { padding-bottom: var(--unit-16);} .p-b-17 { padding-bottom: var(--unit-17);} .p-b-18 { padding-bottom: var(--unit-18);} .p-b-19 { padding-bottom: var(--unit-19);} .p-b-20 { padding-bottom: var(--unit-20);} .p-b-21 { padding-bottom: var(--unit-21);} .p-b-22 { padding-bottom: var(--unit-22);} .p-b-23 { padding-bottom: var(--unit-23);} .p-b-24 { padding-bottom: var(--unit-24);} .p-b-25 { padding-bottom: var(--unit-25);} .p-b-26 { padding-bottom: var(--unit-26);} .p-b-27 { padding-bottom: var(--unit-27);} .p-b-28 { padding-bottom: var(--unit-28);} .p-b-29 { padding-bottom: var(--unit-29);} .p-b-30 { padding-bottom: var(--unit-30);} .p-b-31 { padding-bottom: var(--unit-31);} .p-b-32 { padding-bottom: var(--unit-32);} .p-b-33 { padding-bottom: var(--unit-33);} .p-b-34 { padding-bottom: var(--unit-34);} .p-b-35 { padding-bottom: var(--unit-35);} .p-b-36 { padding-bottom: var(--unit-36);} .p-b-37 { padding-bottom: var(--unit-37);} .p-b-38 { padding-bottom: var(--unit-38);} .p-b-39 { padding-bottom: var(--unit-39);} .p-b-40 { padding-bottom: var(--unit-40);} .p-l-1 { padding-left: var(--unit);} .p-l-2 { padding-left: var(--unit-2);} .p-l-3 { padding-left: var(--unit-3);} .p-l-4 { padding-left: var(--unit-4);} .p-l-5 { padding-left: var(--unit-5);} .p-l-6 { padding-left: var(--unit-6);} .p-l-7 { padding-left: var(--unit-7);} .p-l-8 { padding-left: var(--unit-8);} .p-l-9 { padding-left: var(--unit-9);} .p-l-10 { padding-left: var(--unit-10);} .p-l-11 { padding-left: var(--unit-11);} .p-l-12 { padding-left: var(--unit-12);} .p-l-13 { padding-left: var(--unit-13);} .p-l-14 { padding-left: var(--unit-14);} .p-l-15 { padding-left: var(--unit-15);} .p-l-16 { padding-left: var(--unit-16);} .p-l-17 { padding-left: var(--unit-17);} .p-l-18 { padding-left: var(--unit-18);} .p-l-19 { padding-left: var(--unit-19);} .p-l-20 { padding-left: var(--unit-20);} .p-l-21 { padding-left: var(--unit-21);} .p-l-22 { padding-left: var(--unit-22);} .p-l-23 { padding-left: var(--unit-23);} .p-l-24 { padding-left: var(--unit-24);} .p-l-25 { padding-left: var(--unit-25);} .p-l-26 { padding-left: var(--unit-26);} .p-l-27 { padding-left: var(--unit-27);} .p-l-28 { padding-left: var(--unit-28);} .p-l-29 { padding-left: var(--unit-29);} .p-l-30 { padding-left: var(--unit-30);} .p-l-31 { padding-left: var(--unit-31);} .p-l-32 { padding-left: var(--unit-32);} .p-l-33 { padding-left: var(--unit-33);} .p-l-34 { padding-left: var(--unit-34);} .p-l-35 { padding-left: var(--unit-35);} .p-l-36 { padding-left: var(--unit-36);} .p-l-37 { padding-left: var(--unit-37);} .p-l-38 { padding-left: var(--unit-38);} .p-l-39 { padding-left: var(--unit-39);} .p-l-40 { padding-left: var(--unit-40);} .p-r-1 { padding-right: var(--unit);} .p-r-2 { padding-right: var(--unit-2);} .p-r-3 { padding-right: var(--unit-3);} .p-r-4 { padding-right: var(--unit-4);} .p-r-5 { padding-right: var(--unit-5);} .p-r-6 { padding-right: var(--unit-6);} .p-r-7 { padding-right: var(--unit-7);} .p-r-8 { padding-right: var(--unit-8);} .p-r-9 { padding-right: var(--unit-9);} .p-r-10 { padding-right: var(--unit-10);} .p-r-11 { padding-right: var(--unit-11);} .p-r-12 { padding-right: var(--unit-12);} .p-r-13 { padding-right: var(--unit-13);} .p-r-14 { padding-right: var(--unit-14);} .p-r-15 { padding-right: var(--unit-15);} .p-r-16 { padding-right: var(--unit-16);} .p-r-17 { padding-right: var(--unit-17);} .p-r-18 { padding-right: var(--unit-18);} .p-r-19 { padding-right: var(--unit-19);} .p-r-20 { padding-right: var(--unit-20);} .p-r-21 { padding-right: var(--unit-21);} .p-r-22 { padding-right: var(--unit-22);} .p-r-23 { padding-right: var(--unit-23);} .p-r-24 { padding-right: var(--unit-24);} .p-r-25 { padding-right: var(--unit-25);} .p-r-26 { padding-right: var(--unit-26);} .p-r-27 { padding-right: var(--unit-27);} .p-r-28 { padding-right: var(--unit-28);} .p-r-29 { padding-right: var(--unit-29);} .p-r-30 { padding-right: var(--unit-30);} .p-r-31 { padding-right: var(--unit-31);} .p-r-32 { padding-right: var(--unit-32);} .p-r-33 { padding-right: var(--unit-33);} .p-r-34 { padding-right: var(--unit-34);} .p-r-35 { padding-right: var(--unit-35);} .p-r-36 { padding-right: var(--unit-36);} .p-r-37 { padding-right: var(--unit-37);} .p-r-38 { padding-right: var(--unit-38);} .p-r-39 { padding-right: var(--unit-39);} .p-r-40 { padding-right: var(--unit-40);} .m-t-1 { margin-top: var(--unit);} .m-t-2 { margin-top: var(--unit-2);} .m-t-3 { margin-top: var(--unit-3);} .m-t-4 { margin-top: var(--unit-4);} .m-t-5 { margin-top: var(--unit-5);} .m-t-6 { margin-top: var(--unit-6);} .m-t-7 { margin-top: var(--unit-7);} .m-t-8 { margin-top: var(--unit-8);} .m-t-9 { margin-top: var(--unit-9);} .m-t-10 { margin-top: var(--unit-10);} .m-t-11 { margin-top: var(--unit-11);} .m-t-12 { margin-top: var(--unit-12);} .m-t-13 { margin-top: var(--unit-13);} .m-t-14 { margin-top: var(--unit-14);} .m-t-15 { margin-top: var(--unit-15);} .m-t-16 { margin-top: var(--unit-16);} .m-t-17 { margin-top: var(--unit-17);} .m-t-18 { margin-top: var(--unit-18);} .m-t-19 { margin-top: var(--unit-19);} .m-t-20 { margin-top: var(--unit-20);} .m-t-21 { margin-top: var(--unit-21);} .m-t-22 { margin-top: var(--unit-22);} .m-t-23 { margin-top: var(--unit-23);} .m-t-24 { margin-top: var(--unit-24);} .m-t-25 { margin-top: var(--unit-25);} .m-t-26 { margin-top: var(--unit-26);} .m-t-27 { margin-top: var(--unit-27);} .m-t-28 { margin-top: var(--unit-28);} .m-t-29 { margin-top: var(--unit-29);} .m-t-30 { margin-top: var(--unit-30);} .m-t-31 { margin-top: var(--unit-31);} .m-t-32 { margin-top: var(--unit-32);} .m-t-33 { margin-top: var(--unit-33);} .m-t-34 { margin-top: var(--unit-34);} .m-t-35 { margin-top: var(--unit-35);} .m-t-36 { margin-top: var(--unit-36);} .m-t-37 { margin-top: var(--unit-37);} .m-t-38 { margin-top: var(--unit-38);} .m-t-39 { margin-top: var(--unit-39);} .m-t-40 { margin-top: var(--unit-40);} .m-b-1 { margin-bottom: var(--unit);} .m-b-2 { margin-bottom: var(--unit-2);} .m-b-3 { margin-bottom: var(--unit-3);} .m-b-4 { margin-bottom: var(--unit-4);} .m-b-5 { margin-bottom: var(--unit-5);} .m-b-6 { margin-bottom: var(--unit-6);} .m-b-7 { margin-bottom: var(--unit-7);} .m-b-8 { margin-bottom: var(--unit-8);} .m-b-9 { margin-bottom: var(--unit-9);} .m-b-10 { margin-bottom: var(--unit-10);} .m-b-11 { margin-bottom: var(--unit-11);} .m-b-12 { margin-bottom: var(--unit-12);} .m-b-13 { margin-bottom: var(--unit-13);} .m-b-14 { margin-bottom: var(--unit-14);} .m-b-15 { margin-bottom: var(--unit-15);} .m-b-16 { margin-bottom: var(--unit-16);} .m-b-17 { margin-bottom: var(--unit-17);} .m-b-18 { margin-bottom: var(--unit-18);} .m-b-19 { margin-bottom: var(--unit-19);} .m-b-20 { margin-bottom: var(--unit-20);} .m-b-21 { margin-bottom: var(--unit-21);} .m-b-22 { margin-bottom: var(--unit-22);} .m-b-23 { margin-bottom: var(--unit-23);} .m-b-24 { margin-bottom: var(--unit-24);} .m-b-25 { margin-bottom: var(--unit-25);} .m-b-26 { margin-bottom: var(--unit-26);} .m-b-27 { margin-bottom: var(--unit-27);} .m-b-28 { margin-bottom: var(--unit-28);} .m-b-29 { margin-bottom: var(--unit-29);} .m-b-30 { margin-bottom: var(--unit-30);} .m-b-31 { margin-bottom: var(--unit-31);} .m-b-32 { margin-bottom: var(--unit-32);} .m-b-33 { margin-bottom: var(--unit-33);} .m-b-34 { margin-bottom: var(--unit-34);} .m-b-35 { margin-bottom: var(--unit-35);} .m-b-36 { margin-bottom: var(--unit-36);} .m-b-37 { margin-bottom: var(--unit-37);} .m-b-38 { margin-bottom: var(--unit-38);} .m-b-39 { margin-bottom: var(--unit-39);} .m-b-40 { margin-bottom: var(--unit-40);} .m-l-1 { margin-left: var(--unit);} .m-l-2 { margin-left: var(--unit-2);} .m-l-3 { margin-left: var(--unit-3);} .m-l-4 { margin-left: var(--unit-4);} .m-l-5 { margin-left: var(--unit-5);} .m-l-6 { margin-left: var(--unit-6);} .m-l-7 { margin-left: var(--unit-7);} .m-l-8 { margin-left: var(--unit-8);} .m-l-9 { margin-left: var(--unit-9);} .m-l-10 { margin-left: var(--unit-10);} .m-l-11 { margin-left: var(--unit-11);} .m-l-12 { margin-left: var(--unit-12);} .m-l-13 { margin-left: var(--unit-13);} .m-l-14 { margin-left: var(--unit-14);} .m-l-15 { margin-left: var(--unit-15);} .m-l-16 { margin-left: var(--unit-16);} .m-l-17 { margin-left: var(--unit-17);} .m-l-18 { margin-left: var(--unit-18);} .m-l-19 { margin-left: var(--unit-19);} .m-l-20 { margin-left: var(--unit-20);} .m-l-21 { margin-left: var(--unit-21);} .m-l-22 { margin-left: var(--unit-22);} .m-l-23 { margin-left: var(--unit-23);} .m-l-24 { margin-left: var(--unit-24);} .m-l-25 { margin-left: var(--unit-25);} .m-l-26 { margin-left: var(--unit-26);} .m-l-27 { margin-left: var(--unit-27);} .m-l-28 { margin-left: var(--unit-28);} .m-l-29 { margin-left: var(--unit-29);} .m-l-30 { margin-left: var(--unit-30);} .m-l-31 { margin-left: var(--unit-31);} .m-l-32 { margin-left: var(--unit-32);} .m-l-33 { margin-left: var(--unit-33);} .m-l-34 { margin-left: var(--unit-34);} .m-l-35 { margin-left: var(--unit-35);} .m-l-36 { margin-left: var(--unit-36);} .m-l-37 { margin-left: var(--unit-37);} .m-l-38 { margin-left: var(--unit-38);} .m-l-39 { margin-left: var(--unit-39);} .m-l-40 { margin-left: var(--unit-40);} .m-r-1 { margin-right: var(--unit);} .m-r-2 { margin-right: var(--unit-2);} .m-r-3 { margin-right: var(--unit-3);} .m-r-4 { margin-right: var(--unit-4);} .m-r-5 { margin-right: var(--unit-5);} .m-r-6 { margin-right: var(--unit-6);} .m-r-7 { margin-right: var(--unit-7);} .m-r-8 { margin-right: var(--unit-8);} .m-r-9 { margin-right: var(--unit-9);} .m-r-10 { margin-right: var(--unit-10);} .m-r-11 { margin-right: var(--unit-11);} .m-r-12 { margin-right: var(--unit-12);} .m-r-13 { margin-right: var(--unit-13);} .m-r-14 { margin-right: var(--unit-14);} .m-r-15 { margin-right: var(--unit-15);} .m-r-16 { margin-right: var(--unit-16);} .m-r-17 { margin-right: var(--unit-17);} .m-r-18 { margin-right: var(--unit-18);} .m-r-19 { margin-right: var(--unit-19);} .m-r-20 { margin-right: var(--unit-20);} .m-r-21 { margin-right: var(--unit-21);} .m-r-22 { margin-right: var(--unit-22);} .m-r-23 { margin-right: var(--unit-23);} .m-r-24 { margin-right: var(--unit-24);} .m-r-25 { margin-right: var(--unit-25);} .m-r-26 { margin-right: var(--unit-26);} .m-r-27 { margin-right: var(--unit-27);} .m-r-28 { margin-right: var(--unit-28);} .m-r-29 { margin-right: var(--unit-29);} .m-r-30 { margin-right: var(--unit-30);} .m-r-31 { margin-right: var(--unit-31);} .m-r-32 { margin-right: var(--unit-32);} .m-r-33 { margin-right: var(--unit-33);} .m-r-34 { margin-right: var(--unit-34);} .m-r-35 { margin-right: var(--unit-35);} .m-r-36 { margin-right: var(--unit-36);} .m-r-37 { margin-right: var(--unit-37);} .m-r-38 { margin-right: var(--unit-38);} .m-r-39 { margin-right: var(--unit-39);} .m-r-40 { margin-right: var(--unit-40);} .m-l-1-10 { margin-left: calc(1/10 * 100%);} .m-l-2-10 { margin-left: calc(2/10 * 100%);} .m-l-3-10 { margin-left: calc(3/10 * 100%);} .m-l-4-10 { margin-left: calc(4/10 * 100%);} .m-l-5-10 { margin-left: calc(5/10 * 100%);} .m-l-6-10 { margin-left: calc(6/10 * 100%);} .m-l-7-10 { margin-left: calc(7/10 * 100%);} .m-l-8-10 { margin-left: calc(8/10 * 100%);} .m-l-9-10 { margin-left: calc(9/10 * 100%);} .m-l-10-10 { margin-left: calc(10/12 * 100%);} .m-l-1-12 { margin-left: calc(1/12 * 100%);} .m-l-2-12 { margin-left: calc(2/12 * 100%);} .m-l-3-12 { margin-left: calc(3/12 * 100%);} .m-l-4-12 { margin-left: calc(4/12 * 100%);} .m-l-5-12 { margin-left: calc(5/12 * 100%);} .m-l-6-12 { margin-left: calc(6/12 * 100%);} .m-l-7-12 { margin-left: calc(7/12 * 100%);} .m-l-8-12 { margin-left: calc(8/12 * 100%);} .m-l-9-12 { margin-left: calc(9/12 * 100%);} .m-l-10-12 { margin-left: calc(10/12 * 100%);} .m-l-11-12 { margin-left: calc(11/12 * 100%);} .m-l-12-12 { margin-left: calc(12/12 * 100%);} .m-r-1-10 { margin-right: calc(1/10 * 100%);} .m-r-2-10 { margin-right: calc(2/10 * 100%);} .m-r-3-10 { margin-right: calc(3/10 * 100%);} .m-r-4-10 { margin-right: calc(4/10 * 100%);} .m-r-5-10 { margin-right: calc(5/10 * 100%);} .m-r-6-10 { margin-right: calc(6/10 * 100%);} .m-r-7-10 { margin-right: calc(7/10 * 100%);} .m-r-8-10 { margin-right: calc(8/10 * 100%);} .m-r-9-10 { margin-right: calc(9/10 * 100%);} .m-r-10-10 { margin-right: calc(10/10 * 100%);} .m-r-1-12 { margin-right: calc(1/12 * 100%);} .m-r-2-12 { margin-right: calc(2/12 * 100%);} .m-r-3-12 { margin-right: calc(3/12 * 100%);} .m-r-4-12 { margin-right: calc(4/12 * 100%);} .m-r-5-12 { margin-right: calc(5/12 * 100%);} .m-r-6-12 { margin-right: calc(6/12 * 100%);} .m-r-7-12 { margin-right: calc(7/12 * 100%);} .m-r-8-12 { margin-right: calc(8/12 * 100%);} .m-r-9-12 { margin-right: calc(9/12 * 100%);} .m-r-10-12 { margin-right: calc(10/12 * 100%);} .m-r-11-12 { margin-right: calc(11/12 * 100%);} .m-r-12-12 { margin-right: calc(12/12 * 100%);} .g-1 { gap: var(--unit);} .g-2 { gap: var(--unit-2);} .g-3 { gap: var(--unit-3);} .g-4 { gap: var(--unit-4);} .g-5 { gap: var(--unit-5);} .g-6 { gap: var(--unit-6);} .g-7 { gap: var(--unit-7);} .g-8 { gap: var(--unit-8);} .g-9 { gap: var(--unit-9);} .g-10 { gap: var(--unit-10);} .g-11 { gap: var(--unit-11);} .g-12 { gap: var(--unit-12);} .g-13 { gap: var(--unit-13);} .g-14 { gap: var(--unit-14);} .g-15 { gap: var(--unit-15);} .g-16 { gap: var(--unit-16);} .g-17 { gap: var(--unit-17);} .g-18 { gap: var(--unit-18);} .g-19 { gap: var(--unit-19);} .g-20 { gap: var(--unit-20);}.g-21 { gap: var(--unit-21);} .g-22 { gap: var(--unit-22);} .g-23 { gap: var(--unit-23);} .g-24 { gap: var(--unit-24);} .g-25 { gap: var(--unit-25);} .g-26 { gap: var(--unit-26);} .g-27 { gap: var(--unit-27);} .g-28 { gap: var(--unit-28);} .g-29 { gap: var(--unit-29);}.g-30 { gap: var(--unit-30);} .g-31 { gap: var(--unit-31);} .g-32 { gap: var(--unit-32);} .g-33 { gap: var(--unit-33);} .g-34 { gap: var(--unit-34);} .g-35 { gap: var(--unit-35);} .g-36 { gap: var(--unit-36);} .g-37 { gap: var(--unit-37);} .g-38 { gap: var(--unit-38);} .g-39 { gap: var(--unit-39);}.g-40 { gap: var(--unit-40);} .g-r-1 { row-gap: var(--unit);} .g-r-2 { row-gap: var(--unit-2);} .g-r-3 { row-gap: var(--unit-3);} .g-r-4 { row-gap: var(--unit-4);} .g-r-5 { row-gap: var(--unit-5);} .g-r-6 { row-gap: var(--unit-6);} .g-r-7 { row-gap: var(--unit-7);} .g-r-8 { row-gap: var(--unit-8);} .g-r-9 { row-gap: var(--unit-9);} .g-r-10 { row-gap: var(--unit-10);} .g-r-11 { row-gap: var(--unit-11);} .g-r-12 { row-gap: var(--unit-12);} .g-r-13 { row-gap: var(--unit-13);} .g-r-14 { row-gap: var(--unit-14);} .g-r-15 { row-gap: var(--unit-15);} .g-r-16 { row-gap: var(--unit-16);} .g-r-17 { row-gap: var(--unit-17);} .g-r-18 { row-gap: var(--unit-18);} .g-r-19 { row-gap: var(--unit-19);} .g-r-20 { row-gap: var(--unit-20);}.g-r-21 { row-gap: var(--unit-21);} .g-r-22 { row-gap: var(--unit-22);} .g-r-23 { row-gap: var(--unit-23);} .g-r-24 { row-gap: var(--unit-24);} .g-r-25 { row-gap: var(--unit-25);} .g-r-26 { row-gap: var(--unit-26);} .g-r-27 { row-gap: var(--unit-27);} .g-r-28 { row-gap: var(--unit-28);} .g-r-29 { row-gap: var(--unit-29);}.g-r-30 { row-gap: var(--unit-30);} .g-r-31 { row-gap: var(--unit-31);} .g-r-32 { row-gap: var(--unit-32);} .g-r-33 { row-gap: var(--unit-33);} .g-r-34 { row-gap: var(--unit-34);} .g-r-35 { row-gap: var(--unit-35);} .g-r-36 { row-gap: var(--unit-36);} .g-r-37 { row-gap: var(--unit-37);} .g-r-38 { row-gap: var(--unit-38);} .g-r-39 { row-gap: var(--unit-39);} .g-r-40 { row-gap: var(--unit-40);} .g-c-1 { column-gap: var(--unit);} .g-c-2 { column-gap: var(--unit-2);} .g-c-3 { column-gap: var(--unit-3);} .g-c-4 { column-gap: var(--unit-4);} .g-c-5 { column-gap: var(--unit-5);} .g-c-6 { column-gap: var(--unit-6);} .g-c-7 { column-gap: var(--unit-7);} .g-c-8 { column-gap: var(--unit-8);} .g-c-9 { column-gap: var(--unit-9);} .g-c-10 { column-gap: var(--unit-10);} .g-c-11 { column-gap: var(--unit-11);} .g-c-12 { column-gap: var(--unit-12);} .g-c-13 { column-gap: var(--unit-13);} .g-c-14 { column-gap: var(--unit-14);} .g-c-15 { column-gap: var(--unit-15);} .g-c-16 { column-gap: var(--unit-16);} .g-c-17 { column-gap: var(--unit-17);} .g-c-18 { column-gap: var(--unit-18);} .g-c-19 { column-gap: var(--unit-19);} .g-c-20 { column-gap: var(--unit-20);} .g-c-21 { column-gap: var(--unit-21);} .g-c-22 { column-gap: var(--unit-22);} .g-c-23 { column-gap: var(--unit-23);} .g-c-24 { column-gap: var(--unit-24);} .g-c-25 { column-gap: var(--unit-25);} .g-c-26 { column-gap: var(--unit-26);} .g-c-27 { column-gap: var(--unit-27);} .g-c-28 { column-gap: var(--unit-28);} .g-c-29 { column-gap: var(--unit-29);} .g-c-30 { column-gap: var(--unit-30);} .g-c-31 { column-gap: var(--unit-31);} .g-c-32 { column-gap: var(--unit-32);} .g-c-33 { column-gap: var(--unit-33);} .g-c-34 { column-gap: var(--unit-34);} .g-c-35 { column-gap: var(--unit-35);} .g-c-36 { column-gap: var(--unit-36);} .g-c-37 { column-gap: var(--unit-37);} .g-c-38 { column-gap: var(--unit-38);} .g-c-39 { column-gap: var(--unit-39);} .g-c-40 { column-gap: var(--unit-40);} .col-main { width: 100%; padding: 0 var(--padd-col-main)} /* 1 . 2 -- header */ .header { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; padding: 1.4rem 0; background-color: var(--c-main); border-bottom: var(--border-2-b);} .header-logo img { display: block; width: auto; height: var(--unit-10);} .header-menu-main > li > ul { position: absolute; top: 100%; left: 0; width: 100%; display: flex; gap: var(--unit-6); justify-content: flex-end; padding: var(--unit-8) calc( var(--padd-col-main) + var(--padd) ) var(--unit-6); border-top: var(--border-2-b); border-bottom: var(--border-2-b); color: var(--c-white); background-color: var(--c-crema); opacity: 0; visibility: hidden;} .header-menu-main > li > ul a { color: var(--c-black);} .header-menu-main > li > a { position: relative;} .header-menu-main > li a { padding: var(--unit); text-decoration-color: var(--c-azul);} .header-menu-main > li a.hover { text-decoration: underline; text-decoration-color: var(--c-azul);} .header-menu-main > li.hover > ul { opacity: 1; pointer-events: all; visibility: visible;} .header .icon-search { position: relative; z-index: 2;} .header .btn-menu { display: none;} .scroll-up .header { transform: translateY(0);} .scroll-down .header { transform: translateY(-100%);} /* 1 . 2 -- Search */ .search { position: fixed; z-index: 99; top: 0; left: 0; height: calc(100dvh - 7.2rem); width: 100%; background-color: var(--c-main); overflow: auto; transform: translateY(-110%);} .search form { width: 100%;} .search input[type=search] { width: 100%; font-size: var(--txt-h6); border-bottom: var(--border-1-b); color: var(--c-black); background-color: transparent; padding: var(--unit) 0;} .search input[type=search]::placeholder { color: var(--c-black);} .btn-search { padding: 1rem; position: relative; border-radius: 100%; border: var(--border-2-b);} .search-box { padding: var(--unit-40) 0 0 0;} .search-active, .search-active body { overflow: hidden;} .search-active .search { transform: translateY(0); top: 7.2rem;} .search-active .header-menu-main { opacity: 0; pointer-events: none;} .search-active .header .btn-search .icon-search::before, .search-active .header.hover.header-transparent .btn-search.hover .icon-search::before { background-image: var(--icon-b-close);} .search .content-event { border: none;} .search .content-event.content-bg-black { background-color: var(--c-black);} /* 1 . 3 -- Footer */ .footer { background-color: var(--c-black); padding: var(--unit-10) 0; border-top: var(--border-2-b);} .footer * { color: var(--c-crema);} .footer-content { gap: 14rem;} .footer-logo img { height: 16rem; width: auto;} .footer-rrss img { height: 3.6rem; width: auto;} .footer-logos img { max-height: 5.6rem; width: auto;} .footer-kit-logos { background-color: var(--c-white); padding: var(--unit-8) 14.5rem; margin-top: var(--unit-6);} .footer-kit-logos > img { height: var(--unit-5); width: auto;} .footer-kit-logos-in img { height: var(--unit-10); width: auto;} /* 1 . 4 -- Popups */ .popup { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; padding-top: var(--unit-10); padding-bottom: var(--unit-10); overflow: auto; display: flex; flex-direction: column; align-items: center; visibility: hidden; opacity: 0; pointer-events: none; color: var(--c-white);} .popup::before, .popup::after { content: ''; display: block; flex-grow: 1;} .popup-card { display: flex; flex-direction: column; gap: var(--unit-8); flex-shrink: 0; position: relative; z-index: 2; height: auto; min-height: auto; transform: scale(.95); opacity: 0; padding: var(--unit-6) var(--unit-5) var(--unit-10) var(--unit-5); background-color: var(--c-black);} .popup-bg { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: var(--c-black); opacity: 0;} .popup .cta-close { margin-right: -1rem; margin-top: -1rem;} .popup.active { visibility: visible; opacity: 1; pointer-events: all;} .popup.active .popup-card { transform: scale(1); opacity: 1;} .popup.active .popup-bg { opacity: .75;} .popup-active, .popup-active body { overflow: hidden;} .popup-newsletter .popup-card { padding: 0; gap: 0;} .popup-newsletter .card-header { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; padding: var(--unit-5);} .popup-newsletter .card-header-img { width: 100%;} .popup-newsletter .card-header-img img { width: 100%; max-height: 28rem; object-fit: cover;} .popup-newsletter .card-content { padding: var(--unit-12) var(--unit-4); background-color: var(--c-grey-2); color: var(--c-black);} /* 2 -- Text */ html { font-size: 0.78125vw;} html, body, input, select, textarea { font-family: sans-serif; font-family: var(--font-2); font-style: normal;} body { font-size: var(--txt-body); line-height: var(--txt-body-lh);} .txt-a-l { text-align: left;} .txt-a-c { text-align: center;} .txt-a-r { text-align: right;} .txt-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .txt-upper { text-transform: uppercase;} .content-txt h1, .txt-h1 { font-family: var(--font); font-size: var(--txt-h1); line-height: var(--txt-h1-lh); font-weight: var(--txt-h1-fw); letter-spacing: var(--txt-h1-ls);} .content-txt h2, .txt-h2 { font-family: var(--font); font-size: var(--txt-h2); line-height: var(--txt-h2-lh); font-weight: var(--txt-h2-fw); letter-spacing: var(--txt-h2-ls);} .content-txt h3, .txt-h3 { font-family: var(--font-2); font-size: var(--txt-h3); line-height: var(--txt-h3-lh); font-weight: var(--txt-h3-fw); letter-spacing: var(--txt-h3-ls); text-transform: uppercase;} .content-txt h4, .txt-h4 { font-family: var(--font-2); font-size: var(--txt-h4); line-height: var(--txt-h4-lh); font-weight: var(--txt-h4-fw); letter-spacing: var(--txt-h4-ls); text-transform: uppercase;} .content-txt h5, .txt-h5 { font-family: var(--font-2); font-size: var(--txt-h5); line-height: var(--txt-h5-lh); font-weight: var(--txt-h5-fw); letter-spacing: var(--txt-h5-ls); text-transform: uppercase;} .content-txt h6, .txt-h6 { font-family: var(--font-2); font-size: var(--txt-h6); line-height: var(--txt-h6-lh); font-weight: var(--txt-h6-fw); letter-spacing: var(--txt-h6-ls); text-transform: uppercase;} .content-txt p, .content-txt ul, .content-txt ol, .txt-body { font-family: var(--font-3); font-size: var(--txt-body); line-height: var(--txt-body-lh); font-weight: var(--txt-body-fw); letter-spacing: var(--txt-body-ls);} .txt-caption, .tag { font-family: var(--font-2); font-size: var(--txt-caption); line-height: var(--txt-caption-lh); font-weight: var(--txt-caption-fw); letter-spacing: var(--txt-caption-ls);} .cta, input[type=submit] { font-family: var(--font-2); font-size: var(--txt-cta); line-height: var(--txt-cta-lh); font-weight: var(--txt-cta-fw); letter-spacing: var(--txt-cta-ls);} input, select, textarea, label { font-family: var(--font-2); font-size: var(--txt-h6); line-height: var(--txt-h6-lh); font-weight: var(--txt-h6-fw); letter-spacing: var(--txt-h6-ls); text-transform: uppercase;} .content-txt h1, .content-txt h2, .content-txt h3, .content-txt h4 { margin-bottom: var(--unit-5); margin-top: 2em;} .content-txt h5 { margin-bottom: var(--unit);} .content-txt h6 { margin-bottom: var(--txt-h6-lh);} .content-txt p, .txt-h7 p, .content-txt ul, .content-txt ol { margin-bottom: var(--txt-body-lh);} .content-txt ul, .content-txt ol { padding-left: var(--unit-8);} .content-txt li { margin-bottom: var(--txt-body-lh);} .content-txt :last-child { margin-bottom: 0;} .content-txt a { text-decoration: underline; text-decoration-style: solid; text-underline-offset: .15em; text-decoration-thickness: .05em; text-decoration-color: var(--c-black);} .content-txt a.hover { text-decoration: none;} .content-txt h1:first-child, .content-txt h2:first-child, .content-txt h3:first-child, .content-txt h4:first-child { margin-top: 0;} strong, .txt-strong { font-weight: var(--fw-strong);} .txt-regular { font-weight: var(--fw-regular);} a { color: var(--c-black);} .header a, .footer a { text-decoration: none;} .txt-caption-s { font-size: var(--txt-caption-s); line-height: var(--txt-caption-lh-s); font-weight: var(--txt-caption-fw-s); letter-spacing: var(--txt-caption-ls-s);} /* 3 -- Icons */ .icon { display: block;} .icon-xl { width: 4.8rem; height: 4.8rem;} .icon-l { width: var(--unit-6); height: var(--unit-6);} .icon-m { width: 2rem; height: 2rem;} .icon::before { content: ''; display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain;} .hover .icon::before { display: block; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain;} .icon-search::before { background-image: var(--icon-b-search);} .icon-search-w::before { background-image: var(--icon-w-search);} .icon-burger::before { background-image: var(--icon-b-burger);} .icon-burger-w::before { background-image: var(--icon-w-burger);} .icon-close::before { background-image: var(--icon-b-close);} .icon-close-w::before { background-image: var(--icon-w-close);} /* 4 -- Interaction */ input, select, textarea { width: 100%;} input[type=submit] { width: auto;} input[type=submit].hover { opacity: .7;} input[type=checkbox], input[type=radio] { width: var(--unit-3); height: var(--unit-3); border-width: .1rem; border-color: var(--c-black);} input[type=checkbox] + *, input[type=radio] + * { color: var(--c-black); margin-top: -.1rem;} input[type=checkbox]:checked, input[type=radio]:checked { border-color: var(--c-black);} input[type=radio]:checked + * { color: var(--c-black);} label { cursor: pointer;} input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea { font-size: var(--txt-h6); line-height: var(--txt-h6-lh); font-weight: var(--txt-h6-fw); letter-spacing: var(--txt-h6-ls); padding: var(--unit) 0; background-color: var(--c-white); color: var(--c-black);} .label-check { padding: .6rem 1rem .6rem 0;} input[type=color]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=datetime]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, select:focus, textarea:focus { color: var(--c-black);} ::placeholder { color: var(--c-grey-1);} :focus::placeholder { color: var(--c-grey-1);} /* 4 . 1 -- CTAs */ .cta-box { display: inline-block; padding: var(--unit-3) var(--unit-5); text-decoration: none;} .cta-buy { background-color: var(--c-second); color: var(--c-crema); border: var(--border-1-b); border-radius: 6rem;} .cta-primary { background-color: var(--c-second); color: var(--c-white); border: var(--border-1-b); border-radius: 6rem;} .cta-secondary { background-color: transparent; color: var(--c-second); border: var(--border-1-b); border-radius: 6rem;} .cta-buy.hover, .cta-primary.hover, .hover .cta-buy, .hover .cta-primary { background-color: #00000000; color: var(--c-second); border: var(--border-1-b);} .cta-buy[disabled], .cta-primary[disabled] { background-color: var(--c-grey-1); color: var(--c-white); border: none; pointer-events: none;} .cta-buy:active, .cta-primary:active, .cta-secondary:active, :active .cta-buy, :active .cta-primary, :active .cta-secondary { transform: scale(.95);} .cta-secondary.hover, .hover .cta-secondary { background-color: var(--c-second); color: var(--c-white);} .cta-secondary[disabled] { background-color: var(--c-white); color: var(--c-grey-1); border: var(--border-1-g); pointer-events: none;} .cta-circle { width: var(--unit-11); height: var(--unit-11); background-color: var(--c-black); border-radius: 100%; display: flex; align-items: center; justify-content: center;} .cta-circle img { width: var(--unit-6); height: var(--unit-6);} /* 4 . 2 -- Tags */ .tag-box { display: inline-block; padding: .6rem var(--unit-3); border: var(--border-1-b); border-radius: var(--unit-6);} .tag-box.hover, .tag-box.active { background-color: var(--c-second); color: var(--c-white);} /* 5 -- Animation */ a, .cta, .cta-box, button, .header-menu, .header-menu-main, .header-logo svg path, .header, .icon, .icon::before, .search, .header-menu-main ul, .header-container:before, .popup-card, .content-img img, .content-filter-box { transition: all .4s var(--bezier);} .popup { transition: opacity .8s var(--bezier), visibility .8s var(--bezier);} input, select, textarea, ::placeholder { transition: all .2s var(--bezier);} [data-view] { opacity: 0; transition: opacity .8s var(--bezier);} [data-view].view { opacity: 1;} [data-view]:nth-child(n+2) { transition-delay: .1s;} [data-view]:nth-child(n+3) { transition-delay: .15s;} [data-view]:nth-child(n+4) { transition-delay: .2s;} [data-view]:nth-child(n+5) { transition-delay: .25s;} [data-view]:nth-child(n+6) { transition-delay: .3s;} [data-view]:nth-child(n+7) { transition-delay: .35s;} [data-view]:nth-child(n+8) { transition-delay: .4s;} [data-view]:nth-child(n+9) { transition-delay: .45s;} @keyframes fadein { 0% { opacity: 0;} 100% { opacity: 1;} } @keyframes leftObj { 0% { transform: translateX(0);} 100% { transform: translateX(-100%);} } @keyframes rightObj { 0% { transform: translateX(0);} 100% { transform: translateX(100%);} } /* The end -- :P */