Improve styles. Add missing images

css/fonts.css

@@ -118,6 +118,24 @@
   src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+/* latin-ext */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 800;
+  src: local('Raleway ExtraBold'), local('Raleway-ExtraBold'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptrg8zYS_SKggPNwIouWqhPAMif.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 800;
+  src: local('Raleway ExtraBold'), local('Raleway-ExtraBold'), url(https://fonts.gstatic.com/s/raleway/v13/1Ptrg8zYS_SKggPNwIouWqZPAA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
 /* cyrillic-ext */
 @font-face {
   font-family: 'Roboto';

css/main.css

@@ -1,4 +1,4 @@
-body {
+/* body {
     font-family: 'Roboto', sans-serif;
     background-color: white;
     color: #182F40;
@@ -49,7 +49,6 @@ html {
 }
 
 table {
-    /* page-break-before: always; */
     width: 100%;
 }
 
@@ -273,4 +272,102 @@ table.domi-prod {
 h2.domi-h2 {
     padding: 1rem;
     margin-bottom: 0;
+} */
+
+
+body {
+    font-size: 1.5rem;
+    font-family: 'Roboto', sans-serif;
+}
+
+#eba-cover {
+    background-color: #0C2545;
+    color: white;
+    text-align: left;
+}
+
+#eba-about {
+    text-align: justify;
+}
+
+.pagebreak {
+    page-break-before: always;
+}
+
+h2 {
+    font-family: 'Raleway', sans-serif;
+    text-transform: uppercase;
+    font-weight: 800;
+    color: #0C2545;
+    position: relative;
+    font-size: 2.5rem;
+    margin: 2rem 0;
+}
+
+h2::before {
+    background: #5A91C4;
+    content: '';
+    display: block;
+    height: 5rem;
+    left: -80px;
+    position: absolute;
+    top: -1rem;
+    width: 4rem;
+    z-index: -1;
+}
+
+h3 {
+    text-align: center;
+}
+
+h3::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 0.5rem;
+    background-color: #5A91C4;
+    margin-top: .5rem;
+}
+
+h4 {
+    margin: 1rem 0 .5rem 0;
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+h4.product-name {
+    color: #5A91C4;
+    font-size: 1.8rem;
+}
+
+p {
+    margin: .5rem 0 1rem 0;
+}
+
+p.product-short-desc {
+    font-family: 'Raleway', sans-serif;
+    font-style: italic;
+    color: #0C2545;
+}
+
+.product-short-desc,
+.section-body {
+    text-align: justify;
+}
+.collection {
+    border: 0;
+}
+
+.product-container {
+    page-break-inside: avoid;
+}
+
+.product-container
+.row {
+    margin-bottom: 1rem;
+}
+.collection
+.collection-item {
+    padding: 0;
+    line-height: 1.8rem;
 }

data/products-by-category.json

@@ -1028,7 +1028,8 @@
 					"img": "antioxidante-corporal-500"
 				}
 			],
-			"name": "Crema Antioxidante Corporal"
+			"name": "Crema Antioxidante Corporal",
+			"img": "antioxidante-corporal-500"
 		},
 		{
 			"category": [

images/horizontal.svg

@@ -0,0 +1,125 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 418 97" style="enable-background:new 0 0 418 97;" xml:space="preserve">
+<g>
+	<path d="M88.88,35.8c-0.47-1.45-1.2-2.74-2.05-3.82c-0.85-1.08-1.82-1.96-2.83-2.68c-0.51-0.36-1.03-0.68-1.56-0.96
+		c-0.53-0.28-1.06-0.53-1.6-0.75c-1.08-0.43-2.18-0.74-3.28-0.95c-2.21-0.41-4.43-0.43-6.62-0.15c-2.19,0.28-4.34,0.86-6.43,1.67
+		c-2.09,0.81-4.12,1.87-6.06,3.13c-3.21,2.08-6.19,4.72-8.87,7.78c-1.1-0.92-2.21-1.85-3.32-2.78c1.09-1.07,2.16-2.18,3.2-3.34
+		c0.55-0.6,1.09-1.21,1.62-1.84c0.53-0.63,1.06-1.26,1.57-1.91c2.07-2.59,4.02-5.34,5.77-8.33c0.87-1.49,1.7-3.04,2.41-4.69
+		c0.36-0.82,0.69-1.66,0.97-2.54c0.28-0.87,0.52-1.78,0.63-2.7c-0.27,0.86-0.63,1.66-1.02,2.42c-0.39,0.76-0.81,1.49-1.25,2.2
+		c-0.44,0.7-0.9,1.39-1.37,2.06c-0.47,0.67-0.95,1.33-1.44,1.97c-1.97,2.58-4.06,4.99-6.21,7.28c-0.54,0.57-1.08,1.14-1.63,1.7
+		c-0.55,0.56-1.1,1.11-1.65,1.66c-1.11,1.09-2.23,2.14-3.37,3.17c-0.27,0.25-0.55,0.48-0.82,0.73c-0.51-0.42-1.02-0.84-1.54-1.26
+		c-0.92-0.75-1.85-1.5-2.79-2.23c-0.94-0.73-1.89-1.46-2.84-2.16c-0.48-0.35-0.96-0.7-1.45-1.05c-0.5-0.35-1-0.68-1.5-1.01
+		c-2.02-1.31-4.12-2.44-6.29-3.33c-2.17-0.88-4.42-1.52-6.72-1.77c-2.3-0.25-4.66-0.11-6.95,0.62c-0.57,0.19-1.14,0.41-1.7,0.67
+		c-0.56,0.26-1.11,0.57-1.64,0.91c-1.07,0.7-2.08,1.57-2.98,2.64c-0.89,1.06-1.67,2.31-2.25,3.7c-0.58,1.39-0.97,2.91-1.11,4.46
+		c-0.07,0.77-0.09,1.55-0.05,2.32c0.04,0.76,0.14,1.51,0.3,2.24c0.31,1.45,1.01,3.56,1.8,4.62c-0.01-0.02,0.02,0,0.05,0.03
+		c-0.02-0.01-0.03-0.02-0.05-0.03c0.48,1,2.93,3.15,4.18,4.1c0.62,0.48,1.28,0.9,1.95,1.26c0.67,0.36,1.36,0.65,2.07,0.9
+		c0.71,0.24,1.42,0.42,2.14,0.56c0.72,0.13,1.45,0.21,2.17,0.25c0.73,0.04,1.45,0.02,2.18-0.03c0.72-0.05,1.45-0.13,2.17-0.26
+		c0.72-0.13,1.43-0.28,2.14-0.47c0.71-0.19,1.41-0.41,2.11-0.65c1.39-0.48,2.77-1.07,4.11-1.73c2.69-1.33,5.28-2.97,7.77-4.83
+		c1.04-0.77,2.05-1.58,3.06-2.43l0.41,0.34c1.2,0.98,2.4,1.97,3.61,2.95c-0.14,0.18-0.28,0.36-0.42,0.54
+		c-0.77,1.02-1.5,2.1-2.17,3.26c-0.67,1.16-1.28,2.4-1.79,3.73c-0.51,1.33-0.91,2.76-1.16,4.25c-0.25,1.49-0.33,3.04-0.21,4.57
+		c0.11,1.53,0.42,3.02,0.87,4.4c0.46,1.38,1.06,2.65,1.75,3.79c0.69,1.14,1.47,2.17,2.3,3.09c1.66,1.84,3.51,3.27,5.44,4.41
+		c1.93,1.14,3.93,1.99,5.97,2.6c1.02,0.3,2.05,0.55,3.07,0.74c1.03,0.18,2.06,0.31,3.1,0.39c2.07,0.15,4.14,0.07,6.19-0.23
+		c-4.12,0.11-8.23-0.58-12.13-2.12c-1.95-0.78-3.84-1.76-5.62-3c-0.89-0.62-1.75-1.3-2.58-2.05c-0.82-0.75-1.6-1.57-2.32-2.46
+		c-0.72-0.89-1.37-1.86-1.93-2.9c-0.56-1.04-1.02-2.15-1.35-3.31c-0.33-1.16-0.52-2.36-0.57-3.57c-0.05-1.21,0.06-2.42,0.3-3.6
+		c0.24-1.18,0.61-2.32,1.07-3.41c0.47-1.09,1.02-2.12,1.64-3.1c0.62-0.98,1.3-1.9,2.02-2.78c0.34-0.41,0.69-0.81,1.05-1.21
+		c1.65,1.3,3.33,2.58,5.03,3.8c0.96,0.69,1.94,1.37,2.92,2.02c0.99,0.65,1.98,1.28,3,1.87c1.01,0.6,2.04,1.16,3.08,1.68
+		c1.04,0.52,2.11,1,3.19,1.42c2.16,0.83,4.41,1.43,6.72,1.57c1.15,0.06,2.31,0.02,3.47-0.19c0.58-0.1,1.15-0.25,1.72-0.43
+		c0.57-0.18,1.12-0.41,1.67-0.68c0.55-0.27,1.08-0.58,1.59-0.93c0.52-0.35,1.01-0.74,1.49-1.16c0.48-0.42,0.93-0.88,1.36-1.37
+		c0.43-0.49,0.84-1.01,1.23-1.55c1.49-2.08,2.78-4.58,3.67-7.1c0.52-1.22,0.66-2.66,0.76-4.15c0.04-0.74,0.02-1.51-0.07-2.28
+		C89.28,37.29,89.11,36.53,88.88,35.8z M37.49,39.18c-2.39,1.78-4.84,3.4-7.35,4.78c-1.26,0.69-2.53,1.32-3.82,1.88
+		c-0.64,0.28-1.29,0.53-1.94,0.76c-0.65,0.24-1.31,0.45-1.97,0.63c-2.63,0.74-5.34,1.06-8.01,0.63c-1.34-0.21-2.66-0.63-3.94-1.26
+		c-1.03-0.51-4.2-3.47-4.2-3.47c-0.78-1.36-1.34-3.25-1.39-4.43c-0.03-0.69-0.02-1.37,0.04-2.04c0.06-0.67,0.17-1.32,0.32-1.95
+		c0.15-0.63,0.34-1.23,0.57-1.81c0.23-0.57,0.5-1.11,0.81-1.62c0.6-1.01,1.33-1.87,2.13-2.57c0.8-0.71,1.68-1.26,2.59-1.67
+		c0.92-0.42,1.87-0.7,2.84-0.86c1.94-0.33,3.93-0.2,5.9,0.24c1.97,0.43,3.92,1.17,5.82,2.1c1.91,0.94,3.77,2.08,5.59,3.35
+		c1.8,1.27,3.63,2.73,5.46,4.18c0.75,0.61,1.51,1.22,2.26,1.84C38.63,38.33,38.06,38.76,37.49,39.18z M84.18,50.3
+		c-0.42,0.41-0.85,0.79-1.29,1.15c-0.44,0.35-0.89,0.67-1.35,0.96c-0.46,0.28-0.93,0.53-1.4,0.75c-0.47,0.21-0.96,0.39-1.44,0.53
+		c-1.94,0.57-3.95,0.56-5.92,0.15c-1.98-0.41-3.93-1.18-5.85-2.16c-1.92-0.97-3.8-2.15-5.66-3.43c-0.93-0.64-1.85-1.3-2.77-1.99
+		c-0.92-0.68-1.83-1.39-2.74-2.11c-0.97-0.77-1.94-1.55-2.91-2.35c2.42-1.89,4.9-3.57,7.45-4.98c1.81-1,3.64-1.87,5.51-2.59
+		c1.86-0.72,3.75-1.27,5.65-1.64c1.9-0.36,3.81-0.54,5.7-0.46c0.94,0.04,1.88,0.15,2.81,0.34c0.46,0.09,0.92,0.21,1.37,0.35
+		c0.45,0.14,0.9,0.3,1.33,0.49c0.87,0.38,1.71,0.86,2.47,1.48c0.76,0.62,1.45,1.39,2.01,2.32c0.28,0.47,0.52,0.98,0.72,1.53
+		c0.2,0.55,0.36,1.14,0.47,1.77c0.17,0.96,0.35,2.62,0.11,3.86C87.22,46.79,85.85,48.65,84.18,50.3z"/>
+	<polygon points="113.13,48.93 130,48.93 130,46.21 115.85,46.21 115.85,31.64 130,31.64 130,28.77 115.85,28.77 115.85,17.39 
+		130,17.39 130,14.67 113.13,14.67 	"/>
+	<path d="M151.74,30.92c-1.07-0.65-2.37-1.31-3.84-1.97c-2.3-1.04-3.85-1.88-4.59-2.47c-1.29-1.12-1.92-2.38-1.92-3.87
+		c0-1.67,0.6-2.98,1.83-4c1.14-0.96,2.6-1.45,4.33-1.45c1.66,0,3.03,0.33,4.06,0.98c0.81,0.46,1.52,1.19,2.11,2.16l0.18,0.3
+		l2.55-1.11l-0.21-0.39c-1.69-3.06-4.62-4.61-8.69-4.61c-2.46,0-4.57,0.76-6.26,2.25c-1.74,1.48-2.63,3.46-2.63,5.88
+		c0,2.42,0.87,4.4,2.57,5.87c1.01,0.91,2.82,1.95,5.54,3.16c1.39,0.62,2.54,1.18,3.44,1.67c0.87,0.48,1.52,0.92,1.94,1.31
+		c1.58,1.4,2.35,3.11,2.35,5.23c0,2.21-0.66,3.91-1.97,5.04c-1.29,1.12-3.11,1.68-5.41,1.68c-4.05,0-6.53-1.87-7.58-5.7l-0.11-0.41
+		l-2.69,0.92l0.11,0.37c1.52,5.01,4.97,7.55,10.27,7.55c1.69,0,3.19-0.23,4.45-0.68c3.75-1.4,5.65-4.35,5.65-8.76
+		c0-2.75-0.95-5.09-2.84-6.94C153.72,32.25,152.83,31.57,151.74,30.92z"/>
+	<path d="M181.88,17.01c-1.82-1.56-4.08-2.35-6.73-2.35h-8.56v34.26h2.68V32.2h5.88c2.65,0,4.92-0.82,6.73-2.44
+		c1.83-1.57,2.76-3.72,2.76-6.4C184.64,20.72,183.71,18.59,181.88,17.01z M169.27,17.39h5.83c1.99,0,3.6,0.5,4.81,1.5
+		c1.35,1.09,2.01,2.55,2.01,4.47c0,1.93-0.63,3.4-1.91,4.52c-1.3,1.06-2.94,1.6-4.9,1.6h-5.83V17.39z"/>
+	<polygon points="195.41,48.93 212.29,48.93 212.29,46.21 198.14,46.21 198.14,31.64 212.29,31.64 212.29,28.77 198.14,28.77 
+		198.14,17.39 212.29,17.39 212.29,14.67 195.41,14.67 	"/>
+	<path d="M251.7,41.93l-0.64,0.46c-1.79,1.3-3.28,2.25-4.44,2.82c-2,0.97-4.38,1.46-7.09,1.46c-4.34,0-7.95-1.41-10.73-4.19
+		c-2.75-2.75-4.15-6.34-4.15-10.68c0-4.34,1.41-7.95,4.19-10.73c2.78-2.78,6.38-4.19,10.68-4.19c2.53,0,4.98,0.48,7.3,1.42
+		c1.52,0.64,2.93,1.5,4.21,2.56l0.66,0.55v-3.44l-0.15-0.12c-1.31-1.02-2.68-1.81-4.09-2.36c-2.35-0.86-5.01-1.29-7.92-1.29
+		c-5.15,0-9.42,1.66-12.7,4.94c-3.25,3.25-4.9,7.51-4.9,12.66c0,5.15,1.66,9.42,4.94,12.7c3.25,3.25,7.51,4.9,12.66,4.9
+		c0.44,0,0.87-0.01,1.28-0.02c0.41-0.02,0.79-0.04,1.15-0.07c3.06-0.29,5.52-1.1,7.32-2.42l2.41-1.76V41.93z"/>
+	<rect x="260.69" y="14.67" width="2.68" height="34.26"/>
+	<polygon points="273.72,48.93 276.4,48.93 276.4,31.5 289.05,31.5 289.05,28.77 276.4,28.77 276.4,17.39 289.05,17.39 
+		289.05,14.67 273.72,14.67 	"/>
+	<rect x="299.35" y="14.67" width="2.68" height="34.26"/>
+	<path d="M337.34,15.49c-2.35-0.86-5.01-1.29-7.92-1.29c-5.15,0-9.42,1.66-12.7,4.94c-3.25,3.25-4.9,7.51-4.9,12.66
+		c0,5.15,1.66,9.42,4.94,12.7c3.25,3.25,7.51,4.9,12.66,4.9c0.44,0,0.87-0.01,1.28-0.02c0.41-0.02,0.79-0.04,1.15-0.07
+		c3.06-0.29,5.52-1.1,7.32-2.42l2.41-1.76v-3.19l-0.64,0.46c-1.79,1.3-3.28,2.25-4.44,2.82c-2,0.97-4.38,1.46-7.09,1.46
+		c-4.34,0-7.95-1.41-10.73-4.19c-2.75-2.75-4.15-6.34-4.15-10.68c0-4.34,1.41-7.95,4.19-10.73c2.78-2.78,6.38-4.19,10.68-4.19
+		c2.53,0,4.98,0.48,7.3,1.42c1.52,0.64,2.93,1.5,4.21,2.56l0.66,0.55v-3.44l-0.15-0.12C340.12,16.83,338.75,16.03,337.34,15.49z"/>
+	<path d="M382.49,31.8c0-5.15-1.66-9.42-4.95-12.7c-3.31-3.25-7.58-4.89-12.7-4.89c-5.15,0-9.42,1.66-12.7,4.94
+		c-3.25,3.25-4.9,7.51-4.9,12.66c0,5.15,1.66,9.42,4.94,12.7c3.25,3.25,7.51,4.9,12.66,4.9c5.15,0,9.42-1.66,12.7-4.94
+		C380.83,41.2,382.49,36.95,382.49,31.8z M364.85,46.67c-4.34,0-7.95-1.41-10.73-4.19c-2.75-2.75-4.15-6.34-4.15-10.68
+		c0-4.34,1.41-7.95,4.19-10.73c2.78-2.78,6.38-4.19,10.68-4.19c4.37,0,7.99,1.41,10.77,4.19c2.75,2.75,4.15,6.36,4.15,10.73
+		c0,4.4-1.4,8.02-4.14,10.77C372.84,45.29,369.22,46.67,364.85,46.67z"/>
+	<path d="M405.8,48.62c3.75-1.4,5.65-4.35,5.65-8.76c0-2.75-0.95-5.09-2.84-6.94c-0.67-0.67-1.57-1.35-2.65-2
+		c-1.07-0.65-2.37-1.31-3.84-1.97c-2.3-1.04-3.85-1.88-4.59-2.47c-1.29-1.12-1.92-2.38-1.92-3.87c0-1.67,0.6-2.98,1.83-4
+		c1.14-0.96,2.6-1.45,4.33-1.45c1.66,0,3.03,0.33,4.07,0.98c0.81,0.46,1.52,1.19,2.11,2.16l0.18,0.3l2.55-1.11l-0.21-0.39
+		c-1.69-3.06-4.62-4.61-8.69-4.61c-2.46,0-4.57,0.76-6.26,2.25c-1.74,1.48-2.63,3.46-2.63,5.88c0,2.42,0.87,4.4,2.57,5.87
+		c1.01,0.91,2.82,1.95,5.54,3.16c1.39,0.62,2.54,1.18,3.44,1.67c0.87,0.48,1.52,0.92,1.94,1.31c1.58,1.4,2.35,3.11,2.35,5.23
+		c0,2.21-0.66,3.91-1.97,5.04c-1.29,1.12-3.11,1.68-5.41,1.68c-4.05,0-6.53-1.87-7.58-5.7l-0.11-0.41l-2.69,0.92l0.11,0.37
+		c1.52,5.01,4.97,7.55,10.27,7.55C403.05,49.3,404.54,49.08,405.8,48.62z"/>
+	<path d="M121.91,71.02c0.72-0.35,2.18-1.32,2.18-3.44c0-1.89-1.33-4.1-5.07-4.1h-6.11v0.76h0.13c0.92,0,1.35,0.43,1.35,1.35V78
+		c0,0.92-0.43,1.35-1.35,1.35h-0.13v0.76h6.58c4.13,0,5.59-2.61,5.59-4.85C125.08,72.27,122.85,71.3,121.91,71.02z M118.5,64.24
+		c1.86,0,3.84,1.17,3.84,3.34c0,2.18-2.23,3.34-3.84,3.34h-2.35v-6.68H118.5z M116.15,71.69H118c3.2,0,5.32,0.65,5.32,3.84
+		c0,2.11-1.61,3.83-3.59,3.83h-2.23c-0.92,0-1.35-0.43-1.35-1.35V71.69z"/>
+	<path d="M149.68,64.24h0.13c0.92,0,1.35,0.43,1.35,1.35v7.94c0,3.75-1.71,5.82-4.83,5.82c-3.11,0-4.83-2.07-4.83-5.82V65.6
+		c0-0.92,0.43-1.35,1.35-1.35H143v-0.76h-4.73v0.76h0.13c0.92,0,1.35,0.43,1.35,1.35v7.94c0,4.31,2.28,6.58,6.58,6.58
+		c3.45,0,5.59-2.43,5.59-6.34V65.6c0-0.92,0.43-1.35,1.35-1.35h0.13v-0.76h-3.74V64.24z"/>
+	<path d="M179.5,75.01c0,0.04-0.51,4.35-3.09,4.35h-4.96c-0.92,0-1.35-0.43-1.35-1.35v-6.32h3.84c1.2,0,1.35,0.46,1.35,0.86v0.63
+		h0.76v-3.74h-0.76v0.63c0,0.85-1.34,0.86-1.35,0.86h-3.84v-6.68h4.83c3.31,0,3.82,2.75,3.84,2.87l0.02,0.11h0.79l-1.07-3.74h-11.65
+		v0.76h0.13c0.92,0,1.35,0.43,1.35,1.35V78c0,0.92-0.43,1.35-1.35,1.35h-0.13v0.76h12.91l0.52-5.23h-0.76L179.5,75.01z"/>
+	<path d="M205.35,64.24h0.13c0.92,0,1.35,0.43,1.35,1.35v10.89l-9.21-12.96l-0.04-0.06h-3.65v0.76h0.13c0.92,0,1.35,0.43,1.35,1.35
+		V78c0,0.92-0.43,1.35-1.35,1.35h-0.13v0.76h3.74v-0.76h-0.13c-0.92,0-1.35-0.43-1.35-1.35V65.1l10.71,15.02h0.7V65.6
+		c0-0.92,0.43-1.35,1.35-1.35h0.13v-0.76h-3.74V64.24z"/>
+	<path d="M229.55,63.48c-3.77,0-7.58,2.57-7.58,8.32c0,5.75,3.81,8.32,7.58,8.32c4.74,0,7.58-3.11,7.58-8.32
+		C237.13,66.59,234.3,63.48,229.55,63.48z M229.55,79.38c-3.46,0-5.7-2.98-5.7-7.58c0-4.61,2.24-7.58,5.7-7.58
+		c3.46,0,5.7,2.98,5.7,7.58C235.25,76.41,233.01,79.38,229.55,79.38z"/>
+	<path d="M257,70.51c-2.38-0.61-4.43-1.13-4.43-3.18c0-2.01,1.98-3.09,3.84-3.09c3.17,0,4.83,2.05,4.83,4.08v0.13h0.76v-4.98h-0.79
+		v0.13c0,1.35-0.24,1.35-0.34,1.35c-0.09,0-0.22-0.11-0.38-0.24c-0.53-0.43-1.51-1.24-4.08-1.24c-2.72,0-5.64,1.28-5.64,4.08
+		c0,2.85,2.72,3.62,5.34,4.37c2.64,0.75,5.13,1.46,5.13,4.09c0,2.06-2.51,3.34-4.83,3.34c-2.09,0-5.32-1.86-5.32-4.33v-0.13h-0.76
+		v5.23h0.76v-0.13c0-0.99,0.22-1.35,0.36-1.35c0.1,0,0.34,0.13,0.61,0.28c0.77,0.42,2.21,1.21,4.35,1.21c4.61,0,6.58-1.3,6.58-4.35
+		C262.98,72.04,259.8,71.23,257,70.51z"/>
+	<path d="M310.38,78.59c-0.37-0.84-6.67-15.03-6.67-15.03l-0.04-0.08H303l-0.03,0.08c-0.25,0.61-6.1,14.84-6.28,15.28
+		c-0.16,0.38-0.41,0.56-0.79,0.56c-0.41,0-0.46-0.02-0.45-0.02l-0.18-0.06v0.79h3.64v-0.58l-0.01-0.13h-0.72
+		c-0.21,0-0.44-0.01-0.5-0.11c-0.05-0.07-0.07-0.24,0.1-0.67c0.34-0.76,1.56-3.75,1.78-4.29h6.94c0.24,0.55,1.67,3.78,1.85,4.24
+		c0.13,0.3,0.31,0.71,0.26,0.79c0,0.01-0.04,0.04-0.23,0.04h-0.8v0.71h4.34v-0.74h-0.38C310.9,79.38,310.71,79.38,310.38,78.59z
+		 M306.16,73.6h-6.29l3.05-7.39L306.16,73.6z"/>
+	<path d="M325.34,64.24h0.13c0.92,0,1.35,0.43,1.35,1.35V78c0,0.92-0.43,1.35-1.35,1.35h-0.13v0.76h4.73v-0.76h-0.13
+		c-0.92,0-1.35-0.43-1.35-1.35V65.6c0-0.92,0.43-1.35,1.35-1.35h0.13v-0.76h-4.73V64.24z"/>
+	<path d="M354.93,77.26c0-2.86-1.83-4.96-2.98-5.62c1.81-0.29,2.98-1.85,2.98-4.05c0-0.96-0.35-4.1-4.82-4.1h-6.36v0.76h0.13
+		c0.92,0,1.35,0.43,1.35,1.35V78c0,0.92-0.43,1.35-1.35,1.35h-0.13v0.76h4.73v-0.76h-0.13c-0.92,0-1.35-0.43-1.35-1.35v-6.32h0.86
+		c3.54,0,5.32,3.73,5.32,5.82c0,2.05,1.27,2.58,1.32,2.61l2.91,0.01v-0.76h-0.63C355.91,79.36,354.93,78.46,354.93,77.26z
+		 M346.99,64.24h2.35c1.75,0,3.83,0.58,3.83,3.34c0,3.1-2.94,3.34-3.83,3.34h-2.35V64.24z"/>
+	<path d="M383.5,75.01c0,0.04-0.52,4.35-3.09,4.35h-4.96c-0.92,0-1.35-0.43-1.35-1.35v-6.32h3.84c1.2,0,1.35,0.46,1.35,0.86v0.63
+		h0.76v-3.74h-0.76v0.63c0,0.85-1.34,0.86-1.35,0.86h-3.84v-6.68h4.83c3.31,0,3.82,2.75,3.84,2.87l0.02,0.11h0.79l-1.07-3.74h-11.65
+		v0.76h0.13c0.92,0,1.35,0.43,1.35,1.35V78c0,0.92-0.43,1.35-1.35,1.35h-0.13v0.76h12.91l0.52-5.23h-0.76L383.5,75.01z"/>
+	<path d="M404.37,70.51c-2.38-0.61-4.43-1.13-4.43-3.18c0-2.01,1.98-3.09,3.83-3.09c3.17,0,4.83,2.05,4.83,4.08v0.13h0.76v-4.98
+		h-0.79v0.13c0,1.35-0.24,1.35-0.34,1.35c-0.09,0-0.22-0.11-0.38-0.24c-0.53-0.43-1.51-1.24-4.08-1.24c-2.72,0-5.64,1.28-5.64,4.08
+		c0,2.85,2.72,3.62,5.34,4.37c2.64,0.75,5.13,1.46,5.13,4.09c0,2.06-2.51,3.34-4.83,3.34c-2.09,0-5.32-1.86-5.32-4.33v-0.13h-0.76
+		v5.23h0.76v-0.13c0-0.99,0.22-1.35,0.36-1.35c0.1,0,0.34,0.13,0.61,0.28c0.77,0.42,2.21,1.21,4.35,1.21c4.62,0,6.58-1.3,6.58-4.35
+		C410.36,72.04,407.18,71.23,404.37,70.51z"/>
+	<rect x="98.85" y="2.87" width="1.68" height="91.13"/>
+</g>
+</svg>

index.html

@@ -4,77 +4,68 @@
     <meta charset="UTF-8" />  
     <meta name="viewport" content="width=device-width, initial-scale=1, minimun-scale=1">
     <title>Vademecum</title>
-    <link rel="stylesheet" href="css/bulma.min.css">
+    <!-- <link rel="stylesheet" href="css/bulma.min.css"> -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
     <link rel="stylesheet" href="css/main.css">
     <link href="css/fonts.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
     <!-- Polyfill file for wkhtmltopdf -->
     <script src="js/polyfill.min.js"></script>
     
   </head>
   <body>
 
-    <div class="cover">
-      <div class="hero eba-hero">
-        <div class="hero-body">
-        </div>
-      </div>
+    <section id="eba-cover">
       <div class="container">
-        <image src="images/logo.png" class="image"/>
+        <image src="images/horizontal.svg" class="responsive-img"/>
         <h1>Vademecum Profesional</h1>
-        <image src="images/varios.png" class="image"/>
+        <image src="images/varios.png" class="responsive-img"/>
       </div>
-    </div>
+    </section>
 
-    <table>
-      <thead>
-        <tr>
-          <td>
-            <h2>Nosotros</h2>
-          </td>
-        </tr>
-      </thead>
-      <tbody>
-        <tr><td>
-          <div class="us-container">
-              <p>
-                Productos profesionales, elaborados con normas de calidad internacional GMP, basados en sustancias activas concentradas de gran pureza y vehículos específicos altamente eficaces que permiten optimizar la belleza y cuidados personalizados de la piel, con base científica.
-              </p>
-              <p>
-                ESPECIFICOS Buenos Aires se compromete a garantizar productos de confianza, ultra-eficaces, tecnología de avanzada y control de calidad permanente bajo normas internacionales de bioseguridad. Texturas aterciopeladas, principios activos de gran pureza, vehículos especializados que conforman productos vanguardistas con delicadas fragancias.
-              </p>
-              <p>
-                El diagnóstico previo personalizado y seguimiento por una profesional formada en tratamientos ESPECIFICOS Buenos Aires es nuestra filosofía de excelencia, ética, seriedad y apoyo constante para un perfecto resultado.
-              </p>
+    <section id="eba-about">
+      <div class="container">
+        <h2 class="pagebreak">Nosotros</h2>
+        <div>
+          <p>
+            Productos profesionales, elaborados con normas de calidad internacional GMP, basados en sustancias activas concentradas de gran pureza y vehículos específicos altamente eficaces que permiten optimizar la belleza y cuidados personalizados de la piel, con base científica.
+          </p>
+          <p>
+            ESPECIFICOS Buenos Aires se compromete a garantizar productos de confianza, ultra-eficaces, tecnología de avanzada y control de calidad permanente bajo normas internacionales de bioseguridad. Texturas aterciopeladas, principios activos de gran pureza, vehículos especializados que conforman productos vanguardistas con delicadas fragancias.
+          </p>
+          <p>
+            El diagnóstico previo personalizado y seguimiento por una profesional formada en tratamientos ESPECIFICOS Buenos Aires es nuestra filosofía de excelencia, ética, seriedad y apoyo constante para un perfecto resultado.
+          </p>
+        </div>
+        <div>
+          <div class="row">
+            <div class="col s6">
+              <image src="images/pure.png" width="124"/>
+              <p>Principios activos seleccionados de máximo grado de pureza.</p>
+            </div>
+            <div class="col s6">
+              <image src="images/application.png" width="124" />
+              <p>Formulaciones únicas, concebidas en combinación con técnicas de aplicación sinérgica, que aportan resultados inmediatos y duraderos.</p>
+            </div>
           </div>
-        </td></tr>
-        <tr><td>
-            <div class="columns foundations-container">
-              <div class="column">
-                <image src="images/pure.png" width="124"/>
-                <p>Principios activos seleccionados de máximo grado de pureza.</p>
-              </div>
-              <div class="column">
-                <image src="images/application.png" width="124" />
-                <p>Formulaciones únicas, concebidas en combinación con técnicas de aplicación sinérgica, que aportan resultados inmediatos y duraderos.</p>
-              </div>
+          <div class="row">
+            <div class="col s6">
+              <image src="images/science.png" width="124"/>
+              <p>Vehículos especializados para preservar la integridad de las fórmulas y evitar procesos de sensibilización.</p>
             </div>
-            <div class="columns foundations-container">
-              <div class="column">
-                <image src="images/science.png" width="124"/>
-                <p>Vehículos especializados para preservar la integridad de las fórmulas y evitar procesos de sensibilización.</p>
-              </div>
-              <div class="column">
-                <image src="images/certification.png" width="124" />
-                <p>Estrictos controles bajo normas de calidad internacional GMP son garantía de los productos ESPECIFICOS Buenos Aires.</p>
-              </div>
+            <div class="col s6">
+              <image src="images/certification.png" width="124" />
+              <p>Estrictos controles bajo normas de calidad internacional GMP son garantía de los productos ESPECIFICOS Buenos Aires.</p>
             </div>
-        </td></tr>
-      </tbody>
-    </table>
+          </div>
+        </div>
+      </div>
+    </section>
 
-    <div id="vademecum" class="container"></div>
+    <section id="vademecum"></section>
 
-    <table>
+    <!-- <table>
       <thead>
         <tr>
           <th>
@@ -171,7 +162,7 @@
           </div>
         </td></tr>
       </tbody> 
-    </table>
+    </table> -->
     <!-- Load React. -->
     <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
     <script src="js/react.production.min.js"></script>

js/vademecum.js

@@ -49,10 +49,8 @@ const CONFIG = {
   },
 };
 
-console.log(process.env.MODE, CONFIG[process.env.MODE]);
-
 const Tag = (label, key, className) => (
-  <span className={`tag ${className||''}`} key={key}>{label}</span>
+  <div className={`chip ${className||''}`} key={key}>{label}</div>
 );
 
 const Section = (title, paragraph, prepend) => (
@@ -60,7 +58,7 @@ const Section = (title, paragraph, prepend) => (
     <h4 className="section-name">
       { title }
     </h4>
-    <p className="section-body">
+    <p className="section-body" lang="es">
       { prepend }{ paragraph }
     </p>
   </div>
@@ -68,13 +66,25 @@ const Section = (title, paragraph, prepend) => (
 
 const Product = (product, key) => (
   <div className="product-container">
-    <h3 className="product-name">
-      {product.name}
-    </h3>
-    <div className="product-body">
-      <p className="product-short-desc">
-        {product.shortDesc}
-      </p>
+    <div className="row valign-wrapper">
+      <div class="col s2">
+        <img 
+          src={`images/_img/${product.img || product.variants[0].img}.png`}
+          className="responsive-img"
+        />
+      </div>
+      <div class="col s10">
+        <h4 className="product-name">
+          {product.name}
+        </h4>
+        <div className="product-body">
+          <p className="product-short-desc" lang="es">
+            {product.shortDesc}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div>
       {
         Section('Descripción', product.fullDesc)
       }
@@ -83,77 +93,64 @@ const Product = (product, key) => (
       }
       {
         product.actives &&
-          Section(
-            'Activos',
-            product.actives.join(', '),
-            product.ph && Tag(`PH ${product.ph}`, null, 'is-ph')
-          )
+        Section(
+          '', 
+          product.actives.map(p => Tag(p)),
+          product.ph && Tag(`PH ${product.ph}`, null, 'is-ph')
+        )
       }
     </div>
+    <div className="divider"></div>
   </div>
 );
 
-const Category = (category, products) => (
-  <table className="category-container table is-fullwidth">
-    <thead className="category" id={category[TAG]}>
-      <tr>
-        <th>
-          <h2 className="category-name">{category[LABEL]}</h2>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
+const Category = (category, products, prices) => (
+  <section id={category[TAG]} className="container">
+    <h2 className="category-name">{category[LABEL]}</h2>
+    <div className="collection">
       {
         products.map((p, i) => (
-          <tr><td>
+          <div className="collection-item">
             { Product(p, i) }
-          </td></tr>
+          </div>
         ))
       }
-    </tbody>
-    <tfoot><tr><td>
-      <div class="footer-space" height="20px">&nbsp;</div>
-    </td></tr></tfoot>
-  </table>
+    </div>
+  </section>
 );
 
 const ToC = (categories, products) => (
-  <table className='toc-table table is-fullwidth'>
-    <thead>
-      <tr><th><h2>Indice</h2></th></tr>
-    </thead>
-    <tbody>
-    {
-      categories.map((category, i) => (
-        <tr><td>
-          <div className='toc-section'>
+  <section id="eba-toc" className="container">
+    <h2 className="pagebreak">Indice</h2>
+    <div class="col s8">
+      {
+        categories.map((category, i) => (
+          <div>
             <div>
-              <a href={`#${category[TAG]}`} className='toc-title'>{category[LABEL]} 
-                <img src="images/arrow.png" className="toc-goto"/>
+              <a href={`#${category[TAG]}`}> 
+                <h5>{category[LABEL]} <i className="material-icons">chevron_right</i></h5>
               </a>
             </div>
             {
               products[category[LABEL]].map(product => (
-                <div className='toc-content'>
+                <div>
                   { product.name }
                 </div>
               ))
             }
           </div>
-        </td></tr>
-      ))
-    }  
-    </tbody>
-  </table>
+        ))
+      }
+    </div>
+  </section>
 )
 
 
 const Vademecum = (categories, products, prices) => {
-  console.log(prices);
   return categories.map((categoryName, i) => (
     <div key={i}>
       {
-        Category(categoryName, products[categoryName[LABEL]])
+        Category(categoryName, products[categoryName[LABEL]], prices)
       }
     </div>
   ))

lib/vademecum.js

@@ -54,11 +54,9 @@ var CONFIG = _defineProperty({
   prices: false
 });
 
-console.log("prof-b", CONFIG["prof-b"]);
-
 var Tag = function Tag(label, key, className) {
-  return dom("span", {
-    className: "tag ".concat(className || ''),
+  return dom("div", {
+    className: "chip ".concat(className || ''),
     key: key
   }, label);
 };
@@ -69,64 +67,76 @@ var Section = function Section(title, paragraph, prepend) {
   }, dom("h4", {
     className: "section-name"
   }, title), dom("p", {
-    className: "section-body"
+    className: "section-body",
+    lang: "es"
   }, prepend, paragraph));
 };
 
 var Product = function Product(product, key) {
   return dom("div", {
     className: "product-container"
-  }, dom("h3", {
+  }, dom("div", {
+    className: "row valign-wrapper"
+  }, dom("div", {
+    class: "col s2"
+  }, dom("img", {
+    src: "images/_img/".concat(product.img || product.variants[0].img, ".png"),
+    className: "responsive-img"
+  })), dom("div", {
+    class: "col s10"
+  }, dom("h4", {
     className: "product-name"
   }, product.name), dom("div", {
     className: "product-body"
   }, dom("p", {
-    className: "product-short-desc"
-  }, product.shortDesc), Section('Descripción', product.fullDesc), product.application && Section('Aplicación', product.application), product.actives && Section('Activos', product.actives.join(', '), product.ph && Tag("PH ".concat(product.ph), null, 'is-ph'))));
+    className: "product-short-desc",
+    lang: "es"
+  }, product.shortDesc)))), dom("div", null, Section('Descripción', product.fullDesc), product.application && Section('Aplicación', product.application), product.actives && Section('', product.actives.map(function (p) {
+    return Tag(p);
+  }), product.ph && Tag("PH ".concat(product.ph), null, 'is-ph'))), dom("div", {
+    className: "divider"
+  }));
 };
 
-var Category = function Category(category, products) {
-  return dom("table", {
-    className: "category-container table is-fullwidth"
-  }, dom("thead", {
-    className: "category",
-    id: category[TAG]
-  }, dom("tr", null, dom("th", null, dom("h2", {
+var Category = function Category(category, products, prices) {
+  return dom("section", {
+    id: category[TAG],
+    className: "container"
+  }, dom("h2", {
     className: "category-name"
-  }, category[LABEL])))), dom("tbody", null, products.map(function (p, i) {
-    return dom("tr", null, dom("td", null, Product(p, i)));
-  })), dom("tfoot", null, dom("tr", null, dom("td", null, dom("div", {
-    class: "footer-space",
-    height: "20px"
-  }, "\xA0")))));
+  }, category[LABEL]), dom("div", {
+    className: "collection"
+  }, products.map(function (p, i) {
+    return dom("div", {
+      className: "collection-item"
+    }, Product(p, i));
+  })));
 };
 
 var ToC = function ToC(categories, products) {
-  return dom("table", {
-    className: "toc-table table is-fullwidth"
-  }, dom("thead", null, dom("tr", null, dom("th", null, dom("h2", null, "Indice")))), dom("tbody", null, categories.map(function (category, i) {
-    return dom("tr", null, dom("td", null, dom("div", {
-      className: "toc-section"
-    }, dom("div", null, dom("a", {
-      href: "#".concat(category[TAG]),
-      className: "toc-title"
-    }, category[LABEL], dom("img", {
-      src: "images/arrow.png",
-      className: "toc-goto"
-    }))), products[category[LABEL]].map(function (product) {
-      return dom("div", {
-        className: "toc-content"
-      }, product.name);
-    }))));
+  return dom("section", {
+    id: "eba-toc",
+    className: "container"
+  }, dom("h2", {
+    className: "pagebreak"
+  }, "Indice"), dom("div", {
+    class: "col s8"
+  }, categories.map(function (category, i) {
+    return dom("div", null, dom("div", null, dom("a", {
+      href: "#".concat(category[TAG])
+    }, dom("h5", null, category[LABEL], " ", dom("i", {
+      className: "material-icons"
+    }, "chevron_right")))), products[category[LABEL]].map(function (product) {
+      return dom("div", null, product.name);
+    }));
   })));
 };
 
 var Vademecum = function Vademecum(categories, products, prices) {
-  console.log(prices);
   return categories.map(function (categoryName, i) {
     return dom("div", {
       key: i
-    }, Category(categoryName, products[categoryName[LABEL]]));
+    }, Category(categoryName, products[categoryName[LABEL]], prices));
   });
 };
 
@@ -145,7 +155,7 @@ function (_React$Component) {
     _classCallCheck(this, VademecumData);
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(VademecumData).call(this, props));
-    var config = CONFIG["prof-b"];
+    var config = CONFIG["prof-a"];
     _this.state = {
       config: config,
       categories: config.categories,

pdf-maker.js

@@ -7,7 +7,9 @@ const puppeteer = require('puppeteer');
   //await page.emulateMedia('screen');
   await page.pdf({
       path: 'pdf/vademecum-profesional-mobile.pdf',
-      height: '1450',
+      // height: '1450',
+      height: 640,
+      printBackground: true,
     });
     // displayHeaderFooter 
   await browser.close();