holygrail2 1.0.0

package/doc/docs.css

@@ -0,0 +1,1764 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+div,
+span,
+select,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+img {
+  max-width: 100%;
+  border-width: 0;
+  vertical-align: middle;
+  -ms-interpolation-mode: bicubic;
+}
+
+/* Reset de arrows en inputs */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+@keyframes underline {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}
+@keyframes opacity {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes stretch {
+  0% {
+    height: 0;
+  }
+  100% {
+    height: 80px;
+  }
+}
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -100%);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+@keyframes bounce {
+  0% {
+    transform: translateZ(0);
+  }
+  to {
+    transform: translate3d(0, -15px, 0);
+  }
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeout {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes spin {
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+.var-a-break-xs::after {
+  display: inline-block;
+  content: "break-xs";
+}
+
+.var-b-break-xs::after {
+  content: "1px";
+  display: inline-block;
+}
+
+.var-a-break-sm::after {
+  display: inline-block;
+  content: "break-sm";
+}
+
+.var-b-break-sm::after {
+  content: "768px";
+  display: inline-block;
+}
+
+.var-a-break-md::after {
+  display: inline-block;
+  content: "break-md";
+}
+
+.var-b-break-md::after {
+  content: "992px";
+  display: inline-block;
+}
+
+.var-a-break-lg::after {
+  display: inline-block;
+  content: "break-lg";
+}
+
+.var-b-break-lg::after {
+  content: "1280px";
+  display: inline-block;
+}
+
+.var-a-break-xl::after {
+  display: inline-block;
+  content: "break-xl";
+}
+
+.var-b-break-xl::after {
+  content: "1440px";
+  display: inline-block;
+}
+
+.var-a-min-vw::after {
+  display: inline-block;
+  content: "min-vw";
+}
+
+.var-b-min-vw::after {
+  content: "320px";
+  display: inline-block;
+}
+
+.var-a-height-xs::after {
+  display: inline-block;
+  content: "height-xs";
+}
+
+.var-b-height-xs::after {
+  content: "60px";
+  display: inline-block;
+}
+
+.var-a-height-sm::after {
+  display: inline-block;
+  content: "height-sm";
+}
+
+.var-b-height-sm::after {
+  content: "100px";
+  display: inline-block;
+}
+
+.var-a-height-md::after {
+  display: inline-block;
+  content: "height-md";
+}
+
+.var-b-height-md::after {
+  content: "350px";
+  display: inline-block;
+}
+
+.var-a-height-lg::after {
+  display: inline-block;
+  content: "height-lg";
+}
+
+.var-b-height-lg::after {
+  content: "400px";
+  display: inline-block;
+}
+
+.var-a-height-xl::after {
+  display: inline-block;
+  content: "height-xl";
+}
+
+.var-b-height-xl::after {
+  content: "450px";
+  display: inline-block;
+}
+
+.var-a-height-full::after {
+  display: inline-block;
+  content: "height-full";
+}
+
+.var-b-height-full::after {
+  content: "100vh";
+  display: inline-block;
+}
+
+.var-a-height-home::after {
+  display: inline-block;
+  content: "height-home";
+}
+
+.var-b-height-home::after {
+  content: "calc(100vh - 80px)";
+  display: inline-block;
+}
+
+.var-a-container::after {
+  display: inline-block;
+  content: "container";
+}
+
+.var-b-container::after {
+  content: "800px";
+  display: inline-block;
+}
+
+.var-a-container-2::after {
+  display: inline-block;
+  content: "container-2";
+}
+
+.var-b-container-2::after {
+  content: "700px";
+  display: inline-block;
+}
+
+.var-a-container-3::after {
+  display: inline-block;
+  content: "container-3";
+}
+
+.var-b-container-3::after {
+  content: "900px";
+  display: inline-block;
+}
+
+.var-a-container-4::after {
+  display: inline-block;
+  content: "container-4";
+}
+
+.var-b-container-4::after {
+  content: "356px";
+  display: inline-block;
+}
+
+.var-a-font-primary::after {
+  display: inline-block;
+  content: "font-primary";
+}
+
+.var-b-font-primary::after {
+  content: "arial, sans-serif";
+  display: inline-block;
+}
+
+.var-a-font-family-secondary::after {
+  display: inline-block;
+  content: "font-family-secondary";
+}
+
+.var-b-font-family-secondary::after {
+  content: "arial black, sans-serif";
+  display: inline-block;
+}
+
+.var-a-font-primary-weight-light::after {
+  display: inline-block;
+  content: "font-primary-weight-light";
+}
+
+.var-b-font-primary-weight-light::after {
+  content: "100";
+  display: inline-block;
+}
+
+.var-a-font-primary-weight-regular::after {
+  display: inline-block;
+  content: "font-primary-weight-regular";
+}
+
+.var-b-font-primary-weight-regular::after {
+  content: "500";
+  display: inline-block;
+}
+
+.var-a-font-primary-weight-medium::after {
+  display: inline-block;
+  content: "font-primary-weight-medium";
+}
+
+.var-b-font-primary-weight-medium::after {
+  content: "500";
+  display: inline-block;
+}
+
+.var-a-font-primary-weight-bold::after {
+  display: inline-block;
+  content: "font-primary-weight-bold";
+}
+
+.var-b-font-primary-weight-bold::after {
+  content: "900";
+  display: inline-block;
+}
+
+.var-a-font-secondary-weight-light::after {
+  display: inline-block;
+  content: "font-secondary-weight-light";
+}
+
+.var-b-font-secondary-weight-light::after {
+  content: "300";
+  display: inline-block;
+}
+
+.var-a-font-secondary-weight-medium::after {
+  display: inline-block;
+  content: "font-secondary-weight-medium";
+}
+
+.var-b-font-secondary-weight-medium::after {
+  content: "400";
+  display: inline-block;
+}
+
+.var-a-xl::after {
+  display: inline-block;
+  content: "xl";
+}
+
+.var-b-xl::after {
+  content: "1500px";
+  display: inline-block;
+}
+
+.var-a-c-white::before {
+  display: inline-block;
+  content: "c-white";
+}
+
+.var-b-c-white::before {
+  content: "#fff";
+  display: inline-block;
+}
+
+.var-a-c-black::before {
+  display: inline-block;
+  content: "c-black";
+}
+
+.var-b-c-black::before {
+  content: "#000";
+  display: inline-block;
+}
+
+.var-a-c-dark-grey::before {
+  display: inline-block;
+  content: "c-dark-grey";
+}
+
+.var-b-c-dark-grey::before {
+  content: "#8e8e8e";
+  display: inline-block;
+}
+
+.var-a-c-middle-grey::before {
+  display: inline-block;
+  content: "c-middle-grey";
+}
+
+.var-b-c-middle-grey::before {
+  content: "#e3e3e3";
+  display: inline-block;
+}
+
+.var-a-c-light-grey::before {
+  display: inline-block;
+  content: "c-light-grey";
+}
+
+.var-b-c-light-grey::before {
+  content: "#f0f0f0";
+  display: inline-block;
+}
+
+.var-a-c-primary::before {
+  display: inline-block;
+  content: "c-primary";
+}
+
+.var-b-c-primary::before {
+  content: "#000";
+  display: inline-block;
+}
+
+.var-a-c-secondary::before {
+  display: inline-block;
+  content: "c-secondary";
+}
+
+.var-b-c-secondary::before {
+  content: "#000";
+  display: inline-block;
+}
+
+.var-a-c-accent::before {
+  display: inline-block;
+  content: "c-accent";
+}
+
+.var-b-c-accent::before {
+  content: "#b40016";
+  display: inline-block;
+}
+
+.var-a-c-error::before {
+  display: inline-block;
+  content: "c-error";
+}
+
+.var-b-c-error::before {
+  content: "#b40016";
+  display: inline-block;
+}
+
+.var-a-c-sale::before {
+  display: inline-block;
+  content: "c-sale";
+}
+
+.var-b-c-sale::before {
+  content: "#b40016";
+  display: inline-block;
+}
+
+.var-a-c-info::before {
+  display: inline-block;
+  content: "c-info";
+}
+
+.var-b-c-info::before {
+  content: "#1a32a4";
+  display: inline-block;
+}
+
+.var-a-c-valid::before {
+  display: inline-block;
+  content: "c-valid";
+}
+
+.var-b-c-valid::before {
+  content: "#76ae4a";
+  display: inline-block;
+}
+
+.var-a-c-warning::before {
+  display: inline-block;
+  content: "c-warning";
+}
+
+.var-b-c-warning::before {
+  content: "#ffc700";
+  display: inline-block;
+}
+
+.var-a-c-feel::before {
+  display: inline-block;
+  content: "c-feel";
+}
+
+.var-b-c-feel::before {
+  content: "#fb9962";
+  display: inline-block;
+}
+
+.var-a-c-feel-dark::before {
+  display: inline-block;
+  content: "c-feel-dark";
+}
+
+.var-b-c-feel-dark::before {
+  content: "#c94c07";
+  display: inline-block;
+}
+
+.var-a-c-feel-light::before {
+  display: inline-block;
+  content: "c-feel-light";
+}
+
+.var-b-c-feel-light::before {
+  content: "#fccbb0";
+  display: inline-block;
+}
+
+.var-a-c-limited::before {
+  display: inline-block;
+  content: "c-limited";
+}
+
+.var-b-c-limited::before {
+  content: "#000";
+  display: inline-block;
+}
+
+.var-a-c-success::before {
+  display: inline-block;
+  content: "c-success";
+}
+
+.var-b-c-success::before {
+  content: "#76ae4a";
+  display: inline-block;
+}
+
+.var-a-c-alert::before {
+  display: inline-block;
+  content: "c-alert";
+}
+
+.var-b-c-alert::before {
+  content: "#ffc700";
+  display: inline-block;
+}
+
+.var-a-c-facebook::before {
+  display: inline-block;
+  content: "c-facebook";
+}
+
+.var-b-c-facebook::before {
+  content: "#1977f3";
+  display: inline-block;
+}
+
+.var-a-c-google::before {
+  display: inline-block;
+  content: "c-google";
+}
+
+.var-b-c-google::before {
+  content: "#4285f4";
+  display: inline-block;
+}
+
+.var-a-c-naver::before {
+  display: inline-block;
+  content: "c-naver";
+}
+
+.var-b-c-naver::before {
+  content: "#03cf5d";
+  display: inline-block;
+}
+
+.var-a-c-wechat::before {
+  display: inline-block;
+  content: "c-wechat";
+}
+
+.var-b-c-wechat::before {
+  content: "#2dc100";
+  display: inline-block;
+}
+
+.bg-c-white {
+  background-color: #fff;
+}
+
+.bg-c-black {
+  background-color: #000;
+}
+
+.bg-c-dark-grey {
+  background-color: #8e8e8e;
+}
+
+.bg-c-middle-grey {
+  background-color: #e3e3e3;
+}
+
+.bg-c-light-grey {
+  background-color: #f0f0f0;
+}
+
+.bg-c-primary {
+  background-color: #000;
+}
+
+.bg-c-secondary {
+  background-color: #000;
+}
+
+.bg-c-accent {
+  background-color: #b40016;
+}
+
+.bg-c-error {
+  background-color: #b40016;
+}
+
+.bg-c-sale {
+  background-color: #b40016;
+}
+
+.bg-c-info {
+  background-color: #1a32a4;
+}
+
+.bg-c-valid {
+  background-color: #76ae4a;
+}
+
+.bg-c-warning {
+  background-color: #ffc700;
+}
+
+.bg-c-feel {
+  background-color: #fb9962;
+}
+
+.bg-c-feel-dark {
+  background-color: #c94c07;
+}
+
+.bg-c-feel-light {
+  background-color: #fccbb0;
+}
+
+.bg-c-limited {
+  background-color: #000;
+}
+
+.bg-c-success {
+  background-color: #76ae4a;
+}
+
+.bg-c-alert {
+  background-color: #ffc700;
+}
+
+.bg-c-facebook {
+  background-color: #1977f3;
+}
+
+.bg-c-google {
+  background-color: #4285f4;
+}
+
+.bg-c-naver {
+  background-color: #03cf5d;
+}
+
+.bg-c-wechat {
+  background-color: #2dc100;
+}
+
+.marginbox-top .filas:nth-child(1) .item::after {
+  content: "mtr-128";
+}
+.marginbox-top .filas:nth-child(1) .item-0 {
+  word-wrap: break-word;
+}
+.marginbox-top .filas:nth-child(1) .item-1::after {
+  content: "64px";
+}
+.marginbox-top .filas:nth-child(1) .item-2::after {
+  content: "128px";
+}
+.marginbox-top .filas:nth-child(1) .item-3::after {
+  content: "128px";
+}
+.marginbox-top .filas:nth-child(1) .item-4::after {
+  content: "128px";
+}
+
+.marginbox-bottom .filas:nth-child(1) .item::after {
+  content: "mbr-24";
+}
+.marginbox-bottom .filas:nth-child(1) .item-0 {
+  word-wrap: break-word;
+}
+.marginbox-bottom .filas:nth-child(1) .item-1::after {
+  content: "16px";
+}
+.marginbox-bottom .filas:nth-child(1) .item-2::after {
+  content: "24px";
+}
+.marginbox-bottom .filas:nth-child(1) .item-3::after {
+  content: "24px";
+}
+.marginbox-bottom .filas:nth-child(1) .item-4::after {
+  content: "24px";
+}
+
+.marginbox-bottom .filas:nth-child(2) .item::after {
+  content: "mbr-32";
+}
+.marginbox-bottom .filas:nth-child(2) .item-0 {
+  word-wrap: break-word;
+}
+.marginbox-bottom .filas:nth-child(2) .item-1::after {
+  content: "24px";
+}
+.marginbox-bottom .filas:nth-child(2) .item-2::after {
+  content: "32px";
+}
+.marginbox-bottom .filas:nth-child(2) .item-3::after {
+  content: "32px";
+}
+.marginbox-bottom .filas:nth-child(2) .item-4::after {
+  content: "32px";
+}
+
+.marginbox-bottom .filas:nth-child(3) .item::after {
+  content: "mbr-64";
+}
+.marginbox-bottom .filas:nth-child(3) .item-0 {
+  word-wrap: break-word;
+}
+.marginbox-bottom .filas:nth-child(3) .item-1::after {
+  content: "32px";
+}
+.marginbox-bottom .filas:nth-child(3) .item-2::after {
+  content: "64px";
+}
+.marginbox-bottom .filas:nth-child(3) .item-3::after {
+  content: "64px";
+}
+.marginbox-bottom .filas:nth-child(3) .item-4::after {
+  content: "64px";
+}
+
+.marginbox-bottom .filas:nth-child(4) .item::after {
+  content: "mbr-128";
+}
+.marginbox-bottom .filas:nth-child(4) .item-0 {
+  word-wrap: break-word;
+}
+.marginbox-bottom .filas:nth-child(4) .item-1::after {
+  content: "64px";
+}
+.marginbox-bottom .filas:nth-child(4) .item-2::after {
+  content: "128px";
+}
+.marginbox-bottom .filas:nth-child(4) .item-3::after {
+  content: "128px";
+}
+.marginbox-bottom .filas:nth-child(4) .item-4::after {
+  content: "128px";
+}
+
+.marginbox-bottom .filas:nth-child(5) .item::after {
+  content: "mbr-20-40";
+}
+.marginbox-bottom .filas:nth-child(5) .item-0 {
+  word-wrap: break-word;
+}
+.marginbox-bottom .filas:nth-child(5) .item-1::after {
+  content: "20px";
+}
+.marginbox-bottom .filas:nth-child(5) .item-2::after {
+  content: "40px";
+}
+.marginbox-bottom .filas:nth-child(5) .item-3::after {
+  content: "40px";
+}
+.marginbox-bottom .filas:nth-child(5) .item-4::after {
+  content: "40px";
+}
+
+.paddingbox .filas:nth-child(1) .item::after {
+  content: "p-body";
+}
+.paddingbox .filas:nth-child(1) .item-0 {
+  word-wrap: break-word;
+}
+.paddingbox .filas:nth-child(1) .item-1::after {
+  content: "16px";
+}
+.paddingbox .filas:nth-child(1) .item-2::after {
+  content: "16px";
+}
+.paddingbox .filas:nth-child(1) .item-3::after {
+  content: "40px";
+}
+.paddingbox .filas:nth-child(1) .item-4::after {
+  content: "40px";
+}
+
+.paddingbox-top .filas:nth-child(1) .item::after {
+  content: "ptr-120";
+}
+.paddingbox-top .filas:nth-child(1) .item-0 {
+  word-wrap: break-word;
+}
+.paddingbox-top .filas:nth-child(1) .item-1::after {
+  content: "64px";
+}
+.paddingbox-top .filas:nth-child(1) .item-2::after {
+  content: "64px";
+}
+.paddingbox-top .filas:nth-child(1) .item-3::after {
+  content: "120px";
+}
+.paddingbox-top .filas:nth-child(1) .item-4::after {
+  content: "120px";
+}
+
+.paddingbox-top .filas:nth-child(2) .item::after {
+  content: "ptr-128";
+}
+.paddingbox-top .filas:nth-child(2) .item-0 {
+  word-wrap: break-word;
+}
+.paddingbox-top .filas:nth-child(2) .item-1::after {
+  content: "64px";
+}
+.paddingbox-top .filas:nth-child(2) .item-2::after {
+  content: "64px";
+}
+.paddingbox-top .filas:nth-child(2) .item-3::after {
+  content: "128px";
+}
+.paddingbox-top .filas:nth-child(2) .item-4::after {
+  content: "128px";
+}
+
+.paddingbox-left .filas:nth-child(1) .item::after {
+  content: "pl-body";
+}
+.paddingbox-left .filas:nth-child(1) .item-0 {
+  word-wrap: break-word;
+}
+.paddingbox-left .filas:nth-child(1) .item-1::after {
+  content: "16px";
+}
+.paddingbox-left .filas:nth-child(1) .item-2::after {
+  content: "16px";
+}
+.paddingbox-left .filas:nth-child(1) .item-3::after {
+  content: "40px";
+}
+.paddingbox-left .filas:nth-child(1) .item-4::after {
+  content: "40px";
+}
+
+.paddingbox-bottom .filas:nth-child(1) .item::after {
+  content: "pbr-128";
+}
+.paddingbox-bottom .filas:nth-child(1) .item-0 {
+  word-wrap: break-word;
+}
+.paddingbox-bottom .filas:nth-child(1) .item-1::after {
+  content: "64px";
+}
+.paddingbox-bottom .filas:nth-child(1) .item-2::after {
+  content: "64px";
+}
+.paddingbox-bottom .filas:nth-child(1) .item-3::after {
+  content: "128px";
+}
+.paddingbox-bottom .filas:nth-child(1) .item-4::after {
+  content: "128px";
+}
+
+.paddingbox-right .filas:nth-child(1) .item::after {
+  content: "pr-body";
+}
+.paddingbox-right .filas:nth-child(1) .item-0 {
+  word-wrap: break-word;
+}
+.paddingbox-right .filas:nth-child(1) .item-1::after {
+  content: "16px";
+}
+.paddingbox-right .filas:nth-child(1) .item-2::after {
+  content: "16px";
+}
+.paddingbox-right .filas:nth-child(1) .item-3::after {
+  content: "40px";
+}
+.paddingbox-right .filas:nth-child(1) .item-4::after {
+  content: "40px";
+}
+
+.heights .filas:nth-child(1) .item::after {
+  content: "height-xs";
+}
+.heights .filas:nth-child(1) .item-1::after {
+  content: "80px";
+}
+.heights .filas:nth-child(1) .item-2::after {
+  content: "80px";
+}
+
+.heights .filas:nth-child(2) .item::after {
+  content: "height-sm";
+}
+.heights .filas:nth-child(2) .item-1::after {
+  content: "100px";
+}
+.heights .filas:nth-child(2) .item-2::after {
+  content: "100px";
+}
+
+.heights .filas:nth-child(3) .item::after {
+  content: "height-128";
+}
+.heights .filas:nth-child(3) .item-1::after {
+  content: "128px";
+}
+.heights .filas:nth-child(3) .item-2::after {
+  content: "128px";
+}
+
+.heights .filas:nth-child(4) .item::after {
+  content: "height-md";
+}
+.heights .filas:nth-child(4) .item-1::after {
+  content: "350px";
+}
+.heights .filas:nth-child(4) .item-2::after {
+  content: "350px";
+}
+
+.heights .filas:nth-child(5) .item::after {
+  content: "height-lg";
+}
+.heights .filas:nth-child(5) .item-1::after {
+  content: "400px";
+}
+.heights .filas:nth-child(5) .item-2::after {
+  content: "400px";
+}
+
+.heights .filas:nth-child(6) .item::after {
+  content: "height-xl";
+}
+.heights .filas:nth-child(6) .item-1::after {
+  content: "450px";
+}
+.heights .filas:nth-child(6) .item-2::after {
+  content: "450px";
+}
+
+.heights .filas:nth-child(7) .item::after {
+  content: "height-full";
+}
+.heights .filas:nth-child(7) .item-1::after {
+  content: "100vh";
+}
+.heights .filas:nth-child(7) .item-2::after {
+  content: "100vh";
+}
+
+.heights .filas:nth-child(8) .item::after {
+  content: "height-big";
+}
+.heights .filas:nth-child(8) .item-1::after {
+  content: "300px";
+}
+.heights .filas:nth-child(8) .item-2::after {
+  content: "500px";
+}
+
+.heights .filas:nth-child(9) .item::after {
+  content: "height-medium";
+}
+.heights .filas:nth-child(9) .item-1::after {
+  content: "200px";
+}
+.heights .filas:nth-child(9) .item-2::after {
+  content: "400px";
+}
+
+.heights .filas:nth-child(10) .item::after {
+  content: "height-mini";
+}
+.heights .filas:nth-child(10) .item-1::after {
+  content: "100px";
+}
+.heights .filas:nth-child(10) .item-2::after {
+  content: "300px";
+}
+
+.heights .filas:nth-child(11) .item::after {
+  content: "height-home";
+}
+.heights .filas:nth-child(11) .item-1::after {
+  content: "calc(100vh - 80px)";
+}
+.heights .filas:nth-child(11) .item-2::after {
+  content: "calc(100vh - 80px)";
+}
+
+.fluids .filas:nth-child(1) .item::after {
+  content: "2";
+}
+.fluids .filas:nth-child(1) .item-1::after {
+  content: "40px";
+}
+.fluids .filas:nth-child(1) .item-2::after {
+  content: "100px";
+}
+.fluids .filas:nth-child(1) .item-3::after {
+  content: "0.9";
+}
+
+.fluids .filas:nth-child(2) .item::after {
+  content: "1";
+}
+.fluids .filas:nth-child(2) .item-1::after {
+  content: "60px";
+}
+.fluids .filas:nth-child(2) .item-2::after {
+  content: "160px";
+}
+.fluids .filas:nth-child(2) .item-3::after {
+  content: "0.8";
+}
+
+.minheaders .filas:nth-child(1) .item::after {
+  content: "tit-m";
+}
+.minheaders .filas:nth-child(1) .item-1::after {
+  content: "14px";
+}
+.minheaders .filas:nth-child(1) .item-2::after {
+  content: "16px";
+}
+.minheaders .filas:nth-child(1) .item-3::after {
+  content: "1.2";
+}
+.minheaders .filas:nth-child(1) .item-4::after {
+  content: "medium";
+}
+
+.minheaders .filas:nth-child(2) .item::after {
+  content: "tit-s";
+}
+.minheaders .filas:nth-child(2) .item-1::after {
+  content: "13px";
+}
+.minheaders .filas:nth-child(2) .item-2::after {
+  content: "13px";
+}
+.minheaders .filas:nth-child(2) .item-3::after {
+  content: "1.2";
+}
+.minheaders .filas:nth-child(2) .item-4::after {
+  content: "medium";
+}
+
+.minheaders .filas:nth-child(3) .item::after {
+  content: "tit-xs";
+}
+.minheaders .filas:nth-child(3) .item-1::after {
+  content: "12px";
+}
+.minheaders .filas:nth-child(3) .item-2::after {
+  content: "12px";
+}
+.minheaders .filas:nth-child(3) .item-3::after {
+  content: "1.2";
+}
+.minheaders .filas:nth-child(3) .item-4::after {
+  content: "regular";
+}
+
+.minheaders .filas:nth-child(4) .item::after {
+  content: "tit-xs-b";
+}
+.minheaders .filas:nth-child(4) .item-1::after {
+  content: "12px";
+}
+.minheaders .filas:nth-child(4) .item-2::after {
+  content: "12px";
+}
+.minheaders .filas:nth-child(4) .item-3::after {
+  content: "1.2";
+}
+.minheaders .filas:nth-child(4) .item-4::after {
+  content: "bold";
+}
+
+.minheaders .filas:nth-child(5) .item::after {
+  content: "sub-xs";
+}
+.minheaders .filas:nth-child(5) .item-1::after {
+  content: "11px";
+}
+.minheaders .filas:nth-child(5) .item-2::after {
+  content: "11px";
+}
+.minheaders .filas:nth-child(5) .item-3::after {
+  content: "1.2";
+}
+.minheaders .filas:nth-child(5) .item-4::after {
+  content: "regular";
+}
+
+.minheaders .filas:nth-child(6) .item::after {
+  content: "p-m";
+}
+.minheaders .filas:nth-child(6) .item-1::after {
+  content: "12px";
+}
+.minheaders .filas:nth-child(6) .item-2::after {
+  content: "12px";
+}
+.minheaders .filas:nth-child(6) .item-3::after {
+  content: "1.2";
+}
+.minheaders .filas:nth-child(6) .item-4::after {
+  content: "regular";
+}
+
+.minheaders .filas:nth-child(7) .item::after {
+  content: "p-s";
+}
+.minheaders .filas:nth-child(7) .item-1::after {
+  content: "12px";
+}
+.minheaders .filas:nth-child(7) .item-2::after {
+  content: "12px";
+}
+.minheaders .filas:nth-child(7) .item-3::after {
+  content: "1.2";
+}
+.minheaders .filas:nth-child(7) .item-4::after {
+  content: "regular";
+}
+
+.minheaders .filas:nth-child(8) .item::after {
+  content: "p-xs";
+}
+.minheaders .filas:nth-child(8) .item-1::after {
+  content: "11px";
+}
+.minheaders .filas:nth-child(8) .item-2::after {
+  content: "11px";
+}
+.minheaders .filas:nth-child(8) .item-3::after {
+  content: "1.2";
+}
+.minheaders .filas:nth-child(8) .item-4::after {
+  content: "regular";
+}
+
+.minheaders .filas:nth-child(9) .item::after {
+  content: "p-tag";
+}
+.minheaders .filas:nth-child(9) .item-1::after {
+  content: "10px";
+}
+.minheaders .filas:nth-child(9) .item-2::after {
+  content: "10px";
+}
+.minheaders .filas:nth-child(9) .item-3::after {
+  content: "1.3";
+}
+.minheaders .filas:nth-child(9) .item-4::after {
+  content: "regular";
+}
+
+.minheaders .filas:nth-child(10) .item::after {
+  content: "p-m-b";
+}
+.minheaders .filas:nth-child(10) .item-1::after {
+  content: "12px";
+}
+.minheaders .filas:nth-child(10) .item-2::after {
+  content: "13px";
+}
+.minheaders .filas:nth-child(10) .item-3::after {
+  content: "1.2";
+}
+.minheaders .filas:nth-child(10) .item-4::after {
+  content: "bold";
+}
+
+.minheaders .filas:nth-child(11) .item::after {
+  content: "p-m-m";
+}
+.minheaders .filas:nth-child(11) .item-1::after {
+  content: "12px";
+}
+.minheaders .filas:nth-child(11) .item-2::after {
+  content: "13px";
+}
+.minheaders .filas:nth-child(11) .item-3::after {
+  content: "1.2";
+}
+.minheaders .filas:nth-child(11) .item-4::after {
+  content: "medium";
+}
+
+.minheaders .filas:nth-child(12) .item::after {
+  content: "p-xs-b";
+}
+.minheaders .filas:nth-child(12) .item-1::after {
+  content: "11px";
+}
+.minheaders .filas:nth-child(12) .item-2::after {
+  content: "12px";
+}
+.minheaders .filas:nth-child(12) .item-3::after {
+  content: "1.3";
+}
+.minheaders .filas:nth-child(12) .item-4::after {
+  content: "bold";
+}
+
+.minheaders .filas:nth-child(13) .item::after {
+  content: "p-xxs-b";
+}
+.minheaders .filas:nth-child(13) .item-1::after {
+  content: "9px";
+}
+.minheaders .filas:nth-child(13) .item-2::after {
+  content: "9px";
+}
+.minheaders .filas:nth-child(13) .item-3::after {
+  content: "1.3";
+}
+.minheaders .filas:nth-child(13) .item-4::after {
+  content: "bold";
+}
+
+.font-family-a::after {
+  content: "arial, sans-serif";
+  position: relative;
+}
+
+.font-family-b::after {
+  content: '"arial black", sans-serif';
+  position: relative;
+}
+
+.font-family-c::after {
+  content: '"ms-serif", serif';
+  position: relative;
+}
+
+.mini-site-main {
+  padding-left: 200px;
+  padding-right: 20px;
+}
+
+.tag-color-wrap .wrap-item {
+  position: relative;
+  width: 100%;
+  margin: 10px 10px 0 0;
+  padding: 5px;
+  box-shadow: 0 9px 25px rgba(0, 0, 0, 0.15);
+}
+.tag-color-wrap .wrap-item::after {
+  position: absolute;
+  margin-top: -50px;
+  bottom: 10px;
+  font-size: 12px;
+  left: 16px;
+}
+.tag-color-wrap .wrap-item ::before {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  z-index: 10;
+  font-size: 12px;
+  margin-top: -40px;
+  left: 0;
+  color: white;
+  bottom: 27px;
+}
+.tag-color-wrap .wrap-item .item {
+  height: 100px;
+  margin: 0;
+  position: relative;
+}
+.tag-color-wrap .wrap-item .item::after {
+  font-size: 12px;
+  position: absolute;
+  margin-top: -20px;
+  width: 100%;
+}
+
+.site-menu-mobile {
+  background-color: #000;
+  position: fixed;
+  height: 100vh;
+  width: 60px;
+}
+
+.guide section {
+  padding-bottom: 20px;
+}
+.guide .element-code {
+  width: 100%;
+  max-width: 500px;
+  min-height: 200px;
+  margin: 20px auto;
+}
+.guide .title-zone {
+  color: #000;
+  margin-bottom: 20px;
+  padding: 100px 0 10px;
+}
+.guide .site-main {
+  position: relative;
+  margin: 0 0 0 55px;
+  padding: 0 8px;
+}
+@media (min-width: 1280px) {
+  .guide .site-main {
+    margin: 0 0 0 180px;
+  }
+}
+.guide .mb-5 {
+  margin-bottom: 5px;
+}
+.guide .menu-lateral ul.list-clear li {
+  margin: 0;
+  line-height: 1.2;
+}
+.guide .menu-lateral {
+  padding-left: 10px;
+}
+.guide .guide-logo-menu img {
+  padding-top: 20px;
+}
+.guide .list-clear {
+  margin-bottom: 30px;
+}
+.guide .guide-title {
+  color: #878787;
+  font-size: 11px;
+  font-family: Arial, Helvetica, sans-serif !important;
+  text-transform: uppercase;
+}
+.guide .guide-text {
+  text-align: center;
+  width: 100%;
+  color: #b7c1c8;
+  font-size: 8px;
+  font-family: Arial, Helvetica, sans-serif !important;
+  text-transform: uppercase;
+  padding: 10px 0;
+  float: left;
+}
+.guide .guide-text span {
+  width: 100%;
+  clear: both;
+  float: left;
+}
+.guide .menulateral {
+  position: fixed;
+  top: 62px;
+  overflow: auto;
+  height: calc(100vh - 62px);
+  font-size: 10px;
+  box-sizing: border-box;
+  -webkit-box-flex: 0;
+  width: 180px;
+  padding: 0 0 0 20px;
+}
+.guide .menulateral html {
+  font-size: 12px;
+}
+.guide .guide-hover {
+  text-decoration: none;
+  opacity: 0.6;
+}
+.guide code[class*=language-],
+.guide pre[class*=language-] {
+  font-size: 12px;
+}
+.guide table {
+  width: 100%;
+  max-width: 100%;
+  border-collapse: collapse;
+  caption-side: bottom;
+  font-size: 12px;
+  text-align: left;
+}
+.guide table th:nth-child(1) {
+  width: 150px;
+}
+.guide table thead tr th,
+.guide table thead tr td,
+.guide table tbody tr th,
+.guide table tbody tr td,
+.guide table tfoot tr th,
+.guide table tfoot tr td {
+  padding: 10px;
+  vertical-align: top;
+  border: 1px solid #eaeaea;
+}
+.guide table thead tr th p:last-child,
+.guide table thead tr td p:last-child,
+.guide table tbody tr th p:last-child,
+.guide table tbody tr td p:last-child,
+.guide table tfoot tr th p:last-child,
+.guide table tfoot tr td p:last-child {
+  margin-bottom: 0;
+}
+.guide table td:first-child > code {
+  white-space: nowrap;
+}
+.guide table thead {
+  background-color: #363636;
+  color: #fff;
+}
+.guide table td:first-child {
+  color: #363636 !important;
+}
+.guide code {
+  background-color: #f1f1f1;
+  padding-left: 4px;
+  padding-right: 4px;
+  color: #6759bb;
+}
+.guide pre > code {
+  background-color: transparent;
+}
+.guide a {
+  text-decoration: none;
+}
+.guide .item-w {
+  width: 40px;
+  height: 40px;
+  padding: 4px;
+  background: #eceff3;
+}
+.guide .item-i {
+  min-width: 20%;
+  min-height: 20%;
+  display: block;
+  border: 1px solid #fff;
+  box-sizing: border-box;
+}
+.guide .item-i:nth-child(1) {
+  background-color: #363636;
+  opacity: 0.93;
+}
+.guide .item-i:nth-child(2) {
+  background-color: #363636;
+  opacity: 0.83;
+}
+.guide .item-i:nth-child(3) {
+  background-color: #363636;
+  opacity: 0.79;
+}
+.guide .item-i:nth-child(4) {
+  background-color: #363636;
+  opacity: 0.72;
+}
+.guide .item-i:nth-child(5) {
+  background-color: #363636;
+  opacity: 0.65;
+}
+.guide .item-i:nth-child(6) {
+  background-color: #363636;
+  opacity: 0.58;
+}
+.guide .item-i:nth-child(7) {
+  background-color: #363636;
+  opacity: 0.51;
+}
+.guide .item-i:nth-child(8) {
+  background-color: #363636;
+  opacity: 0.44;
+}
+.guide .item-i:nth-child(9) {
+  background-color: #363636;
+  opacity: 0.37;
+}
+.guide .item-i:nth-child(10) {
+  background-color: #363636;
+  opacity: 0.3;
+}
+.guide .box-demo,
+.guide .box-demo2 {
+  height: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+  border: 1px solid #fff;
+}
+.guide .box-demo-inner {
+  height: 200px;
+  border: 1px solid #fff;
+  background-color: #363636;
+  opacity: 0.6;
+  font-size: 20px;
+  padding-top: 100px;
+  text-align: center;
+  color: #fff;
+}
+.guide .box-demo:nth-child(1) {
+  background-color: rgba(0, 191, 203, 0.2);
+}
+.guide .box-demo:nth-child(2) {
+  background-color: rgba(0, 191, 203, 0.2);
+}
+.guide .box-demo:nth-child(3) {
+  background-color: rgba(0, 191, 203, 0.2);
+}
+.guide .box-demo2:nth-child(1) {
+  background-color: rgba(255, 33, 33, 0.2);
+}
+.guide .box-demo2:nth-child(2) {
+  background-color: rgba(255, 33, 33, 0.2);
+}
+.guide .box-demo2:nth-child(3) {
+  background-color: rgba(255, 33, 33, 0.2);
+}
+.guide .box-demo .col {
+  font-size: 12px;
+  background-color: rgba(0, 191, 203, 0.6);
+  border: 1px solid #fff;
+}
+.guide .flexbox-map .h3 {
+  min-height: 50px;
+  font-size: 20px;
+  background-color: rgba(33, 255, 214, 0.33);
+  padding: 20px;
+}
+.guide .box-info {
+  padding: 20px;
+  border: 1px solid gray;
+  font-style: italic;
+  opacity: 0.5;
+}
+.guide .guide-icon-top {
+  display: inline-block;
+}
+.guide .resize-container {
+  position: relative;
+  min-height: 400px;
+  display: flex;
+  padding: 50px 0;
+  grid-template-columns: repeat(3, 1fr);
+  justify-content: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+.guide .mini-box {
+  background: #eaeaea;
+  width: 100px;
+  color: #757171;
+  font-size: 10px;
+  float: left;
+  margin: 11px;
+}
+
+pre[class*=language-] {
+  margin: 20px 0;
+}
+
+.mini-box span {
+  font-family: arial, sans-serif;
+  font-weight: 900;
+  display: block;
+  font-size: 14px;
+}
+
+.filas {
+  line-height: 2;
+}
+
+.item {
+  white-space: nowrap;
+}
+
+.bg-docs {
+  background: #fafafa;
+}
+
+.grid-6-docs {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  column-gap: 0;
+}
+.grid-6-docs div:nth-child(6n+3),
+.grid-6-docs div:nth-child(6n+4) {
+  background-color: #eaeaea;
+}
+.grid-6-docs div {
+  border-bottom: 1px solid #f6f6f6;
+  padding: 6px;
+}
+.grid-6-docs div:nth-child(6n+1),
+.grid-6-docs div:nth-child(6n+3),
+.grid-6-docs div:nth-child(6n+5) {
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.grid-8-docs {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  /* Opcional: Estilos para filas impares */
+}
+.grid-8-docs:nth-child(even) {
+  background-color: #f7f6f6; /* Cambia el color de fondo de las filas pares */
+}
+.grid-8-docs:nth-child(odd) {
+  background-color: #fff; /* Cambia el color de fondo de las filas impares */
+}
+
+.grid-24-docs {
+  display: grid;
+  grid-template-columns: repeat(24, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.grid-10-docs {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  border-bottom: 1px dashed #d8d8d8;
+  border-left: 1px dashed #d8d8d8;
+  align-items: start;
+}
+.grid-10-docs div {
+  padding: 10px;
+  border-top: 1px dashed #d8d8d8;
+  border-right: 1px dashed #d8d8d8;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.grid-4-docs {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  border-bottom: 1px dashed #d8d8d8;
+  border-left: 1px dashed #d8d8d8;
+  align-items: start;
+}
+.grid-4-docs > div {
+  padding: 10px;
+  border-top: 1px dashed #d8d8d8;
+  border-right: 1px dashed #d8d8d8;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/*# sourceMappingURL=docs.css.map */