Gu\u00eda de Perfiles de Tueste - Arte del Caf\u00e9<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --coffee-light: #D4A574;\r\n --coffee-medium: #8B6F47;\r\n --coffee-dark: #3E2723;\r\n --coffee-accent: #6F4E37;\r\n --bg-light: #FFF8F0;\r\n --text-dark: #2C1810;\r\n --gradient-bg: linear-gradient(135deg, #FFF8F0 0%, #F5E6D3 100%);\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: var(--gradient-bg);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Header *\/\r\n .header {\r\n background: linear-gradient(135deg, var(--coffee-dark) 0%, var(--coffee-medium) 100%);\r\n color: white;\r\n padding: 2rem 0;\r\n box-shadow: 0 4px 20px rgba(0,0,0,0.2);\r\n }\r\n\r\n .header-content {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 2rem;\r\n }\r\n\r\n .header h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 0.5rem;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\r\n }\r\n\r\n .header p {\r\n font-size: 1.2rem;\r\n opacity: 0.95;\r\n }\r\n\r\n \/* Navigation *\/\r\n .nav {\r\n background: white;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n\r\n .nav-content {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 2rem;\r\n display: flex;\r\n gap: 2rem;\r\n }\r\n\r\n .nav a {\r\n display: block;\r\n padding: 1rem 0;\r\n color: var(--coffee-dark);\r\n text-decoration: none;\r\n font-weight: 600;\r\n border-bottom: 3px solid transparent;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav a:hover, .nav a.active {\r\n color: var(--coffee-accent);\r\n border-bottom-color: var(--coffee-accent);\r\n }\r\n\r\n \/* Main Container *\/\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 3rem 2rem;\r\n }\r\n\r\n \/* Intro Section *\/\r\n .intro {\r\n background: white;\r\n padding: 3rem;\r\n border-radius: 20px;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.1);\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .intro h2 {\r\n color: var(--coffee-dark);\r\n font-size: 2rem;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .intro p {\r\n font-size: 1.1rem;\r\n color: #555;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n \/* Roast Profiles Grid *\/\r\n .profiles-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\r\n gap: 2rem;\r\n margin-bottom: 4rem;\r\n }\r\n\r\n .profile-card {\r\n background: white;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.15);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n cursor: pointer;\r\n }\r\n\r\n .profile-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 50px rgba(0,0,0,0.25);\r\n }\r\n\r\n .profile-header {\r\n padding: 2rem;\r\n color: white;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .profile-header::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n opacity: 0.1;\r\n background-image: \r\n repeating-linear-gradient(45deg, transparent, transparent 10px, white 10px, white 20px);\r\n }\r\n\r\n .profile-header h3 {\r\n font-size: 1.8rem;\r\n margin-bottom: 0.5rem;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .profile-header .temp {\r\n font-size: 1.3rem;\r\n opacity: 0.95;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .light-roast {\r\n background: linear-gradient(135deg, #D4A574 0%, #C19A6B 100%);\r\n }\r\n\r\n .medium-roast {\r\n background: linear-gradient(135deg, #8B6F47 0%, #6F4E37 100%);\r\n }\r\n\r\n .dark-roast {\r\n background: linear-gradient(135deg, #3E2723 0%, #2C1810 100%);\r\n }\r\n\r\n .profile-content {\r\n padding: 2rem;\r\n }\r\n\r\n .profile-content h4 {\r\n color: var(--coffee-dark);\r\n margin-bottom: 0.5rem;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .profile-content p {\r\n color: #666;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .characteristics {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.5rem;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .tag {\r\n background: var(--bg-light);\r\n padding: 0.5rem 1rem;\r\n border-radius: 20px;\r\n font-size: 0.9rem;\r\n color: var(--coffee-dark);\r\n border: 2px solid var(--coffee-light);\r\n }\r\n\r\n .btn-shop {\r\n display: inline-block;\r\n width: 100%;\r\n padding: 1rem;\r\n background: var(--coffee-accent);\r\n color: white;\r\n text-align: center;\r\n text-decoration: none;\r\n border-radius: 10px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 1rem;\r\n }\r\n\r\n .btn-shop:hover {\r\n background: var(--coffee-dark);\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* Interactive Curve Section *\/\r\n .curve-section {\r\n background: white;\r\n padding: 3rem;\r\n border-radius: 20px;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.1);\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .curve-section h2 {\r\n color: var(--coffee-dark);\r\n font-size: 2rem;\r\n margin-bottom: 2rem;\r\n text-align: center;\r\n }\r\n\r\n .curve-controls {\r\n display: flex;\r\n justify-content: center;\r\n gap: 1rem;\r\n margin-bottom: 2rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .curve-btn {\r\n padding: 0.8rem 1.5rem;\r\n border: 2px solid var(--coffee-medium);\r\n background: white;\r\n color: var(--coffee-dark);\r\n border-radius: 10px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .curve-btn:hover, .curve-btn.active {\r\n background: var(--coffee-medium);\r\n color: white;\r\n }\r\n\r\n .canvas-container {\r\n position: relative;\r\n margin: 2rem auto;\r\n max-width: 900px;\r\n background: #f8f8f8;\r\n border-radius: 15px;\r\n padding: 2rem;\r\n box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);\r\n }\r\n\r\n #roastCurve {\r\n display: block;\r\n max-width: 100%;\r\n height: auto;\r\n }\r\n\r\n .curve-info {\r\n background: var(--bg-light);\r\n padding: 1.5rem;\r\n border-radius: 10px;\r\n margin-top: 2rem;\r\n border-left: 4px solid var(--coffee-accent);\r\n }\r\n\r\n .curve-info h4 {\r\n color: var(--coffee-dark);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .curve-info ul {\r\n list-style-position: inside;\r\n color: #666;\r\n }\r\n\r\n .curve-info li {\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n \/* Comparison Table *\/\r\n .comparison {\r\n background: white;\r\n padding: 3rem;\r\n border-radius: 20px;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.1);\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .comparison h2 {\r\n color: var(--coffee-dark);\r\n font-size: 2rem;\r\n margin-bottom: 2rem;\r\n text-align: center;\r\n }\r\n\r\n .comparison-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n overflow: hidden;\r\n border-radius: 10px;\r\n }\r\n\r\n .comparison-table thead {\r\n background: var(--coffee-dark);\r\n color: white;\r\n }\r\n\r\n .comparison-table th,\r\n .comparison-table td {\r\n padding: 1.2rem;\r\n text-align: left;\r\n border-bottom: 1px solid #eee;\r\n }\r\n\r\n .comparison-table tbody tr:hover {\r\n background: var(--bg-light);\r\n }\r\n\r\n .comparison-table tbody tr:last-child td {\r\n border-bottom: none;\r\n }\r\n\r\n \/* Video Section *\/\r\n .video-section {\r\n background: white;\r\n padding: 3rem;\r\n border-radius: 20px;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.1);\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .video-section h2 {\r\n color: var(--coffee-dark);\r\n font-size: 2rem;\r\n margin-bottom: 2rem;\r\n text-align: center;\r\n }\r\n\r\n .video-container {\r\n position: relative;\r\n padding-bottom: 56.25%;\r\n height: 0;\r\n overflow: hidden;\r\n border-radius: 15px;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.2);\r\n }\r\n\r\n .video-container iframe {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n \/* Footer *\/\r\n .footer {\r\n background: var(--coffee-dark);\r\n color: white;\r\n text-align: center;\r\n padding: 2rem;\r\n margin-top: 4rem;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 768px) {\r\n .header h1 {\r\n font-size: 2rem;\r\n }\r\n\r\n .profiles-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .nav-content {\r\n flex-direction: column;\r\n gap: 0;\r\n }\r\n\r\n .nav a {\r\n padding: 0.8rem 0;\r\n }\r\n\r\n .comparison-table {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .comparison-table th,\r\n .comparison-table td {\r\n padding: 0.8rem;\r\n }\r\n }\r\n\r\n \/* Loading animation *\/\r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .fade-in {\r\n animation: fadeIn 0.6s ease-out;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div class=\"header\">\r\n <div class=\"header-content\">\r\n <h1>\u2615 Gu\u00eda de Perfiles de Tueste<\/h1>\r\n <p>Descubre el arte y la ciencia detr\u00e1s del tostado del caf\u00e9<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <nav class=\"nav\">\r\n <div class=\"nav-content\">\r\n <a href=\"#perfiles\" class=\"active\">Perfiles<\/a>\r\n <a href=\"#curvas\">Curvas de Tueste<\/a>\r\n <a href=\"#comparacion\">Comparaci\u00f3n<\/a>\r\n <a href=\"#video\">Aprende M\u00e1s<\/a>\r\n <a href=\"tienda.html\">\ud83d\uded2 Ir a la Tienda<\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <div class=\"container\">\r\n \r\n <section class=\"intro fade-in\">\r\n <h2>El Arte del Tostado<\/h2>\r\n <p>\r\n El tostado del caf\u00e9 es un proceso complejo donde los granos verdes se transforman a trav\u00e9s del calor,\r\n desarrollando los sabores, aromas y caracter\u00edsticas que amamos. La temperatura, el tiempo y la curva\r\n de calor determinan el perfil final de cada caf\u00e9.\r\n <\/p>\r\n <p>\r\n Cada nivel de tueste revela diferentes cualidades del grano: desde los sabores brillantes y afrutados\r\n del tueste suave, hasta los tonos profundos y ahumados del tueste oscuro.\r\n <\/p>\r\n <\/section>\r\n\r\n \r\n <section id=\"perfiles\" class=\"fade-in\">\r\n <div class=\"profiles-grid\">\r\n \r\n <div class=\"profile-card\">\r\n <div class=\"profile-header light-roast\">\r\n <h3>\ud83c\udf3e Tueste Suave<\/h3>\r\n <p class=\"temp\">195\u00b0C - 205\u00b0C<\/p>\r\n <\/div>\r\n <div class=\"profile-content\">\r\n <h4>Caracter\u00edsticas<\/h4>\r\n <p>\r\n El tueste suave preserva los sabores originales del origen del caf\u00e9. Los granos mantienen\r\n un color canela claro y no presentan aceites en la superficie.\r\n <\/p>\r\n \r\n <h4>Perfil de Sabor<\/h4>\r\n <div class=\"characteristics\">\r\n <span class=\"tag\">Afrutado<\/span>\r\n <span class=\"tag\">Floral<\/span>\r\n <span class=\"tag\">Acidez Alta<\/span>\r\n <span class=\"tag\">Cuerpo Ligero<\/span>\r\n <span class=\"tag\">Dulzura Natural<\/span>\r\n <\/div>\r\n\r\n <h4>Ideal Para<\/h4>\r\n <p>\r\n M\u00e9todos de preparaci\u00f3n que resaltan la complejidad: V60, Chemex, AeroPress.\r\n Perfecto para caf\u00e9s de origen \u00fanico.\r\n <\/p>\r\n\r\n <a href=\"tienda.html?filter_tueste=suave\" class=\"btn-shop\">\r\n Ver Caf\u00e9s de Tueste Suave\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"profile-card\">\r\n <div class=\"profile-header medium-roast\">\r\n <h3>\ud83c\udf30 Tueste Medio<\/h3>\r\n <p class=\"temp\">210\u00b0C - 220\u00b0C<\/p>\r\n <\/div>\r\n <div class=\"profile-content\">\r\n <h4>Caracter\u00edsticas<\/h4>\r\n <p>\r\n El equilibrio perfecto entre origen y tostado. Color marr\u00f3n medio, sin aceites visibles,\r\n ofreciendo lo mejor de ambos mundos.\r\n <\/p>\r\n \r\n <h4>Perfil de Sabor<\/h4>\r\n <div class=\"characteristics\">\r\n <span class=\"tag\">Balanceado<\/span>\r\n <span class=\"tag\">Caramelo<\/span>\r\n <span class=\"tag\">Nueces<\/span>\r\n <span class=\"tag\">Acidez Media<\/span>\r\n <span class=\"tag\">Cuerpo Medio<\/span>\r\n <\/div>\r\n\r\n <h4>Ideal Para<\/h4>\r\n <p>\r\n El m\u00e1s vers\u00e1til. Excelente para prensa francesa, cafetera italiana, filtrado.\r\n Perfecto para el d\u00eda a d\u00eda.\r\n <\/p>\r\n\r\n <a href=\"tienda.html?filter_tueste=medio\" class=\"btn-shop\">\r\n Ver Caf\u00e9s de Tueste Medio\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"profile-card\">\r\n <div class=\"profile-header dark-roast\">\r\n <h3>\ud83d\udd25 Tueste Fuerte<\/h3>\r\n <p class=\"temp\">225\u00b0C - 240\u00b0C<\/p>\r\n <\/div>\r\n <div class=\"profile-content\">\r\n <h4>Caracter\u00edsticas<\/h4>\r\n <p>\r\n Tostado prolongado que desarrolla sabores intensos. Color oscuro, superficie brillante\r\n por los aceites naturales del caf\u00e9.\r\n <\/p>\r\n \r\n <h4>Perfil de Sabor<\/h4>\r\n <div class=\"characteristics\">\r\n <span class=\"tag\">Chocolate<\/span>\r\n <span class=\"tag\">Ahumado<\/span>\r\n <span class=\"tag\">Especiado<\/span>\r\n <span class=\"tag\">Acidez Baja<\/span>\r\n <span class=\"tag\">Cuerpo Completo<\/span>\r\n <\/div>\r\n\r\n <h4>Ideal Para<\/h4>\r\n <p>\r\n Espresso, caf\u00e9 con leche, capuchino. Ideal para quienes prefieren sabores\r\n intensos y robustos.\r\n <\/p>\r\n\r\n <a href=\"tienda.html?filter_tueste=fuerte\" class=\"btn-shop\">\r\n Ver Caf\u00e9s de Tueste Fuerte\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"curvas\" class=\"curve-section fade-in\">\r\n <h2>Curvas de Tueste Interactivas<\/h2>\r\n <p style=\"text-align: center; color: #666; margin-bottom: 2rem;\">\r\n Visualiza c\u00f3mo evoluciona la temperatura durante cada perfil de tueste\r\n <\/p>\r\n\r\n <div class=\"curve-controls\">\r\n <button class=\"curve-btn active\" onclick=\"showCurve('suave')\">Tueste Suave<\/button>\r\n <button class=\"curve-btn\" onclick=\"showCurve('medio')\">Tueste Medio<\/button>\r\n <button class=\"curve-btn\" onclick=\"showCurve('fuerte')\">Tueste Fuerte<\/button>\r\n <button class=\"curve-btn\" onclick=\"showCurve('todos')\">Comparar Todos<\/button>\r\n <\/div>\r\n\r\n <div class=\"canvas-container\">\r\n <canvas id=\"roastCurve\" width=\"900\" height=\"500\"><\/canvas>\r\n <\/div>\r\n\r\n <div class=\"curve-info\" id=\"curveInfo\">\r\n <h4>Tueste Suave<\/h4>\r\n <ul>\r\n <li><strong>Tiempo total:<\/strong> 10-12 minutos<\/li>\r\n <li><strong>Primera grieta:<\/strong> 8-9 minutos a 196\u00b0C<\/li>\r\n <li><strong>Temperatura final:<\/strong> 200-205\u00b0C<\/li>\r\n <li><strong>RoR (Rate of Rise):<\/strong> Descenso gradual hasta 5-8\u00b0C\/min<\/li>\r\n <li><strong>Desarrollo:<\/strong> 15-20% del tiempo total despu\u00e9s de primera grieta<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"comparacion\" class=\"comparison fade-in\">\r\n <h2>Tabla Comparativa de Tuestes<\/h2>\r\n <table class=\"comparison-table\">\r\n <thead>\r\n <tr>\r\n <th>Caracter\u00edstica<\/th>\r\n <th>Tueste Suave<\/th>\r\n <th>Tueste Medio<\/th>\r\n <th>Tueste Fuerte<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td><strong>Color del Grano<\/strong><\/td>\r\n <td>Canela claro<\/td>\r\n <td>Marr\u00f3n medio<\/td>\r\n <td>Marr\u00f3n oscuro\/Negro<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><strong>Superficie<\/strong><\/td>\r\n <td>Seca, mate<\/td>\r\n <td>Seca, ligeramente brillante<\/td>\r\n <td>Brillante, aceitosa<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><strong>Acidez<\/strong><\/td>\r\n <td>Alta, brillante<\/td>\r\n <td>Media, equilibrada<\/td>\r\n <td>Baja, suave<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><strong>Cuerpo<\/strong><\/td>\r\n <td>Ligero<\/td>\r\n <td>Medio<\/td>\r\n <td>Completo, pesado<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><strong>Cafe\u00edna<\/strong><\/td>\r\n <td>Mayor contenido<\/td>\r\n <td>Contenido medio<\/td>\r\n <td>Menor contenido<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><strong>Sabores Principales<\/strong><\/td>\r\n <td>Florales, frutales, c\u00edtricos<\/td>\r\n <td>Caramelo, nueces, chocolate<\/td>\r\n <td>Chocolate oscuro, ahumado, especias<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><strong>Origen<\/strong><\/td>\r\n <td>Muy perceptible<\/td>\r\n <td>Moderadamente perceptible<\/td>\r\n <td>Enmascarado por el tueste<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><strong>M\u00e9todos Ideales<\/strong><\/td>\r\n <td>Pour-over, filtrado<\/td>\r\n <td>Cualquier m\u00e9todo<\/td>\r\n <td>Espresso, prensa francesa<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/section>\r\n\r\n \r\n <section id=\"video\" class=\"video-section fade-in\">\r\n <h2>Aprende el Proceso de Tostado<\/h2>\r\n <p style=\"text-align: center; color: #666; margin-bottom: 2rem;\">\r\n Video educativo sobre el proceso de tostado del caf\u00e9\r\n <\/p>\r\n <div class=\"video-container\">\r\n \r\n <iframe \r\n src=\"https:\/\/www.youtube.com\/embed\/OsJkwRfilm0\" \r\n frameborder=\"0\" \r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \r\n allowfullscreen>\r\n <\/iframe>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer\">\r\n <p>© 2024 Arte del Caf\u00e9. Todos los derechos reservados.<\/p>\r\n <p>Explora, aprende y disfruta el mejor caf\u00e9 artesanal<\/p>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Canvas setup\r\n const canvas = document.getElementById('roastCurve');\r\n const ctx = canvas.getContext('2d');\r\n\r\n \/\/ Roast curve data\r\n const roastData = {\r\n suave: {\r\n name: 'Tueste Suave',\r\n color: '#D4A574',\r\n points: [\r\n {time: 0, temp: 20},\r\n {time: 1, temp: 80},\r\n {time: 2, temp: 120},\r\n {time: 3, temp: 145},\r\n {time: 4, temp: 165},\r\n {time: 5, temp: 178},\r\n {time: 6, temp: 186},\r\n {time: 7, temp: 192},\r\n {time: 8, temp: 196}, \/\/ Primera grieta\r\n {time: 9, temp: 200},\r\n {time: 10, temp: 203},\r\n {time: 11, temp: 205}\r\n ],\r\n info: `\r\n <h4>Tueste Suave<\/h4>\r\n <ul>\r\n <li><strong>Tiempo total:<\/strong> 10-12 minutos<\/li>\r\n <li><strong>Primera grieta:<\/strong> 8-9 minutos a 196\u00b0C<\/li>\r\n <li><strong>Temperatura final:<\/strong> 200-205\u00b0C<\/li>\r\n <li><strong>RoR (Rate of Rise):<\/strong> Descenso gradual hasta 5-8\u00b0C\/min<\/li>\r\n <li><strong>Desarrollo:<\/strong> 15-20% del tiempo total despu\u00e9s de primera grieta<\/li>\r\n <\/ul>\r\n `\r\n },\r\n medio: {\r\n name: 'Tueste Medio',\r\n color: '#8B6F47',\r\n points: [\r\n {time: 0, temp: 20},\r\n {time: 1, temp: 85},\r\n {time: 2, temp: 125},\r\n {time: 3, temp: 150},\r\n {time: 4, temp: 170},\r\n {time: 5, temp: 182},\r\n {time: 6, temp: 190},\r\n {time: 7, temp: 196},\r\n {time: 8, temp: 201}, \/\/ Primera grieta\r\n {time: 9, temp: 207},\r\n {time: 10, temp: 212},\r\n {time: 11, temp: 216},\r\n {time: 12, temp: 220}\r\n ],\r\n info: `\r\n <h4>Tueste Medio<\/h4>\r\n <ul>\r\n <li><strong>Tiempo total:<\/strong> 12-14 minutos<\/li>\r\n <li><strong>Primera grieta:<\/strong> 8-9 minutos a 196\u00b0C<\/li>\r\n <li><strong>Temperatura final:<\/strong> 215-220\u00b0C<\/li>\r\n <li><strong>RoR (Rate of Rise):<\/strong> Estable entre 6-10\u00b0C\/min<\/li>\r\n <li><strong>Desarrollo:<\/strong> 20-25% del tiempo total<\/li>\r\n <\/ul>\r\n `\r\n },\r\n fuerte: {\r\n name: 'Tueste Fuerte',\r\n color: '#3E2723',\r\n points: [\r\n {time: 0, temp: 20},\r\n {time: 1, temp: 90},\r\n {time: 2, temp: 130},\r\n {time: 3, temp: 155},\r\n {time: 4, temp: 175},\r\n {time: 5, temp: 186},\r\n {time: 6, temp: 194},\r\n {time: 7, temp: 200},\r\n {time: 8, temp: 206}, \/\/ Primera grieta\r\n {time: 9, temp: 213},\r\n {time: 10, temp: 219},\r\n {time: 11, temp: 224},\r\n {time: 12, temp: 228},\r\n {time: 13, temp: 232}, \/\/ Segunda grieta\r\n {time: 14, temp: 236},\r\n {time: 15, temp: 240}\r\n ],\r\n info: `\r\n <h4>Tueste Fuerte<\/h4>\r\n <ul>\r\n <li><strong>Tiempo total:<\/strong> 14-16 minutos<\/li>\r\n <li><strong>Primera grieta:<\/strong> 8-9 minutos a 196\u00b0C<\/li>\r\n <li><strong>Segunda grieta:<\/strong> 13-14 minutos a 232\u00b0C<\/li>\r\n <li><strong>Temperatura final:<\/strong> 235-240\u00b0C<\/li>\r\n <li><strong>RoR (Rate of Rise):<\/strong> M\u00e1s agresivo 8-12\u00b0C\/min<\/li>\r\n <li><strong>Desarrollo:<\/strong> 25-30% del tiempo total<\/li>\r\n <\/ul>\r\n `\r\n }\r\n };\r\n\r\n function drawCurve(roastTypes) {\r\n \/\/ Clear canvas\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n \/\/ Settings\r\n const padding = 60;\r\n const chartWidth = canvas.width - 2 * padding;\r\n const chartHeight = canvas.height - 2 * padding;\r\n\r\n \/\/ Draw grid\r\n ctx.strokeStyle = '#e0e0e0';\r\n ctx.lineWidth = 1;\r\n\r\n \/\/ Horizontal grid lines\r\n for (let i = 0; i <= 12; i++) {\r\n const y = padding + (chartHeight \/ 12) * i;\r\n ctx.beginPath();\r\n ctx.moveTo(padding, y);\r\n ctx.lineTo(canvas.width - padding, y);\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ Vertical grid lines\r\n for (let i = 0; i <= 16; i++) {\r\n const x = padding + (chartWidth \/ 16) * i;\r\n ctx.beginPath();\r\n ctx.moveTo(x, padding);\r\n ctx.lineTo(x, canvas.height - padding);\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ Draw axes\r\n ctx.strokeStyle = '#333';\r\n ctx.lineWidth = 2;\r\n ctx.beginPath();\r\n ctx.moveTo(padding, padding);\r\n ctx.lineTo(padding, canvas.height - padding);\r\n ctx.lineTo(canvas.width - padding, canvas.height - padding);\r\n ctx.stroke();\r\n\r\n \/\/ Y-axis labels (temperature)\r\n ctx.fillStyle = '#333';\r\n ctx.font = '12px Arial';\r\n ctx.textAlign = 'right';\r\n for (let i = 0; i <= 12; i++) {\r\n const temp = 240 - (i * 20);\r\n const y = padding + (chartHeight \/ 12) * i;\r\n ctx.fillText(temp + '\u00b0C', padding - 10, y + 4);\r\n }\r\n\r\n \/\/ X-axis labels (time)\r\n ctx.textAlign = 'center';\r\n for (let i = 0; i <= 16; i++) {\r\n const x = padding + (chartWidth \/ 16) * i;\r\n ctx.fillText(i + ' min', x, canvas.height - padding + 20);\r\n }\r\n\r\n \/\/ Axis titles\r\n ctx.save();\r\n ctx.translate(20, canvas.height \/ 2);\r\n ctx.rotate(-Math.PI \/ 2);\r\n ctx.textAlign = 'center';\r\n ctx.font = 'bold 14px Arial';\r\n ctx.fillText('Temperatura (\u00b0C)', 0, 0);\r\n ctx.restore();\r\n\r\n ctx.textAlign = 'center';\r\n ctx.font = 'bold 14px Arial';\r\n ctx.fillText('Tiempo (minutos)', canvas.width \/ 2, canvas.height - 10);\r\n\r\n \/\/ Draw curves\r\n roastTypes.forEach(type => {\r\n const data = roastData[type];\r\n ctx.strokeStyle = data.color;\r\n ctx.lineWidth = 3;\r\n ctx.beginPath();\r\n\r\n data.points.forEach((point, index) => {\r\n const x = padding + (point.time \/ 16) * chartWidth;\r\n const y = canvas.height - padding - ((point.temp \/ 240) * chartHeight);\r\n\r\n if (index === 0) {\r\n ctx.moveTo(x, y);\r\n } else {\r\n ctx.lineTo(x, y);\r\n }\r\n });\r\n\r\n ctx.stroke();\r\n\r\n \/\/ Draw points\r\n ctx.fillStyle = data.color;\r\n data.points.forEach(point => {\r\n const x = padding + (point.time \/ 16) * chartWidth;\r\n const y = canvas.height - padding - ((point.temp \/ 240) * chartHeight);\r\n ctx.beginPath();\r\n ctx.arc(x, y, 4, 0, 2 * Math.PI);\r\n ctx.fill();\r\n });\r\n });\r\n\r\n \/\/ Draw legend\r\n const legendX = canvas.width - padding - 150;\r\n const legendY = padding + 20;\r\n \r\n roastTypes.forEach((type, index) => {\r\n const data = roastData[type];\r\n const y = legendY + (index * 25);\r\n\r\n \/\/ Color box\r\n ctx.fillStyle = data.color;\r\n ctx.fillRect(legendX, y - 10, 20, 15);\r\n\r\n \/\/ Text\r\n ctx.fillStyle = '#333';\r\n ctx.textAlign = 'left';\r\n ctx.font = '13px Arial';\r\n ctx.fillText(data.name, legendX + 30, y);\r\n });\r\n\r\n \/\/ Mark critical points\r\n if (roastTypes.length === 1) {\r\n const data = roastData[roastTypes[0]];\r\n \r\n \/\/ Primera grieta\r\n const firstCrack = data.points.find(p => p.temp >= 196);\r\n if (firstCrack) {\r\n const x = padding + (firstCrack.time \/ 16) * chartWidth;\r\n const y = canvas.height - padding - ((firstCrack.temp \/ 240) * chartHeight);\r\n \r\n ctx.strokeStyle = '#ff6b6b';\r\n ctx.lineWidth = 2;\r\n ctx.setLineDash([5, 5]);\r\n ctx.beginPath();\r\n ctx.moveTo(x, y);\r\n ctx.lineTo(x, canvas.height - padding);\r\n ctx.stroke();\r\n ctx.setLineDash([]);\r\n \r\n ctx.fillStyle = '#ff6b6b';\r\n ctx.font = 'bold 11px Arial';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('1\u00aa Grieta', x, canvas.height - padding + 35);\r\n }\r\n\r\n \/\/ Segunda grieta (solo para tueste fuerte)\r\n if (roastTypes[0] === 'fuerte') {\r\n const secondCrack = data.points.find(p => p.temp >= 232);\r\n if (secondCrack) {\r\n const x = padding + (secondCrack.time \/ 16) * chartWidth;\r\n const y = canvas.height - padding - ((secondCrack.temp \/ 240) * chartHeight);\r\n \r\n ctx.strokeStyle = '#ff6b6b';\r\n ctx.lineWidth = 2;\r\n ctx.setLineDash([5, 5]);\r\n ctx.beginPath();\r\n ctx.moveTo(x, y);\r\n ctx.lineTo(x, canvas.height - padding);\r\n ctx.stroke();\r\n ctx.setLineDash([]);\r\n \r\n ctx.fillStyle = '#ff6b6b';\r\n ctx.font = 'bold 11px Arial';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('2\u00aa Grieta', x, canvas.height - padding + 50);\r\n }\r\n }\r\n }\r\n }\r\n\r\n function showCurve(type) {\r\n \/\/ Update button states\r\n document.querySelectorAll('.curve-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n });\r\n event.target.classList.add('active');\r\n\r\n \/\/ Draw curve\r\n if (type === 'todos') {\r\n drawCurve(['suave', 'medio', 'fuerte']);\r\n document.getElementById('curveInfo').innerHTML = `\r\n <h4>Comparaci\u00f3n de Todos los Tuestes<\/h4>\r\n <ul>\r\n <li><strong>Tueste Suave:<\/strong> Curva m\u00e1s corta y suave, finalizando antes de la segunda grieta<\/li>\r\n <li><strong>Tueste Medio:<\/strong> Desarrollo equilibrado entre las dos grietas<\/li>\r\n <li><strong>Tueste Fuerte:<\/strong> Curva extendida que alcanza o supera la segunda grieta<\/li>\r\n <li><strong>Diferencia clave:<\/strong> El tiempo de desarrollo despu\u00e9s de la primera grieta define el perfil<\/li>\r\n <\/ul>\r\n `;\r\n } else {\r\n drawCurve([type]);\r\n document.getElementById('curveInfo').innerHTML = roastData[type].info;\r\n }\r\n }\r\n\r\n \/\/ Initialize with light roast\r\n drawCurve(['suave']);\r\n\r\n \/\/ Smooth scroll for navigation\r\n document.querySelectorAll('.nav a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function (e) {\r\n e.preventDefault();\r\n const target = document.querySelector(this.getAttribute('href'));\r\n if (target) {\r\n target.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'start'\r\n });\r\n }\r\n });\r\n });\r\n\r\n \/\/ Fade in animation on scroll\r\n const observerOptions = {\r\n threshold: 0.1,\r\n rootMargin: '0px 0px -50px 0px'\r\n };\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('fade-in');\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n document.querySelectorAll('.profile-card, .curve-section, .comparison, .video-section').forEach(el => {\r\n observer.observe(el);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Gu\u00eda de Perfiles de Tueste – Arte del Caf\u00e9 \u2615 Gu\u00eda de Perfiles de Tueste Descubre el arte y la ciencia detr\u00e1s del tostado del caf\u00e9 Perfiles Curvas de Tueste Comparaci\u00f3n Aprende M\u00e1s \ud83d\uded2 Ir a la Tienda El Arte del Tostado El tostado del caf\u00e9 es un proceso complejo donde los granos verdes se […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-363","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Tueste - Cafe Arte<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cafearte.art\/home\/tueste\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tueste - Cafe Arte\" \/>\n<meta property=\"og:description\" content=\"Gu\u00eda de Perfiles de Tueste – Arte del Caf\u00e9 \u2615 Gu\u00eda de Perfiles de Tueste Descubre el arte y la ciencia detr\u00e1s del tostado del caf\u00e9 Perfiles Curvas de Tueste Comparaci\u00f3n Aprende M\u00e1s \ud83d\uded2 Ir a la Tienda El Arte del Tostado El tostado del caf\u00e9 es un proceso complejo donde los granos verdes se […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cafearte.art\/home\/tueste\/\" \/>\n<meta property=\"og:site_name\" content=\"Cafe Arte\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-18T23:49:09+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo estimado de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/tueste\\\/\",\"url\":\"https:\\\/\\\/cafearte.art\\\/home\\\/tueste\\\/\",\"name\":\"Tueste - Cafe Arte\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#website\"},\"datePublished\":\"2026-04-18T23:48:20+00:00\",\"dateModified\":\"2026-04-18T23:49:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/tueste\\\/#breadcrumb\"},\"inLanguage\":\"es-CL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cafearte.art\\\/home\\\/tueste\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/tueste\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/cafearte.art\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tueste\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#website\",\"url\":\"https:\\\/\\\/cafearte.art\\\/home\\\/\",\"name\":\"Cafe Arte\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cafearte.art\\\/home\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-CL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#organization\",\"name\":\"Cafe Arte\",\"url\":\"https:\\\/\\\/cafearte.art\\\/home\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-CL\",\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cafearte.art\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/cropped-LOGO.png\",\"contentUrl\":\"https:\\\/\\\/cafearte.art\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/cropped-LOGO.png\",\"width\":512,\"height\":512,\"caption\":\"Cafe Arte\"},\"image\":{\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/cafe.arte396\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Tueste - Cafe Arte","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cafearte.art\/home\/tueste\/","og_locale":"es_ES","og_type":"article","og_title":"Tueste - Cafe Arte","og_description":"Gu\u00eda de Perfiles de Tueste – Arte del Caf\u00e9 \u2615 Gu\u00eda de Perfiles de Tueste Descubre el arte y la ciencia detr\u00e1s del tostado del caf\u00e9 Perfiles Curvas de Tueste Comparaci\u00f3n Aprende M\u00e1s \ud83d\uded2 Ir a la Tienda El Arte del Tostado El tostado del caf\u00e9 es un proceso complejo donde los granos verdes se […]","og_url":"https:\/\/cafearte.art\/home\/tueste\/","og_site_name":"Cafe Arte","article_modified_time":"2026-04-18T23:49:09+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo estimado de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/cafearte.art\/home\/tueste\/","url":"https:\/\/cafearte.art\/home\/tueste\/","name":"Tueste - Cafe Arte","isPartOf":{"@id":"https:\/\/cafearte.art\/home\/#website"},"datePublished":"2026-04-18T23:48:20+00:00","dateModified":"2026-04-18T23:49:09+00:00","breadcrumb":{"@id":"https:\/\/cafearte.art\/home\/tueste\/#breadcrumb"},"inLanguage":"es-CL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cafearte.art\/home\/tueste\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cafearte.art\/home\/tueste\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/cafearte.art\/home\/"},{"@type":"ListItem","position":2,"name":"Tueste"}]},{"@type":"WebSite","@id":"https:\/\/cafearte.art\/home\/#website","url":"https:\/\/cafearte.art\/home\/","name":"Cafe Arte","description":"","publisher":{"@id":"https:\/\/cafearte.art\/home\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cafearte.art\/home\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-CL"},{"@type":"Organization","@id":"https:\/\/cafearte.art\/home\/#organization","name":"Cafe Arte","url":"https:\/\/cafearte.art\/home\/","logo":{"@type":"ImageObject","inLanguage":"es-CL","@id":"https:\/\/cafearte.art\/home\/#\/schema\/logo\/image\/","url":"https:\/\/cafearte.art\/wp-content\/uploads\/2026\/04\/cropped-LOGO.png","contentUrl":"https:\/\/cafearte.art\/wp-content\/uploads\/2026\/04\/cropped-LOGO.png","width":512,"height":512,"caption":"Cafe Arte"},"image":{"@id":"https:\/\/cafearte.art\/home\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/cafe.arte396\/"]}]}},"_links":{"self":[{"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/pages\/363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/comments?post=363"}],"version-history":[{"count":4,"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/pages\/363\/revisions"}],"predecessor-version":[{"id":368,"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/pages\/363\/revisions\/368"}],"wp:attachment":[{"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/media?parent=363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Gu\u00eda de Perfiles de Tueste - Arte del Caf\u00e9<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --coffee-light: #D4A574;\r\n --coffee-medium: #8B6F47;\r\n --coffee-dark: #3E2723;\r\n --coffee-accent: #6F4E37;\r\n --bg-light: #FFF8F0;\r\n --text-dark: #2C1810;\r\n --gradient-bg: linear-gradient(135deg, #FFF8F0 0%, #F5E6D3 100%);\r\n }\r\n\r\n body {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n background: var(--gradient-bg);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Header *\/\r\n .header {\r\n background: linear-gradient(135deg, var(--coffee-dark) 0%, var(--coffee-medium) 100%);\r\n color: white;\r\n padding: 2rem 0;\r\n box-shadow: 0 4px 20px rgba(0,0,0,0.2);\r\n }\r\n\r\n .header-content {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 2rem;\r\n }\r\n\r\n .header h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 0.5rem;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\r\n }\r\n\r\n .header p {\r\n font-size: 1.2rem;\r\n opacity: 0.95;\r\n }\r\n\r\n \/* Navigation *\/\r\n .nav {\r\n background: white;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.1);\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n }\r\n\r\n .nav-content {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 2rem;\r\n display: flex;\r\n gap: 2rem;\r\n }\r\n\r\n .nav a {\r\n display: block;\r\n padding: 1rem 0;\r\n color: var(--coffee-dark);\r\n text-decoration: none;\r\n font-weight: 600;\r\n border-bottom: 3px solid transparent;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav a:hover, .nav a.active {\r\n color: var(--coffee-accent);\r\n border-bottom-color: var(--coffee-accent);\r\n }\r\n\r\n \/* Main Container *\/\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 3rem 2rem;\r\n }\r\n\r\n \/* Intro Section *\/\r\n .intro {\r\n background: white;\r\n padding: 3rem;\r\n border-radius: 20px;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.1);\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .intro h2 {\r\n color: var(--coffee-dark);\r\n font-size: 2rem;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .intro p {\r\n font-size: 1.1rem;\r\n color: #555;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n \/* Roast Profiles Grid *\/\r\n .profiles-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\r\n gap: 2rem;\r\n margin-bottom: 4rem;\r\n }\r\n\r\n .profile-card {\r\n background: white;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.15);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n cursor: pointer;\r\n }\r\n\r\n .profile-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 50px rgba(0,0,0,0.25);\r\n }\r\n\r\n .profile-header {\r\n padding: 2rem;\r\n color: white;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .profile-header::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n opacity: 0.1;\r\n background-image: \r\n repeating-linear-gradient(45deg, transparent, transparent 10px, white 10px, white 20px);\r\n }\r\n\r\n .profile-header h3 {\r\n font-size: 1.8rem;\r\n margin-bottom: 0.5rem;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .profile-header .temp {\r\n font-size: 1.3rem;\r\n opacity: 0.95;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .light-roast {\r\n background: linear-gradient(135deg, #D4A574 0%, #C19A6B 100%);\r\n }\r\n\r\n .medium-roast {\r\n background: linear-gradient(135deg, #8B6F47 0%, #6F4E37 100%);\r\n }\r\n\r\n .dark-roast {\r\n background: linear-gradient(135deg, #3E2723 0%, #2C1810 100%);\r\n }\r\n\r\n .profile-content {\r\n padding: 2rem;\r\n }\r\n\r\n .profile-content h4 {\r\n color: var(--coffee-dark);\r\n margin-bottom: 0.5rem;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .profile-content p {\r\n color: #666;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .characteristics {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.5rem;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .tag {\r\n background: var(--bg-light);\r\n padding: 0.5rem 1rem;\r\n border-radius: 20px;\r\n font-size: 0.9rem;\r\n color: var(--coffee-dark);\r\n border: 2px solid var(--coffee-light);\r\n }\r\n\r\n .btn-shop {\r\n display: inline-block;\r\n width: 100%;\r\n padding: 1rem;\r\n background: var(--coffee-accent);\r\n color: white;\r\n text-align: center;\r\n text-decoration: none;\r\n border-radius: 10px;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 1rem;\r\n }\r\n\r\n .btn-shop:hover {\r\n background: var(--coffee-dark);\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* Interactive Curve Section *\/\r\n .curve-section {\r\n background: white;\r\n padding: 3rem;\r\n border-radius: 20px;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.1);\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .curve-section h2 {\r\n color: var(--coffee-dark);\r\n font-size: 2rem;\r\n margin-bottom: 2rem;\r\n text-align: center;\r\n }\r\n\r\n .curve-controls {\r\n display: flex;\r\n justify-content: center;\r\n gap: 1rem;\r\n margin-bottom: 2rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .curve-btn {\r\n padding: 0.8rem 1.5rem;\r\n border: 2px solid var(--coffee-medium);\r\n background: white;\r\n color: var(--coffee-dark);\r\n border-radius: 10px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .curve-btn:hover, .curve-btn.active {\r\n background: var(--coffee-medium);\r\n color: white;\r\n }\r\n\r\n .canvas-container {\r\n position: relative;\r\n margin: 2rem auto;\r\n max-width: 900px;\r\n background: #f8f8f8;\r\n border-radius: 15px;\r\n padding: 2rem;\r\n box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);\r\n }\r\n\r\n #roastCurve {\r\n display: block;\r\n max-width: 100%;\r\n height: auto;\r\n }\r\n\r\n .curve-info {\r\n background: var(--bg-light);\r\n padding: 1.5rem;\r\n border-radius: 10px;\r\n margin-top: 2rem;\r\n border-left: 4px solid var(--coffee-accent);\r\n }\r\n\r\n .curve-info h4 {\r\n color: var(--coffee-dark);\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .curve-info ul {\r\n list-style-position: inside;\r\n color: #666;\r\n }\r\n\r\n .curve-info li {\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n \/* Comparison Table *\/\r\n .comparison {\r\n background: white;\r\n padding: 3rem;\r\n border-radius: 20px;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.1);\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .comparison h2 {\r\n color: var(--coffee-dark);\r\n font-size: 2rem;\r\n margin-bottom: 2rem;\r\n text-align: center;\r\n }\r\n\r\n .comparison-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n overflow: hidden;\r\n border-radius: 10px;\r\n }\r\n\r\n .comparison-table thead {\r\n background: var(--coffee-dark);\r\n color: white;\r\n }\r\n\r\n .comparison-table th,\r\n .comparison-table td {\r\n padding: 1.2rem;\r\n text-align: left;\r\n border-bottom: 1px solid #eee;\r\n }\r\n\r\n .comparison-table tbody tr:hover {\r\n background: var(--bg-light);\r\n }\r\n\r\n .comparison-table tbody tr:last-child td {\r\n border-bottom: none;\r\n }\r\n\r\n \/* Video Section *\/\r\n .video-section {\r\n background: white;\r\n padding: 3rem;\r\n border-radius: 20px;\r\n box-shadow: 0 10px 40px rgba(0,0,0,0.1);\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .video-section h2 {\r\n color: var(--coffee-dark);\r\n font-size: 2rem;\r\n margin-bottom: 2rem;\r\n text-align: center;\r\n }\r\n\r\n .video-container {\r\n position: relative;\r\n padding-bottom: 56.25%;\r\n height: 0;\r\n overflow: hidden;\r\n border-radius: 15px;\r\n box-shadow: 0 5px 20px rgba(0,0,0,0.2);\r\n }\r\n\r\n .video-container iframe {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n \/* Footer *\/\r\n .footer {\r\n background: var(--coffee-dark);\r\n color: white;\r\n text-align: center;\r\n padding: 2rem;\r\n margin-top: 4rem;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 768px) {\r\n .header h1 {\r\n font-size: 2rem;\r\n }\r\n\r\n .profiles-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .nav-content {\r\n flex-direction: column;\r\n gap: 0;\r\n }\r\n\r\n .nav a {\r\n padding: 0.8rem 0;\r\n }\r\n\r\n .comparison-table {\r\n font-size: 0.9rem;\r\n }\r\n\r\n .comparison-table th,\r\n .comparison-table td {\r\n padding: 0.8rem;\r\n }\r\n }\r\n\r\n \/* Loading animation *\/\r\n @keyframes fadeIn {\r\n from {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n .fade-in {\r\n animation: fadeIn 0.6s ease-out;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n \r\n <div class=\"header\">\r\n <div class=\"header-content\">\r\n <h1>\u2615 Gu\u00eda de Perfiles de Tueste<\/h1>\r\n <p>Descubre el arte y la ciencia detr\u00e1s del tostado del caf\u00e9<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <nav class=\"nav\">\r\n <div class=\"nav-content\">\r\n <a href=\"#perfiles\" class=\"active\">Perfiles<\/a>\r\n <a href=\"#curvas\">Curvas de Tueste<\/a>\r\n <a href=\"#comparacion\">Comparaci\u00f3n<\/a>\r\n <a href=\"#video\">Aprende M\u00e1s<\/a>\r\n <a href=\"tienda.html\">\ud83d\uded2 Ir a la Tienda<\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <div class=\"container\">\r\n \r\n <section class=\"intro fade-in\">\r\n <h2>El Arte del Tostado<\/h2>\r\n <p>\r\n El tostado del caf\u00e9 es un proceso complejo donde los granos verdes se transforman a trav\u00e9s del calor,\r\n desarrollando los sabores, aromas y caracter\u00edsticas que amamos. La temperatura, el tiempo y la curva\r\n de calor determinan el perfil final de cada caf\u00e9.\r\n <\/p>\r\n <p>\r\n Cada nivel de tueste revela diferentes cualidades del grano: desde los sabores brillantes y afrutados\r\n del tueste suave, hasta los tonos profundos y ahumados del tueste oscuro.\r\n <\/p>\r\n <\/section>\r\n\r\n \r\n <section id=\"perfiles\" class=\"fade-in\">\r\n <div class=\"profiles-grid\">\r\n \r\n <div class=\"profile-card\">\r\n <div class=\"profile-header light-roast\">\r\n <h3>\ud83c\udf3e Tueste Suave<\/h3>\r\n <p class=\"temp\">195\u00b0C - 205\u00b0C<\/p>\r\n <\/div>\r\n <div class=\"profile-content\">\r\n <h4>Caracter\u00edsticas<\/h4>\r\n <p>\r\n El tueste suave preserva los sabores originales del origen del caf\u00e9. Los granos mantienen\r\n un color canela claro y no presentan aceites en la superficie.\r\n <\/p>\r\n \r\n <h4>Perfil de Sabor<\/h4>\r\n <div class=\"characteristics\">\r\n <span class=\"tag\">Afrutado<\/span>\r\n <span class=\"tag\">Floral<\/span>\r\n <span class=\"tag\">Acidez Alta<\/span>\r\n <span class=\"tag\">Cuerpo Ligero<\/span>\r\n <span class=\"tag\">Dulzura Natural<\/span>\r\n <\/div>\r\n\r\n <h4>Ideal Para<\/h4>\r\n <p>\r\n M\u00e9todos de preparaci\u00f3n que resaltan la complejidad: V60, Chemex, AeroPress.\r\n Perfecto para caf\u00e9s de origen \u00fanico.\r\n <\/p>\r\n\r\n <a href=\"tienda.html?filter_tueste=suave\" class=\"btn-shop\">\r\n Ver Caf\u00e9s de Tueste Suave\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"profile-card\">\r\n <div class=\"profile-header medium-roast\">\r\n <h3>\ud83c\udf30 Tueste Medio<\/h3>\r\n <p class=\"temp\">210\u00b0C - 220\u00b0C<\/p>\r\n <\/div>\r\n <div class=\"profile-content\">\r\n <h4>Caracter\u00edsticas<\/h4>\r\n <p>\r\n El equilibrio perfecto entre origen y tostado. Color marr\u00f3n medio, sin aceites visibles,\r\n ofreciendo lo mejor de ambos mundos.\r\n <\/p>\r\n \r\n <h4>Perfil de Sabor<\/h4>\r\n <div class=\"characteristics\">\r\n <span class=\"tag\">Balanceado<\/span>\r\n <span class=\"tag\">Caramelo<\/span>\r\n <span class=\"tag\">Nueces<\/span>\r\n <span class=\"tag\">Acidez Media<\/span>\r\n <span class=\"tag\">Cuerpo Medio<\/span>\r\n <\/div>\r\n\r\n <h4>Ideal Para<\/h4>\r\n <p>\r\n El m\u00e1s vers\u00e1til. Excelente para prensa francesa, cafetera italiana, filtrado.\r\n Perfecto para el d\u00eda a d\u00eda.\r\n <\/p>\r\n\r\n <a href=\"tienda.html?filter_tueste=medio\" class=\"btn-shop\">\r\n Ver Caf\u00e9s de Tueste Medio\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"profile-card\">\r\n <div class=\"profile-header dark-roast\">\r\n <h3>\ud83d\udd25 Tueste Fuerte<\/h3>\r\n <p class=\"temp\">225\u00b0C - 240\u00b0C<\/p>\r\n <\/div>\r\n <div class=\"profile-content\">\r\n <h4>Caracter\u00edsticas<\/h4>\r\n <p>\r\n Tostado prolongado que desarrolla sabores intensos. Color oscuro, superficie brillante\r\n por los aceites naturales del caf\u00e9.\r\n <\/p>\r\n \r\n <h4>Perfil de Sabor<\/h4>\r\n <div class=\"characteristics\">\r\n <span class=\"tag\">Chocolate<\/span>\r\n <span class=\"tag\">Ahumado<\/span>\r\n <span class=\"tag\">Especiado<\/span>\r\n <span class=\"tag\">Acidez Baja<\/span>\r\n <span class=\"tag\">Cuerpo Completo<\/span>\r\n <\/div>\r\n\r\n <h4>Ideal Para<\/h4>\r\n <p>\r\n Espresso, caf\u00e9 con leche, capuchino. Ideal para quienes prefieren sabores\r\n intensos y robustos.\r\n <\/p>\r\n\r\n <a href=\"tienda.html?filter_tueste=fuerte\" class=\"btn-shop\">\r\n Ver Caf\u00e9s de Tueste Fuerte\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"curvas\" class=\"curve-section fade-in\">\r\n <h2>Curvas de Tueste Interactivas<\/h2>\r\n <p style=\"text-align: center; color: #666; margin-bottom: 2rem;\">\r\n Visualiza c\u00f3mo evoluciona la temperatura durante cada perfil de tueste\r\n <\/p>\r\n\r\n <div class=\"curve-controls\">\r\n <button class=\"curve-btn active\" onclick=\"showCurve('suave')\">Tueste Suave<\/button>\r\n <button class=\"curve-btn\" onclick=\"showCurve('medio')\">Tueste Medio<\/button>\r\n <button class=\"curve-btn\" onclick=\"showCurve('fuerte')\">Tueste Fuerte<\/button>\r\n <button class=\"curve-btn\" onclick=\"showCurve('todos')\">Comparar Todos<\/button>\r\n <\/div>\r\n\r\n <div class=\"canvas-container\">\r\n <canvas id=\"roastCurve\" width=\"900\" height=\"500\"><\/canvas>\r\n <\/div>\r\n\r\n <div class=\"curve-info\" id=\"curveInfo\">\r\n <h4>Tueste Suave<\/h4>\r\n <ul>\r\n <li><strong>Tiempo total:<\/strong> 10-12 minutos<\/li>\r\n <li><strong>Primera grieta:<\/strong> 8-9 minutos a 196\u00b0C<\/li>\r\n <li><strong>Temperatura final:<\/strong> 200-205\u00b0C<\/li>\r\n <li><strong>RoR (Rate of Rise):<\/strong> Descenso gradual hasta 5-8\u00b0C\/min<\/li>\r\n <li><strong>Desarrollo:<\/strong> 15-20% del tiempo total despu\u00e9s de primera grieta<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"comparacion\" class=\"comparison fade-in\">\r\n <h2>Tabla Comparativa de Tuestes<\/h2>\r\n <table class=\"comparison-table\">\r\n <thead>\r\n <tr>\r\n <th>Caracter\u00edstica<\/th>\r\n <th>Tueste Suave<\/th>\r\n <th>Tueste Medio<\/th>\r\n <th>Tueste Fuerte<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td><strong>Color del Grano<\/strong><\/td>\r\n <td>Canela claro<\/td>\r\n <td>Marr\u00f3n medio<\/td>\r\n <td>Marr\u00f3n oscuro\/Negro<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><strong>Superficie<\/strong><\/td>\r\n <td>Seca, mate<\/td>\r\n <td>Seca, ligeramente brillante<\/td>\r\n <td>Brillante, aceitosa<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><strong>Acidez<\/strong><\/td>\r\n <td>Alta, brillante<\/td>\r\n <td>Media, equilibrada<\/td>\r\n <td>Baja, suave<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><strong>Cuerpo<\/strong><\/td>\r\n <td>Ligero<\/td>\r\n <td>Medio<\/td>\r\n <td>Completo, pesado<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><strong>Cafe\u00edna<\/strong><\/td>\r\n <td>Mayor contenido<\/td>\r\n <td>Contenido medio<\/td>\r\n <td>Menor contenido<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><strong>Sabores Principales<\/strong><\/td>\r\n <td>Florales, frutales, c\u00edtricos<\/td>\r\n <td>Caramelo, nueces, chocolate<\/td>\r\n <td>Chocolate oscuro, ahumado, especias<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><strong>Origen<\/strong><\/td>\r\n <td>Muy perceptible<\/td>\r\n <td>Moderadamente perceptible<\/td>\r\n <td>Enmascarado por el tueste<\/td>\r\n <\/tr>\r\n <tr>\r\n <td><strong>M\u00e9todos Ideales<\/strong><\/td>\r\n <td>Pour-over, filtrado<\/td>\r\n <td>Cualquier m\u00e9todo<\/td>\r\n <td>Espresso, prensa francesa<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n <\/section>\r\n\r\n \r\n <section id=\"video\" class=\"video-section fade-in\">\r\n <h2>Aprende el Proceso de Tostado<\/h2>\r\n <p style=\"text-align: center; color: #666; margin-bottom: 2rem;\">\r\n Video educativo sobre el proceso de tostado del caf\u00e9\r\n <\/p>\r\n <div class=\"video-container\">\r\n \r\n <iframe \r\n src=\"https:\/\/www.youtube.com\/embed\/OsJkwRfilm0\" \r\n frameborder=\"0\" \r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \r\n allowfullscreen>\r\n <\/iframe>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n \r\n <div class=\"footer\">\r\n <p>© 2024 Arte del Caf\u00e9. Todos los derechos reservados.<\/p>\r\n <p>Explora, aprende y disfruta el mejor caf\u00e9 artesanal<\/p>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Canvas setup\r\n const canvas = document.getElementById('roastCurve');\r\n const ctx = canvas.getContext('2d');\r\n\r\n \/\/ Roast curve data\r\n const roastData = {\r\n suave: {\r\n name: 'Tueste Suave',\r\n color: '#D4A574',\r\n points: [\r\n {time: 0, temp: 20},\r\n {time: 1, temp: 80},\r\n {time: 2, temp: 120},\r\n {time: 3, temp: 145},\r\n {time: 4, temp: 165},\r\n {time: 5, temp: 178},\r\n {time: 6, temp: 186},\r\n {time: 7, temp: 192},\r\n {time: 8, temp: 196}, \/\/ Primera grieta\r\n {time: 9, temp: 200},\r\n {time: 10, temp: 203},\r\n {time: 11, temp: 205}\r\n ],\r\n info: `\r\n <h4>Tueste Suave<\/h4>\r\n <ul>\r\n <li><strong>Tiempo total:<\/strong> 10-12 minutos<\/li>\r\n <li><strong>Primera grieta:<\/strong> 8-9 minutos a 196\u00b0C<\/li>\r\n <li><strong>Temperatura final:<\/strong> 200-205\u00b0C<\/li>\r\n <li><strong>RoR (Rate of Rise):<\/strong> Descenso gradual hasta 5-8\u00b0C\/min<\/li>\r\n <li><strong>Desarrollo:<\/strong> 15-20% del tiempo total despu\u00e9s de primera grieta<\/li>\r\n <\/ul>\r\n `\r\n },\r\n medio: {\r\n name: 'Tueste Medio',\r\n color: '#8B6F47',\r\n points: [\r\n {time: 0, temp: 20},\r\n {time: 1, temp: 85},\r\n {time: 2, temp: 125},\r\n {time: 3, temp: 150},\r\n {time: 4, temp: 170},\r\n {time: 5, temp: 182},\r\n {time: 6, temp: 190},\r\n {time: 7, temp: 196},\r\n {time: 8, temp: 201}, \/\/ Primera grieta\r\n {time: 9, temp: 207},\r\n {time: 10, temp: 212},\r\n {time: 11, temp: 216},\r\n {time: 12, temp: 220}\r\n ],\r\n info: `\r\n <h4>Tueste Medio<\/h4>\r\n <ul>\r\n <li><strong>Tiempo total:<\/strong> 12-14 minutos<\/li>\r\n <li><strong>Primera grieta:<\/strong> 8-9 minutos a 196\u00b0C<\/li>\r\n <li><strong>Temperatura final:<\/strong> 215-220\u00b0C<\/li>\r\n <li><strong>RoR (Rate of Rise):<\/strong> Estable entre 6-10\u00b0C\/min<\/li>\r\n <li><strong>Desarrollo:<\/strong> 20-25% del tiempo total<\/li>\r\n <\/ul>\r\n `\r\n },\r\n fuerte: {\r\n name: 'Tueste Fuerte',\r\n color: '#3E2723',\r\n points: [\r\n {time: 0, temp: 20},\r\n {time: 1, temp: 90},\r\n {time: 2, temp: 130},\r\n {time: 3, temp: 155},\r\n {time: 4, temp: 175},\r\n {time: 5, temp: 186},\r\n {time: 6, temp: 194},\r\n {time: 7, temp: 200},\r\n {time: 8, temp: 206}, \/\/ Primera grieta\r\n {time: 9, temp: 213},\r\n {time: 10, temp: 219},\r\n {time: 11, temp: 224},\r\n {time: 12, temp: 228},\r\n {time: 13, temp: 232}, \/\/ Segunda grieta\r\n {time: 14, temp: 236},\r\n {time: 15, temp: 240}\r\n ],\r\n info: `\r\n <h4>Tueste Fuerte<\/h4>\r\n <ul>\r\n <li><strong>Tiempo total:<\/strong> 14-16 minutos<\/li>\r\n <li><strong>Primera grieta:<\/strong> 8-9 minutos a 196\u00b0C<\/li>\r\n <li><strong>Segunda grieta:<\/strong> 13-14 minutos a 232\u00b0C<\/li>\r\n <li><strong>Temperatura final:<\/strong> 235-240\u00b0C<\/li>\r\n <li><strong>RoR (Rate of Rise):<\/strong> M\u00e1s agresivo 8-12\u00b0C\/min<\/li>\r\n <li><strong>Desarrollo:<\/strong> 25-30% del tiempo total<\/li>\r\n <\/ul>\r\n `\r\n }\r\n };\r\n\r\n function drawCurve(roastTypes) {\r\n \/\/ Clear canvas\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n \/\/ Settings\r\n const padding = 60;\r\n const chartWidth = canvas.width - 2 * padding;\r\n const chartHeight = canvas.height - 2 * padding;\r\n\r\n \/\/ Draw grid\r\n ctx.strokeStyle = '#e0e0e0';\r\n ctx.lineWidth = 1;\r\n\r\n \/\/ Horizontal grid lines\r\n for (let i = 0; i <= 12; i++) {\r\n const y = padding + (chartHeight \/ 12) * i;\r\n ctx.beginPath();\r\n ctx.moveTo(padding, y);\r\n ctx.lineTo(canvas.width - padding, y);\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ Vertical grid lines\r\n for (let i = 0; i <= 16; i++) {\r\n const x = padding + (chartWidth \/ 16) * i;\r\n ctx.beginPath();\r\n ctx.moveTo(x, padding);\r\n ctx.lineTo(x, canvas.height - padding);\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ Draw axes\r\n ctx.strokeStyle = '#333';\r\n ctx.lineWidth = 2;\r\n ctx.beginPath();\r\n ctx.moveTo(padding, padding);\r\n ctx.lineTo(padding, canvas.height - padding);\r\n ctx.lineTo(canvas.width - padding, canvas.height - padding);\r\n ctx.stroke();\r\n\r\n \/\/ Y-axis labels (temperature)\r\n ctx.fillStyle = '#333';\r\n ctx.font = '12px Arial';\r\n ctx.textAlign = 'right';\r\n for (let i = 0; i <= 12; i++) {\r\n const temp = 240 - (i * 20);\r\n const y = padding + (chartHeight \/ 12) * i;\r\n ctx.fillText(temp + '\u00b0C', padding - 10, y + 4);\r\n }\r\n\r\n \/\/ X-axis labels (time)\r\n ctx.textAlign = 'center';\r\n for (let i = 0; i <= 16; i++) {\r\n const x = padding + (chartWidth \/ 16) * i;\r\n ctx.fillText(i + ' min', x, canvas.height - padding + 20);\r\n }\r\n\r\n \/\/ Axis titles\r\n ctx.save();\r\n ctx.translate(20, canvas.height \/ 2);\r\n ctx.rotate(-Math.PI \/ 2);\r\n ctx.textAlign = 'center';\r\n ctx.font = 'bold 14px Arial';\r\n ctx.fillText('Temperatura (\u00b0C)', 0, 0);\r\n ctx.restore();\r\n\r\n ctx.textAlign = 'center';\r\n ctx.font = 'bold 14px Arial';\r\n ctx.fillText('Tiempo (minutos)', canvas.width \/ 2, canvas.height - 10);\r\n\r\n \/\/ Draw curves\r\n roastTypes.forEach(type => {\r\n const data = roastData[type];\r\n ctx.strokeStyle = data.color;\r\n ctx.lineWidth = 3;\r\n ctx.beginPath();\r\n\r\n data.points.forEach((point, index) => {\r\n const x = padding + (point.time \/ 16) * chartWidth;\r\n const y = canvas.height - padding - ((point.temp \/ 240) * chartHeight);\r\n\r\n if (index === 0) {\r\n ctx.moveTo(x, y);\r\n } else {\r\n ctx.lineTo(x, y);\r\n }\r\n });\r\n\r\n ctx.stroke();\r\n\r\n \/\/ Draw points\r\n ctx.fillStyle = data.color;\r\n data.points.forEach(point => {\r\n const x = padding + (point.time \/ 16) * chartWidth;\r\n const y = canvas.height - padding - ((point.temp \/ 240) * chartHeight);\r\n ctx.beginPath();\r\n ctx.arc(x, y, 4, 0, 2 * Math.PI);\r\n ctx.fill();\r\n });\r\n });\r\n\r\n \/\/ Draw legend\r\n const legendX = canvas.width - padding - 150;\r\n const legendY = padding + 20;\r\n \r\n roastTypes.forEach((type, index) => {\r\n const data = roastData[type];\r\n const y = legendY + (index * 25);\r\n\r\n \/\/ Color box\r\n ctx.fillStyle = data.color;\r\n ctx.fillRect(legendX, y - 10, 20, 15);\r\n\r\n \/\/ Text\r\n ctx.fillStyle = '#333';\r\n ctx.textAlign = 'left';\r\n ctx.font = '13px Arial';\r\n ctx.fillText(data.name, legendX + 30, y);\r\n });\r\n\r\n \/\/ Mark critical points\r\n if (roastTypes.length === 1) {\r\n const data = roastData[roastTypes[0]];\r\n \r\n \/\/ Primera grieta\r\n const firstCrack = data.points.find(p => p.temp >= 196);\r\n if (firstCrack) {\r\n const x = padding + (firstCrack.time \/ 16) * chartWidth;\r\n const y = canvas.height - padding - ((firstCrack.temp \/ 240) * chartHeight);\r\n \r\n ctx.strokeStyle = '#ff6b6b';\r\n ctx.lineWidth = 2;\r\n ctx.setLineDash([5, 5]);\r\n ctx.beginPath();\r\n ctx.moveTo(x, y);\r\n ctx.lineTo(x, canvas.height - padding);\r\n ctx.stroke();\r\n ctx.setLineDash([]);\r\n \r\n ctx.fillStyle = '#ff6b6b';\r\n ctx.font = 'bold 11px Arial';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('1\u00aa Grieta', x, canvas.height - padding + 35);\r\n }\r\n\r\n \/\/ Segunda grieta (solo para tueste fuerte)\r\n if (roastTypes[0] === 'fuerte') {\r\n const secondCrack = data.points.find(p => p.temp >= 232);\r\n if (secondCrack) {\r\n const x = padding + (secondCrack.time \/ 16) * chartWidth;\r\n const y = canvas.height - padding - ((secondCrack.temp \/ 240) * chartHeight);\r\n \r\n ctx.strokeStyle = '#ff6b6b';\r\n ctx.lineWidth = 2;\r\n ctx.setLineDash([5, 5]);\r\n ctx.beginPath();\r\n ctx.moveTo(x, y);\r\n ctx.lineTo(x, canvas.height - padding);\r\n ctx.stroke();\r\n ctx.setLineDash([]);\r\n \r\n ctx.fillStyle = '#ff6b6b';\r\n ctx.font = 'bold 11px Arial';\r\n ctx.textAlign = 'center';\r\n ctx.fillText('2\u00aa Grieta', x, canvas.height - padding + 50);\r\n }\r\n }\r\n }\r\n }\r\n\r\n function showCurve(type) {\r\n \/\/ Update button states\r\n document.querySelectorAll('.curve-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n });\r\n event.target.classList.add('active');\r\n\r\n \/\/ Draw curve\r\n if (type === 'todos') {\r\n drawCurve(['suave', 'medio', 'fuerte']);\r\n document.getElementById('curveInfo').innerHTML = `\r\n <h4>Comparaci\u00f3n de Todos los Tuestes<\/h4>\r\n <ul>\r\n <li><strong>Tueste Suave:<\/strong> Curva m\u00e1s corta y suave, finalizando antes de la segunda grieta<\/li>\r\n <li><strong>Tueste Medio:<\/strong> Desarrollo equilibrado entre las dos grietas<\/li>\r\n <li><strong>Tueste Fuerte:<\/strong> Curva extendida que alcanza o supera la segunda grieta<\/li>\r\n <li><strong>Diferencia clave:<\/strong> El tiempo de desarrollo despu\u00e9s de la primera grieta define el perfil<\/li>\r\n <\/ul>\r\n `;\r\n } else {\r\n drawCurve([type]);\r\n document.getElementById('curveInfo').innerHTML = roastData[type].info;\r\n }\r\n }\r\n\r\n \/\/ Initialize with light roast\r\n drawCurve(['suave']);\r\n\r\n \/\/ Smooth scroll for navigation\r\n document.querySelectorAll('.nav a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function (e) {\r\n e.preventDefault();\r\n const target = document.querySelector(this.getAttribute('href'));\r\n if (target) {\r\n target.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'start'\r\n });\r\n }\r\n });\r\n });\r\n\r\n \/\/ Fade in animation on scroll\r\n const observerOptions = {\r\n threshold: 0.1,\r\n rootMargin: '0px 0px -50px 0px'\r\n };\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('fade-in');\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n document.querySelectorAll('.profile-card, .curve-section, .comparison, .video-section').forEach(el => {\r\n observer.observe(el);\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Gu\u00eda de Perfiles de Tueste – Arte del Caf\u00e9 \u2615 Gu\u00eda de Perfiles de Tueste Descubre el arte y la ciencia detr\u00e1s del tostado del caf\u00e9 Perfiles Curvas de Tueste Comparaci\u00f3n Aprende M\u00e1s \ud83d\uded2 Ir a la Tienda El Arte del Tostado El tostado del caf\u00e9 es un proceso complejo donde los granos verdes se […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-363","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Tueste - Cafe Arte<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cafearte.art\/home\/tueste\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tueste - Cafe Arte\" \/>\n<meta property=\"og:description\" content=\"Gu\u00eda de Perfiles de Tueste – Arte del Caf\u00e9 \u2615 Gu\u00eda de Perfiles de Tueste Descubre el arte y la ciencia detr\u00e1s del tostado del caf\u00e9 Perfiles Curvas de Tueste Comparaci\u00f3n Aprende M\u00e1s \ud83d\uded2 Ir a la Tienda El Arte del Tostado El tostado del caf\u00e9 es un proceso complejo donde los granos verdes se […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cafearte.art\/home\/tueste\/\" \/>\n<meta property=\"og:site_name\" content=\"Cafe Arte\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-18T23:49:09+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tiempo estimado de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/tueste\\\/\",\"url\":\"https:\\\/\\\/cafearte.art\\\/home\\\/tueste\\\/\",\"name\":\"Tueste - Cafe Arte\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#website\"},\"datePublished\":\"2026-04-18T23:48:20+00:00\",\"dateModified\":\"2026-04-18T23:49:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/tueste\\\/#breadcrumb\"},\"inLanguage\":\"es-CL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/cafearte.art\\\/home\\\/tueste\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/tueste\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/cafearte.art\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tueste\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#website\",\"url\":\"https:\\\/\\\/cafearte.art\\\/home\\\/\",\"name\":\"Cafe Arte\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cafearte.art\\\/home\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es-CL\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#organization\",\"name\":\"Cafe Arte\",\"url\":\"https:\\\/\\\/cafearte.art\\\/home\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-CL\",\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cafearte.art\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/cropped-LOGO.png\",\"contentUrl\":\"https:\\\/\\\/cafearte.art\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/cropped-LOGO.png\",\"width\":512,\"height\":512,\"caption\":\"Cafe Arte\"},\"image\":{\"@id\":\"https:\\\/\\\/cafearte.art\\\/home\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/cafe.arte396\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Tueste - Cafe Arte","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cafearte.art\/home\/tueste\/","og_locale":"es_ES","og_type":"article","og_title":"Tueste - Cafe Arte","og_description":"Gu\u00eda de Perfiles de Tueste – Arte del Caf\u00e9 \u2615 Gu\u00eda de Perfiles de Tueste Descubre el arte y la ciencia detr\u00e1s del tostado del caf\u00e9 Perfiles Curvas de Tueste Comparaci\u00f3n Aprende M\u00e1s \ud83d\uded2 Ir a la Tienda El Arte del Tostado El tostado del caf\u00e9 es un proceso complejo donde los granos verdes se […]","og_url":"https:\/\/cafearte.art\/home\/tueste\/","og_site_name":"Cafe Arte","article_modified_time":"2026-04-18T23:49:09+00:00","twitter_card":"summary_large_image","twitter_misc":{"Tiempo estimado de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/cafearte.art\/home\/tueste\/","url":"https:\/\/cafearte.art\/home\/tueste\/","name":"Tueste - Cafe Arte","isPartOf":{"@id":"https:\/\/cafearte.art\/home\/#website"},"datePublished":"2026-04-18T23:48:20+00:00","dateModified":"2026-04-18T23:49:09+00:00","breadcrumb":{"@id":"https:\/\/cafearte.art\/home\/tueste\/#breadcrumb"},"inLanguage":"es-CL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cafearte.art\/home\/tueste\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/cafearte.art\/home\/tueste\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/cafearte.art\/home\/"},{"@type":"ListItem","position":2,"name":"Tueste"}]},{"@type":"WebSite","@id":"https:\/\/cafearte.art\/home\/#website","url":"https:\/\/cafearte.art\/home\/","name":"Cafe Arte","description":"","publisher":{"@id":"https:\/\/cafearte.art\/home\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cafearte.art\/home\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es-CL"},{"@type":"Organization","@id":"https:\/\/cafearte.art\/home\/#organization","name":"Cafe Arte","url":"https:\/\/cafearte.art\/home\/","logo":{"@type":"ImageObject","inLanguage":"es-CL","@id":"https:\/\/cafearte.art\/home\/#\/schema\/logo\/image\/","url":"https:\/\/cafearte.art\/wp-content\/uploads\/2026\/04\/cropped-LOGO.png","contentUrl":"https:\/\/cafearte.art\/wp-content\/uploads\/2026\/04\/cropped-LOGO.png","width":512,"height":512,"caption":"Cafe Arte"},"image":{"@id":"https:\/\/cafearte.art\/home\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/cafe.arte396\/"]}]}},"_links":{"self":[{"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/pages\/363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/comments?post=363"}],"version-history":[{"count":4,"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/pages\/363\/revisions"}],"predecessor-version":[{"id":368,"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/pages\/363\/revisions\/368"}],"wp:attachment":[{"href":"https:\/\/cafearte.art\/home\/wp-json\/wp\/v2\/media?parent=363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}