/**
 * Capa de datos (dataLayer) - Chocolate Corona
 *
 * Se apoya en window.CORONA_DL (impreso por /inc/datalayer.php) para conocer
 * la jerarquia del menu y los datos de cada producto/receta, y en delegacion
 * de eventos para no tener que tocar el marcado de las plantillas.
 *
 * Eventos: menu_principal, recetas, producto, filtro, formulario, Comprar, busqueda.
 */
(function () {
	'use strict';

	window.dataLayer = window.dataLayer || [];

	function ctx() {
		return window.CORONA_DL || {};
	}

	function norm(path) {
		path = (path || '').toLowerCase().replace(/\/+$/, '');
		return '' === path ? '/' : path;
	}

	function pathOf(url) {
		try {
			return norm(new URL(url, window.location.origin).pathname);
		} catch (e) {
			return '';
		}
	}

	function here() {
		return norm(window.location.pathname);
	}

	function sameUrl(a, b) {
		if (!a || !b) {
			return false;
		}
		return String(a).replace(/\/+$/, '') === String(b).replace(/\/+$/, '');
	}

	function text(el) {
		return el ? el.textContent.replace(/\s+/g, ' ').trim() : '';
	}

	function each(list, fn) {
		Array.prototype.forEach.call(list || [], fn);
	}

	function push(data) {
		data.url = here();
		window.dataLayer.push(data);

		if (ctx().debug) {
			console.log('[Corona dataLayer]', data);
		}
	}

	/* ------------------------------------------------------------------ */
	/* Producto y receta                                                   */
	/* ------------------------------------------------------------------ */

	function cardOf(link) {
		return link.closest('article') || link.parentElement;
	}

	function recetaFromDom(link) {
		var card = cardOf(link);

		if (!card) {
			return null;
		}

		var data = {
			type: 'receta',
			title: text(card.querySelector('h1, h2, h3')),
			descripcion: text(card.querySelector('.card-receta-desc')),
			duracion: '',
			porciones: ''
		};

		each(card.querySelectorAll('span'), function (span) {
			var value = text(span);
			var min = value.match(/(\d+)\s*min/i);

			if (min) {
				data.duracion = min[1] + 'min';
			} else if (/porcion/i.test(value)) {
				data.porciones = value;
			}
		});

		return data;
	}

	function productoFromDom(link) {
		var card = cardOf(link);

		if (!card) {
			return null;
		}

		var gramos = '';

		each(card.querySelectorAll('p, span'), function (el) {
			if (gramos) {
				return;
			}

			var match = text(el).match(/^\d+(?:[.,]\d+)?\s*g\b/i);

			if (match) {
				gramos = match[0];
			}
		});

		return {
			type: 'producto',
			title: text(card.querySelector('h1, h2, h3')),
			gramos: gramos
		};
	}

	/**
	 * Datos del producto/receta al que apunta un enlace. Primero el mapa que
	 * envia PHP (dato exacto de ACF); si no esta -por ejemplo las recetas que
	 * llegan por AJAX- se leen de la card.
	 */
	function itemFor(link) {
		var key = pathOf(link.href);
		var map = ctx().posts || {};

		if (map[key]) {
			return map[key];
		}

		if (/\/recetas\/[^/]+$/.test(key)) {
			return recetaFromDom(link);
		}

		if (/\/productos\/[^/]+$/.test(key)) {
			return productoFromDom(link);
		}

		return null;
	}

	/* ------------------------------------------------------------------ */
	/* Menu                                                                */
	/* ------------------------------------------------------------------ */

	function menuInfo(link) {
		var map = ctx().menu || {};
		var info = map[pathOf(link.href)];

		if (info) {
			return info;
		}

		var drop = link.closest('.dropdown-content, .mobile-dropdown-content');

		if (drop && drop.parentElement) {
			return {
				category: text(drop.parentElement.querySelector('.dropdown-btn, .mobile-dropdown-btn')),
				subcategory: text(link)
			};
		}

		var label = text(link);

		if (!label) {
			var img = link.querySelector('img');
			label = img ? (img.getAttribute('alt') || 'Logo') : '';
		}

		return { category: label, subcategory: '' };
	}

	/* ------------------------------------------------------------------ */
	/* Filtros                                                             */
	/* ------------------------------------------------------------------ */

	/**
	 * Estado de un grupo de filtros (un acordeon). `clicked` es el enlace que
	 * el usuario acaba de pulsar: se reporta el estado que quedara aplicado.
	 */
	function groupState(group, clicked) {
		var values = [];
		var slider = group.querySelector('input[type="range"]');

		if (slider) {
			values.push(text(group.querySelector('[id^="tooltipValor"]')));
		} else {
			each(group.querySelectorAll('.filtro-contenido a'), function (option) {
				var active = option.classList.contains('font-bold');

				if (option === clicked) {
					active = !active;
				}

				if (active) {
					values.push(text(option));
				}
			});
		}

		return {
			name: text(group.querySelector('h3')),
			value: values.filter(Boolean).join('|')
		};
	}

	function pushFiltro(panel, clicked, destino) {
		if (!panel) {
			return;
		}

		var data = { event: 'filtro' };

		each(panel.querySelectorAll('.filtro'), function (group, index) {
			var suffix = 0 === index ? '' : index + 1;
			var state = groupState(group, clicked);

			data['event_category' + suffix] = state.name;
			data['event_subcategory' + suffix] = state.value;
		});

		data.url_destino = destino;

		push(data);
	}

	/* ------------------------------------------------------------------ */
	/* Clics                                                               */
	/* ------------------------------------------------------------------ */

	document.addEventListener('click', function (event) {

		var target = event.target;

		if (!target || !target.closest) {
			return;
		}

		var link = target.closest('a[href]');

		// 7A - Resultado del buscador.
		if (link && link.closest('#search-results')) {
			push({
				event: 'busqueda',
				event_category: text(link.querySelector('p')) || text(link),
				url_destino: pathOf(link.href)
			});
			return;
		}

		// 4A - Opcion de filtro.
		var filterOption = target.closest('.filtro-contenido a');

		if (filterOption) {
			var filterGroup = filterOption.closest('.filtro');
			pushFiltro(filterGroup ? filterGroup.parentElement : null, filterOption, pathOf(filterOption.href));
			return;
		}

		if (!link) {
			return;
		}

		// 6A - Boton flotante "Comprar".
		if (sameUrl(link.href, ctx().comprarUrl) || link.matches('a.fixed[target="_blank"]')) {
			push({
				event: 'Comprar',
				event_label: text(link) || 'Comprar',
				url_destino: pathOf(link.href)
			});
			return;
		}

		// 1A - Menu principal (incluye el menu movil, que vive dentro del header).
		if (link.closest('header')) {
			var info = menuInfo(link);

			push({
				event: 'menu_principal',
				event_category: info.category,
				event_subcategory: info.subcategory || '',
				url_destino: pathOf(link.href)
			});
			return;
		}

		var item = itemFor(link);

		if (!item) {
			return;
		}

		// 3A - Producto.
		if ('producto' === item.type) {
			push({
				event: 'producto',
				event_category: item.title,
				event_subcategory: item.gramos || '',
				event_label: text(link),
				url_destino: pathOf(link.href)
			});
			return;
		}

		// 2A - Receta.
		if ('receta' === item.type) {
			push({
				event: 'recetas',
				event_category: item.title,
				event_subcategory: item.descripcion || '',
				duracion: item.duracion || '',
				porciones: item.porciones || '',
				url_destino: pathOf(link.href)
			});
		}

	}, true);

	/* 4A - Filtro de cantidad/tiempo (slider): dispara al soltar. */
	document.addEventListener('change', function (event) {

		var slider = event.target;

		if (!slider || !slider.matches || !slider.matches('.filtro input[type="range"]')) {
			return;
		}

		var group = slider.closest('.filtro');

		pushFiltro(group ? group.parentElement : null, null, here());

	}, true);

	/* ------------------------------------------------------------------ */
	/* 5A - Formulario PQRS                                                */
	/* ------------------------------------------------------------------ */

	/**
	 * El formulario de /contacto es un iframe de Salesforce
	 * (crmnutresa.my.salesforce-sites.com). Por politica de mismo origen la
	 * pagina NO puede saber si el envio fue exitoso.
	 *
	 * Este puente ya queda listo: en cuanto Salesforce publique el mensaje
	 * parent.postMessage({ event: 'formulario' }, '*') al confirmar el envio,
	 * el evento se dispara solo. Mientras tanto no se emite nada.
	 */
	window.addEventListener('message', function (event) {

		if (!/^https?:\/\/([a-z0-9-]+\.)*(salesforce-sites\.com|force\.com|salesforce\.com)$/i.test(String(event.origin))) {
			return;
		}

		var data = event.data;
		var name = 'string' === typeof data ? data : (data && (data.event || data.type));

		if (!name || !/formulario|form[_-]?(submit|success)|envio[_-]?exitoso/i.test(String(name))) {
			return;
		}

		push({
			event: 'formulario',
			event_label: 'Enviar',
			url_destino: here()
		});
	});

}());
<!doctype html>
<html lang="es-CO">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <title>Bebidas &#8211; Chocolate Corona</title>
<meta name='robots' content='max-image-preview:large' />
<link rel='dns-prefetch' href='//cdn.jsdelivr.net' />
<link rel="alternate" type="application/rss+xml" title="Chocolate Corona &raquo; Feed" href="https://www.chocolatecorona.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="Chocolate Corona &raquo; RSS de los comentarios" href="https://www.chocolatecorona.com/comments/feed/" />
<link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://www.chocolatecorona.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.chocolatecorona.com%2Fbebidas%2F" />
<link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://www.chocolatecorona.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fwww.chocolatecorona.com%2Fbebidas%2F&#038;format=xml" />
<style id="wp-img-auto-sizes-contain-inline-css">
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
</style>
<style id="wp-emoji-styles-inline-css">

	img.wp-smiley, img.emoji {
		display: inline !important;
		border: none !important;
		box-shadow: none !important;
		height: 1em !important;
		width: 1em !important;
		margin: 0 0.07em !important;
		vertical-align: -0.1em !important;
		background: none !important;
		padding: 0 !important;
	}
/*# sourceURL=wp-emoji-styles-inline-css */
</style>
<style id="wp-block-library-inline-css">
:root{--wp-block-synced-color:#7a00df;--wp-block-synced-color--rgb:122,0,223;--wp-bound-block-color:var(--wp-block-synced-color);--wp-editor-canvas-background:#ddd;--wp-admin-theme-color:#007cba;--wp-admin-theme-color--rgb:0,124,186;--wp-admin-theme-color-darker-10:#006ba1;--wp-admin-theme-color-darker-10--rgb:0,107,160.5;--wp-admin-theme-color-darker-20:#005a87;--wp-admin-theme-color-darker-20--rgb:0,90,135;--wp-admin-border-width-focus:2px}@media (min-resolution:192dpi){:root{--wp-admin-border-width-focus:1.5px}}.wp-element-button{cursor:pointer}:root .has-very-light-gray-background-color{background-color:#eee}:root .has-very-dark-gray-background-color{background-color:#313131}:root .has-very-light-gray-color{color:#eee}:root .has-very-dark-gray-color{color:#313131}:root .has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background{background:linear-gradient(135deg,#00d084,#0693e3)}:root .has-purple-crush-gradient-background{background:linear-gradient(135deg,#34e2e4,#4721fb 50%,#ab1dfe)}:root .has-hazy-dawn-gradient-background{background:linear-gradient(135deg,#faaca8,#dad0ec)}:root .has-subdued-olive-gradient-background{background:linear-gradient(135deg,#fafae1,#67a671)}:root .has-atomic-cream-gradient-background{background:linear-gradient(135deg,#fdd79a,#004a59)}:root .has-nightshade-gradient-background{background:linear-gradient(135deg,#330968,#31cdcf)}:root .has-midnight-gradient-background{background:linear-gradient(135deg,#020381,#2874fc)}:root{--wp--preset--font-size--normal:16px;--wp--preset--font-size--huge:42px}.has-regular-font-size{font-size:1em}.has-larger-font-size{font-size:2.625em}.has-normal-font-size{font-size:var(--wp--preset--font-size--normal)}.has-huge-font-size{font-size:var(--wp--preset--font-size--huge)}:root .has-text-align-center{text-align:center}:root .has-text-align-left{text-align:left}:root .has-text-align-right{text-align:right}.has-fit-text{white-space:nowrap!important}#end-resizable-editor-section{display:none}.aligncenter{clear:both}.items-justified-left{justify-content:flex-start}.items-justified-center{justify-content:center}.items-justified-right{justify-content:flex-end}.items-justified-space-between{justify-content:space-between}.screen-reader-text{word-wrap:normal!important;border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.screen-reader-text:focus{background-color:#ddd;clip-path:none;color:#444;display:block;font-size:1em;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}html :where(.has-border-color){border-style:solid}html :where([style*=border-color]){border-style:solid}html :where([style*=border-top-color]){border-top-style:solid}html :where([style*=border-right-color]){border-right-style:solid}html :where([style*=border-bottom-color]){border-bottom-style:solid}html :where([style*=border-left-color]){border-left-style:solid}html :where([style*=border-width]){border-style:solid}html :where([style*=border-top-width]){border-top-style:solid}html :where([style*=border-right-width]){border-right-style:solid}html :where([style*=border-bottom-width]){border-bottom-style:solid}html :where([style*=border-left-width]){border-left-style:solid}html :where(img[class*=wp-image-]){height:auto;max-width:100%}:where(figure){margin:0 0 1em}html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:var(--wp-admin--admin-bar--height,0px)}@media screen and (max-width:600px){html :where(.is-position-sticky){--wp-admin--admin-bar--position-offset:0px}}

/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */
</style>

<style id="global-styles-inline-css">
:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--background: #ffffff;--wp--preset--color--foreground: #404040;--wp--preset--color--primary: #b91c1c;--wp--preset--color--secondary: #15803d;--wp--preset--color--tertiary: #0369a1;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgb(6,147,227) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgb(252,185,0) 0%,rgb(255,105,0) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgb(255,105,0) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);}:root { --wp--style--global--content-size: 40rem;--wp--style--global--wide-size: 60rem; }:where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}body{padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}:root :where(.wp-element-button, .wp-block-button__link){background-color: #32373c;border-width: 0;color: #fff;font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;letter-spacing: inherit;line-height: inherit;padding-top: calc(0.667em + 2px);padding-right: calc(1.333em + 2px);padding-bottom: calc(0.667em + 2px);padding-left: calc(1.333em + 2px);text-decoration: none;text-transform: inherit;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-background-color{color: var(--wp--preset--color--background) !important;}.has-foreground-color{color: var(--wp--preset--color--foreground) !important;}.has-primary-color{color: var(--wp--preset--color--primary) !important;}.has-secondary-color{color: var(--wp--preset--color--secondary) !important;}.has-tertiary-color{color: var(--wp--preset--color--tertiary) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-background-background-color{background-color: var(--wp--preset--color--background) !important;}.has-foreground-background-color{background-color: var(--wp--preset--color--foreground) !important;}.has-primary-background-color{background-color: var(--wp--preset--color--primary) !important;}.has-secondary-background-color{background-color: var(--wp--preset--color--secondary) !important;}.has-tertiary-background-color{background-color: var(--wp--preset--color--tertiary) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-background-border-color{border-color: var(--wp--preset--color--background) !important;}.has-foreground-border-color{border-color: var(--wp--preset--color--foreground) !important;}.has-primary-border-color{border-color: var(--wp--preset--color--primary) !important;}.has-secondary-border-color{border-color: var(--wp--preset--color--secondary) !important;}.has-tertiary-border-color{border-color: var(--wp--preset--color--tertiary) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
/*# sourceURL=global-styles-inline-css */
</style>

<link rel='stylesheet' id='choclates-corona-style-css' href='https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/style.css?ver=0.1.0' media='all' />
<link rel='stylesheet' id='swiper-css-css' href='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css' media='all' />
<link rel="https://api.w.org/" href="https://www.chocolatecorona.com/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://www.chocolatecorona.com/wp-json/wp/v2/pages/179" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://www.chocolatecorona.com/xmlrpc.php?rsd" />
<meta name="generator" content="WordPress 7.0.4" />
<link rel="canonical" href="https://www.chocolatecorona.com/bebidas/" />
<link rel='shortlink' href='https://www.chocolatecorona.com/?p=179' />
    <script>
        var corona_ajax = {
            url: 'https://www.chocolatecorona.com/wp-admin/admin-ajax.php'
        };
    </script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link rel="icon" href="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/corona-favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/corona-favicon.png">
    <meta name="description" content="Descubre Chocolate Corona: productos, recetas y mezclas para preparar bebidas, postres y momentos para compartir con el sabor tradicional de siempre.">
    <meta name="keywords" content="chocolate corona, recetas con chocolate, chocolate colombiano, bebidas de chocolate, repostería, mezclas para tortas, cocoa">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-K66383B');</script>
<!-- End Google Tag Manager -->
</head>

<body class="wp-singular page-template page-template-page-bebidas page-template-page-bebidas-php page page-id-179 wp-embed-responsive wp-theme-choclates-coronatheme">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K66383B"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
    
    <div id="page">


<header class="relative overflow-visible min-h-40 z-30 pl-0 lg:pl-24">

    <div class="absolute inset-0 bg-[#F5C400] h-37"
        style="border-radius: 0 0 50% 50% / 0 0 40px 40px;"></div>

    <div class="relative max-w-7xl mx-auto px-6">

        <nav class="flex items-center justify-between lg:justify-center h-15 pt-18 relative">

            <!-- LUPA MOBILE -->
            <div class="lg:hidden flex items-center">
                <button class="search-trigger w-10 h-10 bg-green-700 rounded-full flex items-center justify-center">
                    <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            d="M21 21l-4.35-4.35M10 18a8 8 0 100-16 8 8 0 000 16z"/>
                    </svg>
                </button>
            </div>


            <!-- MENÚ IZQUIERDO       -->
                        <ul class="hidden lg:flex items-center gap-8 text-corona-secondary font-semibold">

                
                                        <!-- SIN DROPDOWN -->
                    <li>
                        <a href="/" 
                       class="block pb-2 text-[17px] hover:text-corona-secondary-semilight relative  ">
                            Home                        </a>
                    </li>
                    
                
                                        <!-- CON DROPDOWN -->
                    <li class="relative ">
                       <button class="cursor-pointer dropdown-btn flex items-center gap-2 pb-2 relative ">
                            Productos                            <svg class="dropdown-icon w-5 h-5 transition-transform duration-300"
                                fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                                <path d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>

                        <div class="dropdown-content absolute left-1/2 -translate-x-1/2 top-16
                                    bg-white rounded-2xl shadow-xl p-2 min-w-50 text-center hidden z-999">
                                                            <a href="/chocolate-de-mesa/" class="block py-3 text-[17px] hover:text-corona-secondary-semilight">
                                    Chocolate de mesa                                </a>
                                                            <a href="/reposteria" class="block py-3 text-[17px] hover:text-corona-secondary-semilight">
                                    Repostería                                </a>
                                                    </div>
                    </li>

                    
                
            </ul>
            
            <!-- LOGO -->
            <div class="absolute left-1/2 -translate-x-1/2 lg:static lg:translate-x-0 px-0 lg:px-10">
               <a href="/"><img class="lg:w-65 w-126  h-25 lg:h-auto" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/logo-corona.svg" alt="Logo Corona"></a> 
            </div>

            <!-- MENÚ DERECHO   -->
                        <ul class="hidden lg:flex gap-8 text-corona-secondary font-semibold items-center">

                
                                        <!-- CON DROPDOWN -->
                    <li class="relative ">
                        <button class="cursor-pointer dropdown-btn flex items-center gap-2 pb-2 relative ">
                            Recetas                            <svg class="dropdown-icon w-5 h-5 transition-transform duration-300"
                                fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                                <path d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>

                        <div class="dropdown-content absolute left-1/2 -translate-x-1/2 top-16
                                    bg-white rounded-2xl shadow-xl p-2 min-w-50 text-center hidden z-999">
                                                            <a href="/postres" class="block py-3 text-[17px] hover:text-corona-secondary-semilight">
                                    Postres                                </a>
                                                            <a href="/bebidas" class="block py-3 text-[17px] hover:text-corona-secondary-semilight">
                                    Bebidas                                </a>
                                                    </div>
                    </li>

                    
                
                                        <!-- CON DROPDOWN -->
                    <li class="relative ">
                        <button class="cursor-pointer dropdown-btn flex items-center gap-2 pb-2 relative ">
                            Contacto                            <svg class="dropdown-icon w-5 h-5 transition-transform duration-300"
                                fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                                <path d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>

                        <div class="dropdown-content absolute left-1/2 -translate-x-1/2 top-16
                                    bg-white rounded-2xl shadow-xl p-2 min-w-50 text-center hidden z-999">
                                                            <a href="/contacto" class="block py-3 text-[17px] hover:text-corona-secondary-semilight">
                                    PQRS                                </a>
                                                            <a href="https://crmnutresa.my.salesforce-sites.com/ConsultarCasos?code=chocolatecorona" class="block py-3 text-[17px] hover:text-corona-secondary-semilight">
                                    Consultas PQRS                                </a>
                                                    </div>
                    </li>

                    
                
                <!-- LUPA DESKTOP -->
                <div class="mb-3">
                    <button class="search-trigger w-10 h-10 bg-green-700 rounded-full flex items-center justify-center cursor-pointer">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                d="M21 21l-4.35-4.35M10 18a8 8 0 100-16 8 8 0 000 16z"/>
                        </svg>
                    </button>
                </div>

            </ul>
            
            <!-- HAMBURGUESA MOBILE -->
            <div class="lg:hidden flex items-center">
                <button id="menu-toggle" class="w-10 h-10 flex items-center justify-center">
                    <svg id="icon-hamburger" class="w-7 h-7 text-green-800"
                        fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                    <svg id="icon-close" class="w-7 h-7 text-green-800 hidden"
                        fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

        </nav>

        <!-- MENÚ MOBILE          -->

                <div id="mobile-menu" class="lg:hidden hidden absolute left-0 top-full w-full z-50 px-6 mt-12">
            <div class="bg-white rounded-2xl p-4 shadow-xl text-corona-secondary font-semibold">

                
                                        <!-- SIN DROPDOWN MOBILE -->
                    <a href="/" class="w-full flex justify-between items-center
                            bg-gray-100 px-4 py-3 rounded-xl mb-3">
                        Home                    </a>
                    
                
                                        <!-- CON DROPDOWN MOBILE -->
                    <div class="mb-3">
                        <button class="mobile-dropdown-btn w-full flex justify-between items-center
                                bg-gray-100 px-4 py-3 rounded-xl">
                            Productos                            <svg class="mobile-dropdown-icon w-5 h-5 transition-transform"
                                fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>
                        <div class="mobile-dropdown-content bg-[#E6F2EB] hidden mt-2 flex flex-col gap-2 rounded-xl">
                                                           <a href="/chocolate-de-mesa/" class=" block px-3 py-3 text-[17px] hover:text-corona-secondary-semilight">
                                    Chocolate de mesa                                </a>
                                                           <a href="/reposteria" class=" block px-3 py-3 text-[17px] hover:text-corona-secondary-semilight">
                                    Repostería                                </a>
                                                    </div>
                    </div>

                    
                
                                        <!-- CON DROPDOWN MOBILE -->
                    <div class="mb-3">
                        <button class="mobile-dropdown-btn w-full flex justify-between items-center
                                bg-gray-100 px-4 py-3 rounded-xl">
                            Recetas                            <svg class="mobile-dropdown-icon w-5 h-5 transition-transform"
                                fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>
                        <div class="mobile-dropdown-content bg-[#E6F2EB] hidden mt-2 flex flex-col gap-2 rounded-xl">
                                                           <a href="/postres" class=" block px-3 py-3 text-[17px] hover:text-corona-secondary-semilight">
                                    Postres                                </a>
                                                           <a href="/bebidas" class=" block px-3 py-3 text-[17px] hover:text-corona-secondary-semilight">
                                    Bebidas                                </a>
                                                    </div>
                    </div>

                    
                
                                        <!-- CON DROPDOWN MOBILE -->
                    <div class="mb-3">
                        <button class="mobile-dropdown-btn w-full flex justify-between items-center
                                bg-gray-100 px-4 py-3 rounded-xl">
                            Contacto                            <svg class="mobile-dropdown-icon w-5 h-5 transition-transform"
                                fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                                <path d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>
                        <div class="mobile-dropdown-content bg-[#E6F2EB] hidden mt-2 flex flex-col gap-2 rounded-xl">
                                                           <a href="/contacto" class=" block px-3 py-3 text-[17px] hover:text-corona-secondary-semilight">
                                    PQRS                                </a>
                                                           <a href="https://crmnutresa.my.salesforce-sites.com/ConsultarCasos?code=chocolatecorona" class=" block px-3 py-3 text-[17px] hover:text-corona-secondary-semilight">
                                    Consultas PQRS                                </a>
                                                    </div>
                    </div>

                    
                
            </div>
        </div>
        
    </div>

</header>

<!-- JS HEADER -->
<script>
document.addEventListener('DOMContentLoaded', () => {

    // DESKTOP — Todos los dropdowns
    document.querySelectorAll('.dropdown-btn').forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.stopPropagation();

            const li       = btn.closest('li');
            const dropdown = li.querySelector('.dropdown-content');
            const icon     = btn.querySelector('.dropdown-icon');

            // Cerrar los demás
            document.querySelectorAll('.dropdown-content').forEach(d => {
                if (d !== dropdown) d.classList.add('hidden');
            });
            document.querySelectorAll('.dropdown-icon').forEach(i => {
                if (i !== icon) i.classList.remove('rotate-180');
            });

            // Toggle actual
            dropdown.classList.toggle('hidden');
            icon.classList.toggle('rotate-180');
        });
    });

    // Cerrar al click fuera
    document.addEventListener('click', (e) => {
        if (!e.target.closest('.dropdown-btn') && !e.target.closest('.dropdown-content')) {
            document.querySelectorAll('.dropdown-content').forEach(d => d.classList.add('hidden'));
            document.querySelectorAll('.dropdown-icon').forEach(i => i.classList.remove('rotate-180'));
        }
    });

    // MOBILE — Dropdowns
    document.querySelectorAll('.mobile-dropdown-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const content = btn.parentElement.querySelector('.mobile-dropdown-content');
            const icon    = btn.querySelector('.mobile-dropdown-icon');

            content.classList.toggle('hidden');
            icon.classList.toggle('rotate-180');
        });
    });

    // MOBILE — Hamburguesa
    const toggle    = document.getElementById('menu-toggle');
    const menu      = document.getElementById('mobile-menu');
    const hamburger = document.getElementById('icon-hamburger');
    const closeIcon = document.getElementById('icon-close');

    if (toggle) {
        toggle.addEventListener('click', () => {
            menu.classList.toggle('hidden');
            hamburger.classList.toggle('hidden');
            closeIcon.classList.toggle('hidden');
        });
    }

});
</script>




<main>

    <section class="bg-corona-secondary rounded-b-3xl overflow-hidden -mt-13">

        <div class="max-w-7xl mx-auto px-6 py-30 lg:py-16 relative">

            <div class="flex gap-3 lg:mb-6 mb-3 text-lg lg:mt-0 -mt-15">

                <a href="/bebidas/" class="bg-white text-corona-secondary px-5 py-2 rounded-full text-sm font-semibold">
                    Bebidas
                </a>

                <a href="/postres/" class="border border-white text-white px-5 py-2 rounded-full text-sm font-semibold">
                    Postres
                </a>

            </div>

                            <h1 class="text-white lg:text-[69px] text-[36px] font-bold mt-5 mb-3">
                    Bebidas                </h1>
            
                            <div class="absolute -bottom-5 lg:-bottom-10 left-1/2 -translate-x-1/2 lg:left-auto lg:translate-x-0 lg:right-0 w-90 lg:w-230">
                    <picture>

                                                    <source
                                media="(max-width: 1023px)"
                                srcset="https://www.chocolatecorona.com/wp-content/uploads/2026/05/Bebidas-mobile-2.png">
                        
                                                    <img
                                src="https://www.chocolatecorona.com/wp-content/uploads/2026/05/Bebidas-2.png"
                                alt=""
                                class="w-full">
                        
                    </picture>
                </div>
            
        </div>

    </section>

    <section class="max-w-7xl mx-auto px-6 py-16 grid grid-cols-1 lg:grid-cols-[260px_1fr] gap-12">

        <!-- SIDEBAR DESKTOP -->
        <aside class="hidden lg:block w-full order-1 lg:order-0">

            
                <div class="mb-6">

                    <ul class="flex flex-wrap gap-3">

                        
                            <li>
                              <a href="/bebidas/?categoria=frutales%2Cinstantaneo%2Ccrujientes"
                                    class="flex items-center gap-2 bg-corona-tertiary text-white px-4 py-2  rounded-full text-sm font-medium  hover:bg-[#5a2f22] transition">

                                    Cremosos
                                    <span class="flex items-center justify-center w-5 h-5 rounded-full  bg-white  text-corona-tertiary text-xs">
                                        ×
                                    </span>

                                </a>
                            </li>

                        
                            <li>
                              <a href="/bebidas/?categoria=cremosos%2Cinstantaneo%2Ccrujientes"
                                    class="flex items-center gap-2 bg-corona-tertiary text-white px-4 py-2  rounded-full text-sm font-medium  hover:bg-[#5a2f22] transition">

                                    Frutales
                                    <span class="flex items-center justify-center w-5 h-5 rounded-full  bg-white  text-corona-tertiary text-xs">
                                        ×
                                    </span>

                                </a>
                            </li>

                        
                            <li>
                              <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Ccrujientes"
                                    class="flex items-center gap-2 bg-corona-tertiary text-white px-4 py-2  rounded-full text-sm font-medium  hover:bg-[#5a2f22] transition">

                                    Instantáneo
                                    <span class="flex items-center justify-center w-5 h-5 rounded-full  bg-white  text-corona-tertiary text-xs">
                                        ×
                                    </span>

                                </a>
                            </li>

                        
                            <li>
                              <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo"
                                    class="flex items-center gap-2 bg-corona-tertiary text-white px-4 py-2  rounded-full text-sm font-medium  hover:bg-[#5a2f22] transition">

                                    Crujientes
                                    <span class="flex items-center justify-center w-5 h-5 rounded-full  bg-white  text-corona-tertiary text-xs">
                                        ×
                                    </span>

                                </a>
                            </li>

                        
                        
                    </ul>

                    <a href="/bebidas/"
                        class="text-sm text-green-800 underline mt-3 flex justify-end">
                        Limpiar filtros
                    </a>

                </div>

            
            <!-- FILTROS CATEGORÍAS -->
            <hr class="border-t-2 border-corona-secondary mb-1">

            
                <div class="border-b border-green-700 pb-4 mb-4 filtro">

                    <button class="flex justify-between items-center w-full filtro-toggle">
                        <h3 class="text-green-800 font-semibold text-lg">
                            Productos Corona                        </h3>
                        <span class="arrow transition-transform duration-300">
                            <img src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-flecha-arriba-f.svg" alt="Flecha">
                        </span>
                    </button>

                    <ul class="mt-3 space-y-2 filtro-contenido">
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo%2Ccrujientes%2Cclavos-y-canela" class="text-green-800 hover:underline text-base ">
                                    Clavos y Canela                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo%2Ccrujientes%2Ccocoa" class="text-green-800 hover:underline text-base ">
                                    Cocoa                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo%2Ccrujientes%2Cdelicatto" class="text-green-800 hover:underline text-base ">
                                    Delicatto                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Ccrujientes" class="text-green-800 hover:underline text-base font-bold">
                                    Instantáneo                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo%2Ccrujientes%2Csin-azucar" class="text-green-800 hover:underline text-base ">
                                    Sin azúcar                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo%2Ccrujientes%2Ctradicional" class="text-green-800 hover:underline text-base ">
                                    Tradicional                                </a>
                            </li>
                                            </ul>

                </div>

            
                <div class="border-b border-green-700 pb-4 mb-4 filtro">

                    <button class="flex justify-between items-center w-full filtro-toggle">
                        <h3 class="text-green-800 font-semibold text-lg">
                            Ingredientes adicionales                        </h3>
                        <span class="arrow transition-transform duration-300">
                            <img src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-flecha-arriba-f.svg" alt="Flecha">
                        </span>
                    </button>

                    <ul class="mt-3 space-y-2 filtro-contenido">
                                                    <li>
                               <a href="/bebidas/?categoria=frutales%2Cinstantaneo%2Ccrujientes" class="text-green-800 hover:underline text-base font-bold">
                                    Cremosos                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo" class="text-green-800 hover:underline text-base font-bold">
                                    Crujientes                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo%2Ccrujientes%2Cdulces" class="text-green-800 hover:underline text-base ">
                                    Dulces                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo%2Ccrujientes%2Cespeciados" class="text-green-800 hover:underline text-base ">
                                    Especiados                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cinstantaneo%2Ccrujientes" class="text-green-800 hover:underline text-base font-bold">
                                    Frutales                                </a>
                            </li>
                                            </ul>

                </div>

            
            <!-- FILTRO TIEMPO DESKTOP -->
            <div class="border-b border-green-700 pb-4 mb-4 filtro">

                <button class="flex items-center justify-between w-full filtro-toggle">
                    <h3 class="text-green-800 font-semibold text-lg">
                        Tiempo
                    </h3>
                    <span class="arrow flex items-center transition-transform duration-300">
                        <img src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-flecha-arriba-f.svg" alt="Flecha">
                    </span>
                </button>

                <div class="filtro-contenido mt-6">

                    <div class="relative w-full">

                        <div id="tooltipTiempo"
                            class="absolute -top-6 flex flex-col items-center text-green-800 text-xs font-semibold transform -translate-x-1/2">
                            <span id="tooltipValor">
                                5                            </span>
                            <span class="text-[10px] leading-none">▼</span>
                        </div>

                        <input
                            type="range"
                            min="5"
                            max="50"
                            step="5"
                            value="5"
                            id="filtroTiempo"
                            class="range-profesional w-full">

                    </div>

                    <div class="text-end text-sm text-corona-secondary-light mt-2">
                        min
                    </div>

                </div>

            </div>

        </aside>

        <!-- FILTROS MOBILE (botón + tags) -->
        <div class="lg:hidden mb-4">

            <button id="openFiltros"
                class="flex items-center justify-center gap-4 bg-white text-corona-secondary px-4 py-3 rounded-xl text-[16px] font-semibold">
                   <img src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-filtro.svg" alt="Filtro">
                Filtrar
            </button>

            
                <div class="flex flex-wrap gap-2 mt-4">

                                            <a href="/bebidas/?categoria=frutales%2Cinstantaneo%2Ccrujientes"
                                    class="flex items-center gap-2 bg-corona-tertiary text-white px-4 py-2  rounded-full text-sm font-medium  hover:bg-[#5a2f22] transition">

                                    Cremosos
                                    <span class="flex items-center justify-center w-5 h-5 rounded-full  bg-white  text-corona-tertiary text-xs">
                                        ×
                                    </span>

                                </a>
                                            <a href="/bebidas/?categoria=cremosos%2Cinstantaneo%2Ccrujientes"
                                    class="flex items-center gap-2 bg-corona-tertiary text-white px-4 py-2  rounded-full text-sm font-medium  hover:bg-[#5a2f22] transition">

                                    Frutales
                                    <span class="flex items-center justify-center w-5 h-5 rounded-full  bg-white  text-corona-tertiary text-xs">
                                        ×
                                    </span>

                                </a>
                                            <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Ccrujientes"
                                    class="flex items-center gap-2 bg-corona-tertiary text-white px-4 py-2  rounded-full text-sm font-medium  hover:bg-[#5a2f22] transition">

                                    Instantáneo
                                    <span class="flex items-center justify-center w-5 h-5 rounded-full  bg-white  text-corona-tertiary text-xs">
                                        ×
                                    </span>

                                </a>
                                            <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo"
                                    class="flex items-center gap-2 bg-corona-tertiary text-white px-4 py-2  rounded-full text-sm font-medium  hover:bg-[#5a2f22] transition">

                                    Crujientes
                                    <span class="flex items-center justify-center w-5 h-5 rounded-full  bg-white  text-corona-tertiary text-xs">
                                        ×
                                    </span>

                                </a>
                    
                    
                </div>

            
        </div>

        <!-- GRID RECETAS -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-10 order-2 mt-1">

                                                
<article class="group">

    <div class="relative rounded-2xl overflow-hidden h-56 hover:rounded-4xl transition-all duration-300 group"
        style="background-color: #FFEB96;">
        <a href="https://www.chocolatecorona.com/recetas/malteada-de-brownie/">
                    <img width="300" height="200" src="https://www.chocolatecorona.com/wp-content/uploads/2026/05/malteada-brownie.jpg" class="w-full h-full object-cover wp-post-image" alt="" decoding="async" fetchpriority="high" />                </a>
        <a href="https://www.chocolatecorona.com/recetas/malteada-de-brownie/"
            class="absolute bottom-3 right-3 w-10 h-10 bg-green-800 rounded-lg flex items-center justify-center text-white transition-all duration-300 group-hover:bg-green-700 group-hover:rounded-full">

            <svg class="w-5 h-5 transition-transform duration-300 group-hover:rotate-45"
                fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M7 17L17 7M7 7h10v10" />
            </svg>

        </a>

    </div>

    <div>

        <h3 class="text-lg font-semibold text-green-900 mb-2 mt-2">
          <a href="https://www.chocolatecorona.com/recetas/malteada-de-brownie/">  Malteada de Brownie</a>
        </h3>

        
        <p class="text-sm text-corona-secondary mb-4 leading-relaxed card-receta-desc font-normal">
            Las malteadas chocolatosas son, sin duda, las favoritas de todos. Pero ¿te imaginas una preparada con brownies? Entonces&hellip;        </p>


        <div class="flex gap-2 flex-wrap">

                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">
                    Duración 65 min
                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-tiempo.svg" alt="Duración">
                </span>
            
                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">



                    2-3 porciones                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-porciones.svg" alt="Porciones">
                </span>
            
        </div>

    </div>

</article>

<style>
    
.card-receta-desc {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
}
</style>
                                    
<article class="group">

    <div class="relative rounded-2xl overflow-hidden h-56 hover:rounded-4xl transition-all duration-300 group"
        style="background-color: #FFEB96;">
        <a href="https://www.chocolatecorona.com/recetas/mousse-de-chocolate-con-banano/">
                    <img width="300" height="113" src="https://www.chocolatecorona.com/wp-content/uploads/2026/05/mousse-choccolate-banano.png" class="w-full h-full object-cover wp-post-image" alt="" decoding="async" />                </a>
        <a href="https://www.chocolatecorona.com/recetas/mousse-de-chocolate-con-banano/"
            class="absolute bottom-3 right-3 w-10 h-10 bg-green-800 rounded-lg flex items-center justify-center text-white transition-all duration-300 group-hover:bg-green-700 group-hover:rounded-full">

            <svg class="w-5 h-5 transition-transform duration-300 group-hover:rotate-45"
                fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M7 17L17 7M7 7h10v10" />
            </svg>

        </a>

    </div>

    <div>

        <h3 class="text-lg font-semibold text-green-900 mb-2 mt-2">
          <a href="https://www.chocolatecorona.com/recetas/mousse-de-chocolate-con-banano/">  Mousse de Chocolate con Banano</a>
        </h3>

        
        <p class="text-sm text-corona-secondary mb-4 leading-relaxed card-receta-desc font-normal">
            ¿Antojado de algo delicioso? La cremosidad de un mousse siempre es un deleite y, combinada con la suavidad&hellip;        </p>


        <div class="flex gap-2 flex-wrap">

                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">
                    Duración 20 min
                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-tiempo.svg" alt="Duración">
                </span>
            
                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">



                    4-5 porciones                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-porciones.svg" alt="Porciones">
                </span>
            
        </div>

    </div>

</article>

<style>
    
.card-receta-desc {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
}
</style>
                                    
<article class="group">

    <div class="relative rounded-2xl overflow-hidden h-56 hover:rounded-4xl transition-all duration-300 group"
        style="background-color: #FFEB96;">
        <a href="https://www.chocolatecorona.com/recetas/mousse-de-chocolate-blanco/">
                    <img width="300" height="113" src="https://www.chocolatecorona.com/wp-content/uploads/2026/05/mousse-chocolate.png" class="w-full h-full object-cover wp-post-image" alt="" decoding="async" />                </a>
        <a href="https://www.chocolatecorona.com/recetas/mousse-de-chocolate-blanco/"
            class="absolute bottom-3 right-3 w-10 h-10 bg-green-800 rounded-lg flex items-center justify-center text-white transition-all duration-300 group-hover:bg-green-700 group-hover:rounded-full">

            <svg class="w-5 h-5 transition-transform duration-300 group-hover:rotate-45"
                fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M7 17L17 7M7 7h10v10" />
            </svg>

        </a>

    </div>

    <div>

        <h3 class="text-lg font-semibold text-green-900 mb-2 mt-2">
          <a href="https://www.chocolatecorona.com/recetas/mousse-de-chocolate-blanco/">  Mousse de Chocolate Blanco</a>
        </h3>

        
        <p class="text-sm text-corona-secondary mb-4 leading-relaxed card-receta-desc font-normal">
            Este postre es rápido de preparar y tiene un equilibrio perfecto entre el dulce y el toque cítrico&hellip;        </p>


        <div class="flex gap-2 flex-wrap">

                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">
                    Duración 30 min
                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-tiempo.svg" alt="Duración">
                </span>
            
                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">



                    3-4 porciones                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-porciones.svg" alt="Porciones">
                </span>
            
        </div>

    </div>

</article>

<style>
    
.card-receta-desc {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
}
</style>
                                    
<article class="group">

    <div class="relative rounded-2xl overflow-hidden h-56 hover:rounded-4xl transition-all duration-300 group"
        style="background-color: #FFEB96;">
        <a href="https://www.chocolatecorona.com/recetas/paletas-cremosas-de-chocolate/">
                    <img width="300" height="200" src="https://www.chocolatecorona.com/wp-content/uploads/2026/05/paleta-cremosa-chocolate.jpg" class="w-full h-full object-cover wp-post-image" alt="" decoding="async" />                </a>
        <a href="https://www.chocolatecorona.com/recetas/paletas-cremosas-de-chocolate/"
            class="absolute bottom-3 right-3 w-10 h-10 bg-green-800 rounded-lg flex items-center justify-center text-white transition-all duration-300 group-hover:bg-green-700 group-hover:rounded-full">

            <svg class="w-5 h-5 transition-transform duration-300 group-hover:rotate-45"
                fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M7 17L17 7M7 7h10v10" />
            </svg>

        </a>

    </div>

    <div>

        <h3 class="text-lg font-semibold text-green-900 mb-2 mt-2">
          <a href="https://www.chocolatecorona.com/recetas/paletas-cremosas-de-chocolate/">  Paletas Cremosas de Chocolate</a>
        </h3>

        
        <p class="text-sm text-corona-secondary mb-4 leading-relaxed card-receta-desc font-normal">
            Estas paletas cremosas de Chocolate Corona son una opción ideal para esos antojos de algo frío y delicioso.&hellip;        </p>


        <div class="flex gap-2 flex-wrap">

                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">
                    Duración 15 min
                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-tiempo.svg" alt="Duración">
                </span>
            
                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">



                    5 porciones                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-porciones.svg" alt="Porciones">
                </span>
            
        </div>

    </div>

</article>

<style>
    
.card-receta-desc {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
}
</style>
                                    
<article class="group">

    <div class="relative rounded-2xl overflow-hidden h-56 hover:rounded-4xl transition-all duration-300 group"
        style="background-color: #FFEB96;">
        <a href="https://www.chocolatecorona.com/recetas/ganache-de-chocolate/">
                    <img width="300" height="200" src="https://www.chocolatecorona.com/wp-content/uploads/2026/05/ganash-chocolate.jpg" class="w-full h-full object-cover wp-post-image" alt="" decoding="async" />                </a>
        <a href="https://www.chocolatecorona.com/recetas/ganache-de-chocolate/"
            class="absolute bottom-3 right-3 w-10 h-10 bg-green-800 rounded-lg flex items-center justify-center text-white transition-all duration-300 group-hover:bg-green-700 group-hover:rounded-full">

            <svg class="w-5 h-5 transition-transform duration-300 group-hover:rotate-45"
                fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M7 17L17 7M7 7h10v10" />
            </svg>

        </a>

    </div>

    <div>

        <h3 class="text-lg font-semibold text-green-900 mb-2 mt-2">
          <a href="https://www.chocolatecorona.com/recetas/ganache-de-chocolate/">  Ganache de Chocolate</a>
        </h3>

        
        <p class="text-sm text-corona-secondary mb-4 leading-relaxed card-receta-desc font-normal">
            Hoy aprenderemos a preparar nada menos que el relleno más chocolatoso que puedas imaginar. ¿Sabías que puedes disfrutar&hellip;        </p>


        <div class="flex gap-2 flex-wrap">

                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">
                    Duración 8 min
                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-tiempo.svg" alt="Duración">
                </span>
            
                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">



                    1 porciones                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-porciones.svg" alt="Porciones">
                </span>
            
        </div>

    </div>

</article>

<style>
    
.card-receta-desc {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
}
</style>
                                    
<article class="group">

    <div class="relative rounded-2xl overflow-hidden h-56 hover:rounded-4xl transition-all duration-300 group"
        style="background-color: #FFEB96;">
        <a href="https://www.chocolatecorona.com/recetas/avena-de-chocolate-y-fresas/">
                    <img width="300" height="113" src="https://www.chocolatecorona.com/wp-content/uploads/2026/05/avena-fresas.jpg" class="w-full h-full object-cover wp-post-image" alt="" decoding="async" />                </a>
        <a href="https://www.chocolatecorona.com/recetas/avena-de-chocolate-y-fresas/"
            class="absolute bottom-3 right-3 w-10 h-10 bg-green-800 rounded-lg flex items-center justify-center text-white transition-all duration-300 group-hover:bg-green-700 group-hover:rounded-full">

            <svg class="w-5 h-5 transition-transform duration-300 group-hover:rotate-45"
                fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M7 17L17 7M7 7h10v10" />
            </svg>

        </a>

    </div>

    <div>

        <h3 class="text-lg font-semibold text-green-900 mb-2 mt-2">
          <a href="https://www.chocolatecorona.com/recetas/avena-de-chocolate-y-fresas/">  Avena de chocolate y fresas</a>
        </h3>

        
        <p class="text-sm text-corona-secondary mb-4 leading-relaxed card-receta-desc font-normal">
            Si quieres una plato muy nutritivo, fácil de preparar y sobre todo muy delicioso, entonces anímate a sorprender&hellip;        </p>


        <div class="flex gap-2 flex-wrap">

                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">
                    Duración 30 min
                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-tiempo.svg" alt="Duración">
                </span>
            
                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">



                    1 porciones                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-porciones.svg" alt="Porciones">
                </span>
            
        </div>

    </div>

</article>

<style>
    
.card-receta-desc {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
}
</style>
                                    
<article class="group">

    <div class="relative rounded-2xl overflow-hidden h-56 hover:rounded-4xl transition-all duration-300 group"
        style="background-color: #FFEB96;">
        <a href="https://www.chocolatecorona.com/recetas/chocolate-con-avena/">
                    <img width="300" height="113" src="https://www.chocolatecorona.com/wp-content/uploads/2026/05/chocolate-corona-avena.jpg" class="w-full h-full object-cover wp-post-image" alt="" decoding="async" />                </a>
        <a href="https://www.chocolatecorona.com/recetas/chocolate-con-avena/"
            class="absolute bottom-3 right-3 w-10 h-10 bg-green-800 rounded-lg flex items-center justify-center text-white transition-all duration-300 group-hover:bg-green-700 group-hover:rounded-full">

            <svg class="w-5 h-5 transition-transform duration-300 group-hover:rotate-45"
                fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M7 17L17 7M7 7h10v10" />
            </svg>

        </a>

    </div>

    <div>

        <h3 class="text-lg font-semibold text-green-900 mb-2 mt-2">
          <a href="https://www.chocolatecorona.com/recetas/chocolate-con-avena/">  Chocolate con Avena</a>
        </h3>

        
        <p class="text-sm text-corona-secondary mb-4 leading-relaxed card-receta-desc font-normal">
            De las preparaciones que más disfrutamos traerles son las bebidas frías, pues muestran toda la versatilidad que tiene&hellip;        </p>


        <div class="flex gap-2 flex-wrap">

                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">
                    Duración 3 min
                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-tiempo.svg" alt="Duración">
                </span>
            
                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">



                    1 porciones                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-porciones.svg" alt="Porciones">
                </span>
            
        </div>

    </div>

</article>

<style>
    
.card-receta-desc {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
}
</style>
                                    
<article class="group">

    <div class="relative rounded-2xl overflow-hidden h-56 hover:rounded-4xl transition-all duration-300 group"
        style="background-color: #FFEB96;">
        <a href="https://www.chocolatecorona.com/recetas/chocolate-holandes/">
                    <img width="300" height="200" src="https://www.chocolatecorona.com/wp-content/uploads/2026/05/chocolate-holandes.jpg" class="w-full h-full object-cover wp-post-image" alt="" decoding="async" />                </a>
        <a href="https://www.chocolatecorona.com/recetas/chocolate-holandes/"
            class="absolute bottom-3 right-3 w-10 h-10 bg-green-800 rounded-lg flex items-center justify-center text-white transition-all duration-300 group-hover:bg-green-700 group-hover:rounded-full">

            <svg class="w-5 h-5 transition-transform duration-300 group-hover:rotate-45"
                fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M7 17L17 7M7 7h10v10" />
            </svg>

        </a>

    </div>

    <div>

        <h3 class="text-lg font-semibold text-green-900 mb-2 mt-2">
          <a href="https://www.chocolatecorona.com/recetas/chocolate-holandes/">  Chocolate Holandes</a>
        </h3>

        
        <p class="text-sm text-corona-secondary mb-4 leading-relaxed card-receta-desc font-normal">
            La cocoa es el resultado de distintos procesos realizados a los granos de cacao. Es una de las&hellip;        </p>


        <div class="flex gap-2 flex-wrap">

                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">
                    Duración 10 min
                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-tiempo.svg" alt="Duración">
                </span>
            
                            <span class="flex items-center gap-1 text-xs bg-green-700 text-white px-3 py-1 rounded-full">



                    1 porciones                    <img class="ml-1.5 size-4.5" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-porciones.svg" alt="Porciones">
                </span>
            
        </div>

    </div>

</article>

<style>
    
.card-receta-desc {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
}
</style>
                                            
        </div>

  
<!-- PAGINADOR -->

    <div id="recetas-pagination" class="flex justify-center mt-10 col-span-full order-3">

        <ul class='page-numbers'>
	<li><span aria-current="page" class="page-numbers current">1</span></li>
	<li><a class="page-numbers" href="/bebidas/?categoria=cremosos,frutales,instantaneo,crujientes&#038;pagina=2">2</a></li>
	<li><a class="page-numbers" href="/bebidas/?categoria=cremosos,frutales,instantaneo,crujientes&#038;pagina=3">3</a></li>
	<li><a class="page-numbers" href="/bebidas/?categoria=cremosos,frutales,instantaneo,crujientes&#038;pagina=4">4</a></li>
	<li><a class="next page-numbers" href="/bebidas/?categoria=cremosos,frutales,instantaneo,crujientes&#038;pagina=2">></a></li>
</ul>

    </div>



    </section>

    <!-- MODAL FILTROS MOBILE -->
    <div id="filtrosModal"
        class="fixed inset-0 bg-black/40 z-50 hidden flex items-end">

        <div class="w-full bg-white shadow-xl p-6 overflow-y-auto rounded-t-3xl max-h-[85vh]">

            <div class="flex justify-normal items-start mb-6">
                <button id="closeFiltros" class="text-lg mr-5">
                   <img src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-flecha-filtro.svg" alt="Flecha">
                </button>
                <h2 class="text-lg font-semibold text-green-800 pb-1.5">
                    Filtrar
                </h2>
            </div>

            <!-- TAGS ACTIVOS EN MODAL -->
            <div class="mb-6">

                
                    <div class="flex flex-wrap gap-2">

                                                   <a href="/bebidas/?categoria=frutales%2Cinstantaneo%2Ccrujientes"
                                    class="flex items-center gap-2 bg-corona-tertiary text-white px-4 py-2  rounded-full text-sm font-medium  hover:bg-[#5a2f22] transition">

                                    Cremosos
                                    <span class="flex items-center justify-center w-5 h-5 rounded-full  bg-white  text-corona-tertiary text-xs">
                                        ×
                                    </span>

                                </a>
                                                   <a href="/bebidas/?categoria=cremosos%2Cinstantaneo%2Ccrujientes"
                                    class="flex items-center gap-2 bg-corona-tertiary text-white px-4 py-2  rounded-full text-sm font-medium  hover:bg-[#5a2f22] transition">

                                    Frutales
                                    <span class="flex items-center justify-center w-5 h-5 rounded-full  bg-white  text-corona-tertiary text-xs">
                                        ×
                                    </span>

                                </a>
                                                   <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Ccrujientes"
                                    class="flex items-center gap-2 bg-corona-tertiary text-white px-4 py-2  rounded-full text-sm font-medium  hover:bg-[#5a2f22] transition">

                                    Instantáneo
                                    <span class="flex items-center justify-center w-5 h-5 rounded-full  bg-white  text-corona-tertiary text-xs">
                                        ×
                                    </span>

                                </a>
                                                   <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo"
                                    class="flex items-center gap-2 bg-corona-tertiary text-white px-4 py-2  rounded-full text-sm font-medium  hover:bg-[#5a2f22] transition">

                                    Crujientes
                                    <span class="flex items-center justify-center w-5 h-5 rounded-full  bg-white  text-corona-tertiary text-xs">
                                        ×
                                    </span>

                                </a>
                        
                        
                    </div>

                
            </div>

            <!-- FILTROS CATEGORÍAS MOBILE -->
            
                <div class="border-b border-green-700 pb-4 mb-4 filtro">

                    <button class="flex justify-between items-center w-full filtro-toggle">
                        <h3 class="text-green-800 font-semibold">
                            Productos Corona                        </h3>
                        <span class="arrow transition-transform duration-300">
                           <img src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-flecha-arriba-f.svg" alt="Flecha">
                        </span>
                    </button>

                    <ul class="mt-3 space-y-2 filtro-contenido">
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo%2Ccrujientes%2Cclavos-y-canela" class="text-green-800 ">
                                    Clavos y Canela                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo%2Ccrujientes%2Ccocoa" class="text-green-800 ">
                                    Cocoa                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo%2Ccrujientes%2Cdelicatto" class="text-green-800 ">
                                    Delicatto                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Ccrujientes" class="text-green-800 font-bold">
                                    Instantáneo                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo%2Ccrujientes%2Csin-azucar" class="text-green-800 ">
                                    Sin azúcar                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo%2Ccrujientes%2Ctradicional" class="text-green-800 ">
                                    Tradicional                                </a>
                            </li>
                                            </ul>

                </div>

            
                <div class="border-b border-green-700 pb-4 mb-4 filtro">

                    <button class="flex justify-between items-center w-full filtro-toggle">
                        <h3 class="text-green-800 font-semibold">
                            Ingredientes adicionales                        </h3>
                        <span class="arrow transition-transform duration-300">
                           <img src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-flecha-arriba-f.svg" alt="Flecha">
                        </span>
                    </button>

                    <ul class="mt-3 space-y-2 filtro-contenido">
                                                    <li>
                               <a href="/bebidas/?categoria=frutales%2Cinstantaneo%2Ccrujientes" class="text-green-800 font-bold">
                                    Cremosos                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo" class="text-green-800 font-bold">
                                    Crujientes                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo%2Ccrujientes%2Cdulces" class="text-green-800 ">
                                    Dulces                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo%2Ccrujientes%2Cespeciados" class="text-green-800 ">
                                    Especiados                                </a>
                            </li>
                                                    <li>
                               <a href="/bebidas/?categoria=cremosos%2Cinstantaneo%2Ccrujientes" class="text-green-800 font-bold">
                                    Frutales                                </a>
                            </li>
                                            </ul>

                </div>

            
            <!-- FILTRO TIEMPO MOBILE -->
            <div class="border-b border-green-700 pb-4 mb-4 filtro">

                <button class="flex justify-between items-center w-full filtro-toggle">
                    <h3 class="text-green-800 font-semibold">
                        Tiempo
                    </h3>
                    <span class="arrow transition-transform duration-300">
                        <img src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-flecha-arriba-f.svg" alt="Flecha">
                    </span>
                </button>

                <div class="filtro-contenido mt-6">

                    <div class="relative w-full">

                        <div id="tooltipTiempoMobile"
                            class="absolute -top-6 flex flex-col items-center text-green-800 text-xs font-semibold transform -translate-x-1/2">
                            <span id="tooltipValorMobile">
                                5                            </span>
                            <span class="text-[10px] leading-none">▼</span>
                        </div>

                        <input
                            type="range"
                            min="5"
                            max="50"
                            step="5"
                            value="5"
                            id="filtroTiempoMobile"
                            class="range-profesional w-full">

                    </div>

                    <div class="text-end text-sm text-corona-secondary-light mt-2">
                        min
                    </div>

                </div>

            </div>

        </div>

    </div>

</main>



<footer class="bg-corona-secondary text-white rounded-2xl mx-4 mb-6">

    <div class="max-w-7xl mx-auto px-5 py-10 text-center lg:text-left">

        <div class="flex flex-col lg:flex-row justify-between items-center lg:items-start gap-8">

            <!-- NEWSLETTER -->
            <div class="max-w-sm flex flex-col items-center lg:items-start">

                <div class="flex flex-col items-center lg:items-start mb-3">

                    <img src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/logo-footer.svg" class="mb-8 w-35">

                    

                    <p class="text-[16px] mb-4 text-[#FEFEFE] font-bold">
                        Entérate de todas las novedades que chocolate Corona tiene para ti
                    </p>

                </div>

                <a href="https://www.tiendanutresaencasa.com/corona" class="border border-white rounded-full px-6 py-2 text-center mb-1 items-center justify-center gap-2 hover:bg-white hover:text-green-800 transition text-[16px]">
                        Comprar ahora
                        <span>›</span>
                </a>
                <!-- <p class="text-[16px] text-[#FEFEFE] font-Regular mb-1.5">
                    Correo electrónico:
                </p>


                <form id="newsletterForm" class="w-full max-w-xs">

                    <div class="flex items-center bg-white rounded-full overflow-hidden w-full">
                        <input type="email" 
                            id="newsletterEmail"
                            name="email" 
                            placeholder="User@mail.com"
                            required
                            class="flex-1 px-4 py-2 text-corona-secondary outline-none text-sm">
                        <button type="submit" 
                                id="newsletterBtn"
                                class="bg-corona-primary text-corona-secondary px-6 py-2 text-sm font-semibold rounded-full m-1">
                            Enviar
                        </button>
                    </div>

                    <input type="hidden" id="newsletter_nonce" name="newsletter_nonce" value="5c104142e7" /><input type="hidden" name="_wp_http_referer" value="/bebidas/?categoria=cremosos%2Cfrutales%2Cinstantaneo%2Ccrujientes" />
                    <p id="newsletterMsg" class="text-sm mt-2 hidden"></p>

                </form> -->


            </div>

            <!-- LINKS -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-20 text-sm text-center lg:text-left items-center justify-center mt-5">

                <!-- PRODUCTOS (desde menú WP) -->
                <div class="text-[16px]">
                    <h4 class="font-semibold mb-3">Productos</h4>
                                            <ul class="space-y-2">
                                                            <li>
                                    <a href="/chocolate-de-mesa" class="hover:underline">
                                        Chocolate de mesa                                    </a>
                                </li>
                                                            <li>
                                    <a href="/reposteria" class="hover:underline">
                                        Repostería                                    </a>
                                </li>
                                                    </ul>
                                    </div>

                <!-- EXPLORAR (desde menú WP) -->
                <div class="text-[16px]">
                    <h4 class="font-semibold mb-3">Explorar</h4>
                                            <ul class="space-y-2">
                                                            <li>
                                    <a href="/bebidas/" class="hover:underline">
                                        Bebidas                                    </a>
                                </li>
                                                            <li>
                                    <a href="/postres" class="hover:underline">
                                        Postres                                    </a>
                                </li>
                                                            <li>
                                    <a href="/contacto/" class="hover:underline">
                                        Contacto                                    </a>
                                </li>
                                                    </ul>
                                    </div>

                <!-- REDES -->
                <div class="flex flex-col items-center lg:items-end">

                    <a href="https://www.tiendanutresaencasa.com/corona" class="hidden border border-white rounded-full px-6 py-2 text-center mb-10 items-center justify-center gap-2 hover:bg-white hover:text-green-800 transition text-[16px]">
                        Comprar ahora
                        <span>›</span>
                    </a>

                    <div class="flex flex-col items-center lg:items-start mt-10">

                        <div class="flex w-4 h-px bg-white my-1"></div>

                        <div class="flex gap-4 mt-4 justify-center">
                            <a href="http://facebook.com/CHOCOLATECORONAOFICIAL"><img src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-facebook.svg" class="w-5 h-5"></a>
                            <a href="https://www.instagram.com/chocolatecorona/"><img src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-instagram.svg" class="w-5 h-5"></a>
                            <a href="https://www.youtube.com/c/ChocolateCorona/featured"><img src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-youtube.svg" class="w-5 h-5"></a>
                            <a href="https://x.com/ChocoCoronaofi"><img src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-twitter.svg" class="w-5 h-5"></a>
                            <a href="https://www.tiktok.com/@chocolatecorona"><img src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-tiktok.svg" class="w-5 h-5"></a>
                        </div>

                    </div>

                    <div class="flex justify-center lg:justify-end mt-6">
                        <button onclick="window.scrollTo({top:0, behavior:'smooth'})"
                            class="bg-yellow-400 w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition cursor-pointer">
                            <img class="w-5 h-5"
                                src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-flecha-arriba.svg"
                                alt="Subir">
                        </button>
                    </div>

                </div>

            </div>

        </div>

        <div class="border-t border-white mt-10 pt-6 flex flex-col md:flex-row justify-center md:justify-between items-center gap-4 text-[16px] text-center md:text-left ">

            <p>
                © <span id="year"></span> Compañía Nacional de Chocolates. Todos los derechos reservados. Medellín, Colombia.
            </p>

            <div class="flex gap-4 text-[14px]">
                <a href="/politica-de-cookies" class="underline">Política de Cookies</a>
                <a href="/politica-de-privacidad" class="underline">Política de privacidad</a>
                <a href="/politica-de-tratamiento-de-datos-personales" class="underline">Términos y condiciones</a>
                
            </div>

        </div>

    </div>
</footer>

<script>
    document.getElementById("year").innerHTML = new Date().getFullYear();
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        const form = document.getElementById('newsletterForm');
        const input = document.getElementById('newsletterEmail');
        const btn = document.getElementById('newsletterBtn');
        const msg = document.getElementById('newsletterMsg');

        if (!form) return;

        form.addEventListener('submit', (e) => {
            e.preventDefault();

            const email = input.value.trim();
            if (!email) return;

            btn.textContent = '...';
            btn.disabled = true;

            const formData = new URLSearchParams({
                action: 'corona_newsletter',
                email: email,
                nonce: document.getElementById('newsletter_nonce').value
            });

            fetch("https://www.chocolatecorona.com/wp-admin/admin-ajax.php", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/x-www-form-urlencoded"
                    },
                    body: formData.toString()
                })
                .then(res => res.json())
                .then(data => {

                    msg.classList.remove('hidden');

                    if (data.success) {
                        msg.textContent = data.data;
                        msg.className = 'text-sm mt-2 text-[#F5C400]';
                        input.value = '';
                    } else {
                        msg.textContent = data.data;
                        msg.className = 'text-sm mt-2 text-red-300';
                    }

                    btn.textContent = 'Enviar';
                    btn.disabled = false;

                    setTimeout(() => {
                        msg.classList.add('hidden');
                    }, 5000);
                });

        });

    });
</script>



    <a href="https://www.tiendanutresaencasa.com/corona"
        target="_blank"
        class="fixed right-0 top-1/2 -translate-y-1/2 z-99 border-[#fefefeab] border-2
          bg-corona-secondary-light text-white 
          flex flex-col items-center justify-center gap-3
          py-6 px-3 rounded-l-2xl shadow-lg
          transition-all duration-300
          hover:px-5 hover:shadow-2xl
          cursor-pointer group  shadow-amber-50">

        <img src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/img/icono-carrito.svg"
            class="w-6 h-6 transition-transform duration-300 group-hover:scale-110 rotate-270"
            alt="carrito">

        <span class="[writing-mode:vertical-lr] rotate-180
                 font-bold text-base tracking-widest
                 transition-all duration-300">
            Comprar        </span>

    </a>





<!-- MODAL BÚSQUEDA -->
<div id="search-modal"
    class="fixed inset-0 z-999 hidden">

    <div id="search-overlay" class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>

    <div class="relative flex flex-col items-center justify-start pt-32 px-6 h-full">

        <div class="w-full max-w-2xl bg-white rounded-2xl flex items-center gap-3 px-5 py-4 shadow-xl">
            <svg class="w-6 h-6 text-green-800 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M21 21l-4.35-4.35M10 18a8 8 0 100-16 8 8 0 000 16z" />
            </svg>
            <input id="search-input"
                type="text"
                placeholder="Búsqueda"
                autocomplete="off"
                class="w-full outline-none text-lg text-corona-secondary placeholder:text-gray-400">
        </div>

        <div id="search-results" class="w-full max-w-2xl bg-white rounded-2xl mt-4 shadow-xl overflow-y-auto hidden max-h-[50vh]">
        </div>


        <div id="search-loader" class="hidden mt-4">
            <svg class="animate-spin w-8 h-8 text-green-700" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
            </svg>
        </div>


        <button id="search-close"
            class="mt-6 w-12 h-12 bg-white rounded-full flex items-center justify-center shadow-lg
                       hover:scale-110 transition-transform cursor-pointer">
            <svg class="w-6 h-6 text-green-800" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>

    </div>

</div>


<script>
    document.addEventListener('DOMContentLoaded', () => {

        const modal = document.getElementById('search-modal');
        const overlay = document.getElementById('search-overlay');
        const input = document.getElementById('search-input');
        const results = document.getElementById('search-results');
        const loader = document.getElementById('search-loader');
        const closeBtn = document.getElementById('search-close');

        let timer = null;
        let controller = null;


        document.querySelectorAll('.search-trigger').forEach(btn => {
            btn.addEventListener('click', () => {
                modal.classList.remove('hidden');
                document.body.classList.add('overflow-hidden');
                setTimeout(() => input.focus(), 100);
            });
        });


        function closeModal() {
            clearTimeout(timer);
            if (controller) controller.abort();
            loader.classList.add('hidden');
            modal.classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
            input.value = '';
            results.innerHTML = '';
            results.classList.add('hidden');
        }

        closeBtn.addEventListener('click', closeModal);
        overlay.addEventListener('click', closeModal);
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') closeModal();
        });


        input.addEventListener('input', () => {

            clearTimeout(timer);

            if (controller) controller.abort();

            const term = input.value.trim();

            if (term.length < 2) {
                loader.classList.add('hidden');
                results.innerHTML = '';
                results.classList.add('hidden');
                return;
            }

            loader.classList.remove('hidden');

            timer = setTimeout(() => {

                controller = new AbortController();

                fetch(`${corona_ajax.url}?action=corona_search&term=${encodeURIComponent(term)}`, {
                    signal: controller.signal
                })
                    .then(res => res.json())
                    .then(data => {

                        loader.classList.add('hidden');

                        if (data.length === 0) {
                            results.innerHTML = `
                            <div class="p-5 text-center text-gray-400">
                                No se encontraron resultados
                            </div>`;
                            results.classList.remove('hidden');
                            return;
                        }

                        let html = '';

                        data.forEach(item => {
                            html += `
                            <a href="${item.url}" 
                               class="flex items-center gap-4 px-5 py-4 hover:bg-gray-50 
                                      border-b border-gray-100 last:border-0 transition">

                                ${item.thumbnail 
                                    ? `<img src="${item.thumbnail}" class="w-10 h-10 rounded-lg object-cover shrink-0">` 
                                    : `<div class="w-10 h-10 rounded-lg bg-gray-200 shrink-0"></div>`
                                }

                                <div class="flex-1 min-w-0">
                                    <p class="font-semibold text-corona-secondary truncate">
                                        ${item.title}
                                    </p>
                                    <span class="text-xs px-2 py-0.5 rounded-full
                                        ${item.type === 'producto' 
                                            ? 'bg-green-100 text-green-700' 
                                            : 'bg-yellow-100 text-yellow-700'}">
                                        ${item.type_label}
                                    </span>
                                </div>

                                <svg class="w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" 
                                     stroke-width="2" viewBox="0 0 24 24">
                                    <path d="M9 5l7 7-7 7"/>
                                </svg>

                            </a>`;
                        });

                        results.innerHTML = html;
                        results.classList.remove('hidden');

                    })
                    .catch((err) => {
                        if (err.name === 'AbortError') return;
                        loader.classList.add('hidden');
                        results.innerHTML = `
                        <div class="p-5 text-center text-red-400">
                            Error al buscar
                        </div>`;
                        results.classList.remove('hidden');
                    });

            }, 300);

        });

    });
</script>




<!-- POPUP TÉRMINOS -->
<div id="popupTerminos"
    class="fixed inset-0 z-[9999] flex items-end justify-center hidden">

    <!-- DESKTOP -->

    <div class="hidden lg:block w-full">
        <div class="rounded-t-3xl p-10 relative bg-corona-secondary">


            <h3 class="text-corona-primary text-2xl font-bold mb-3">
                Antes de seguir disfrutando...
            </h3>

            <p class="text-white text-base mb-8 leading-relaxed">
                Para continuar navegando en este sitio, es necesario aceptar nuestros Términos y Condiciones y la Política de Privacidad. Estos describen cómo usamos tu información y las condiciones de uso de nuestra plataforma.
            </p>

            <div class="flex items-center justify-end gap-4">

                <a href="https://www.chocolatecorona.com/politica-de-tratamiento-de-datos-personales/"
                    class="inline-flex items-center gap-2 bg-[#F5C400] text-corona-secondary
                          px-6 py-3 rounded-full font-semibold text-sm
                          hover:bg-yellow-400 transition">
                    Leer términos
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M9 5l7 7-7 7" />
                    </svg>
                </a>

                <button id="btnRechazar"
                    class="inline-flex items-center gap-2 border-2 border-white text-white 
                               px-6 py-3 rounded-full font-semibold text-sm
                               hover:bg-white/10 transition">
                    Rechazar
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M9 5l7 7-7 7" />
                    </svg>
                </button>

                <button id="btnAceptar"
                    class="inline-flex items-center gap-2 border-2 border-white text-white 
                               px-6 py-3 rounded-full font-semibold text-sm
                               hover:bg-white/10 transition">
                    Aceptar y continuar
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M9 5l7 7-7 7" />
                    </svg>
                </button>

            </div>

        </div>

    </div>

    <!-- MOBILE -->

    <div class="lg:hidden w-full">
        <div class="rounded-t-3xl p-6 relative bg-corona-secondary">


            <h3 class="text-corona-primary text-2xl font-bold mb-3">
                Antes de seguir disfrutando...
            </h3>

            <p class="text-white text-base mb-6 leading-relaxed">
                Para continuar navegando en este sitio, es necesario aceptar nuestros Términos y
                Condiciones y la Política de Privacidad. Estos describen cómo usamos tu información
                y las condiciones de uso de nuestra plataforma.
            </p>

            <div class="flex flex-col gap-3">

                <a href="https://www.chocolatecorona.com/politica-de-tratamiento-de-datos-personales/"
                    class="flex items-center justify-center gap-2 bg-[#F5C400] text-corona-secondary 
                          px-6 py-3 rounded-full font-semibold text-sm
                          hover:bg-yellow-400 transition">
                    Leer términos
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M9 5l7 7-7 7" />
                    </svg>
                </a>

                <button id="btnRechazarMobile"
                    class="flex items-center justify-center gap-2 border-2 border-white text-white 
                               px-6 py-3 rounded-full font-semibold text-sm
                               hover:bg-white/10 transition">
                    Rechazar
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M9 5l7 7-7 7" />
                    </svg>
                </button>

                <button id="btnAceptarMobile"
                    class="flex items-center justify-center gap-2 border-2 border-white text-white 
                               px-6 py-3 rounded-full font-semibold text-sm
                               hover:bg-white/10 transition">
                    Aceptar y continuar
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path d="M9 5l7 7-7 7" />
                    </svg>
                </button>

            </div>

        </div>

    </div>

</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {

        const popup = document.getElementById('popupTerminos');


        if (localStorage.getItem('corona_terminos') === 'aceptado') return;


        setTimeout(() => {
            popup.classList.remove('hidden');
        }, 5000);

        const aceptar = () => {
            localStorage.setItem('corona_terminos', 'aceptado');
            popup.classList.add('hidden');
        };

        document.getElementById('btnAceptar')?.addEventListener('click', aceptar);
        document.getElementById('btnAceptarMobile')?.addEventListener('click', aceptar);

        const rechazar = () => {
            popup.classList.add('hidden');
            window.history.back();
        };


        document.getElementById('btnRechazar')?.addEventListener('click', rechazar);
        document.getElementById('btnRechazarMobile')?.addEventListener('click', rechazar);

    });
</script>





</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/choclates-corona/theme/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="choclates-corona-script-js" src="https://www.chocolatecorona.com/wp-content/themes/choclates-corona/theme/js/script.min.js?ver=0.1.0"></script>
<script id="swiper-js-js" src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script id="wp-emoji-settings" type="application/json">
{"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://www.chocolatecorona.com/wp-includes/js/wp-emoji-release.min.js?ver=7.0.4"}}
</script>
<script type="module">
/*! This file is auto-generated */
var e="script#wp-emoji-settings",t=document.querySelector(e);if(!(t instanceof HTMLScriptElement))throw new Error("Element missing: "+e);const r=JSON.parse(t.text),s=(window._wpemojiSettings=r,"wpEmojiSettingsSupports"),o=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(s,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const r=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===r[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,r){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!r(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,r){let a;const s=(a="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),o=(s.textBaseline="top",s.font="600 32px Arial",{});return e.forEach(e=>{o[e]=t(s,e,n,r)}),o}function a(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}r.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(s));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(o),u.toString(),c.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"});const a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=e=>{i(n=e.data),a.terminate(),t(n)})}catch(e){}i(n=f(o,u,c,p))}t(n)}).then(e=>{for(const n in e)r.supports[n]=e[n],r.supports.everything=r.supports.everything&&r.supports[n],"flag"!==n&&(r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&r.supports[n]);var t;r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&!r.supports.flag,r.supports.everything||((t=r.source||{}).concatemoji?a(t.concatemoji):t.wpemoji&&t.twemoji&&(a(t.twemoji),a(t.wpemoji)))});
//# sourceURL=https://www.chocolatecorona.com/wp-includes/js/wp-emoji-loader.min.js
</script>
    <script>
    document.querySelectorAll('a[target="_blank"]').forEach(function(a){
        if(!a.getAttribute('rel') || a.getAttribute('rel').indexOf('noopener')===-1){
            a.setAttribute('rel','noopener noreferrer');
        }
    });
    </script>
    
</body>

</html>
<!-- ACORDEÓN FILTROS -->
<script>
document.querySelectorAll('.filtro-toggle').forEach(btn => {
    btn.addEventListener('click', () => {
        const parent = btn.closest('.filtro');
        const contenido = parent.querySelector('.filtro-contenido');
        const arrow = parent.querySelector('.arrow');

        contenido.classList.toggle('hidden');
        arrow.classList.toggle('rotate-180');
    });
});
</script>

<!-- MODAL FILTROS MOBILE -->
<script>
    const modal = document.getElementById('filtrosModal');
    const openBtn = document.getElementById('openFiltros');
    const closeBtn = document.getElementById('closeFiltros');

    openBtn.addEventListener('click', () => {
        modal.classList.remove('hidden');
    });

    closeBtn.addEventListener('click', () => {
        modal.classList.add('hidden');
    });

    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.classList.add('hidden');
        }
    });
</script>

<!-- SLIDER TIEMPO -->
<script>
document.addEventListener("DOMContentLoaded", () => {

    // DESKTOP
    const slider = document.getElementById('filtroTiempo');
    const tooltip = document.getElementById('tooltipTiempo');
    const valor = document.getElementById('tooltipValor');

    if (slider && tooltip && valor) {

        const updateTooltip = () => {
            const value = slider.value;
            const min = slider.min;
            const max = slider.max;
            const percent = ((value - min) / (max - min)) * 100;

            valor.textContent = value;
            tooltip.style.left = `calc(${percent}%)`;

            slider.style.background = `
                linear-gradient(90deg,
                    #2B9359 0%, #005827 ${percent}%,
                    #e5e7eb ${percent}%, #e5e7eb 100%)`;
        };

        updateTooltip();
        slider.addEventListener('input', updateTooltip);

        
        
        slider.addEventListener('change', () => {
            sessionStorage.setItem('scrollY', window.scrollY);

            const url = new URL(window.location.href);
            url.searchParams.set('tiempo', slider.value);
            url.searchParams.delete('pagina');
            window.location.href = url;
        });


    }

    // MOBILE
    const sliderMobile = document.getElementById('filtroTiempoMobile');
    const tooltipMobile = document.getElementById('tooltipTiempoMobile');
    const valorMobile = document.getElementById('tooltipValorMobile');

    if (sliderMobile && tooltipMobile && valorMobile) {

        const updateMobile = () => {
            const value = sliderMobile.value;
            const min = sliderMobile.min;
            const max = sliderMobile.max;
            const percent = ((value - min) / (max - min)) * 100;

            valorMobile.textContent = value;
            tooltipMobile.style.left = `calc(${percent}%)`;

            sliderMobile.style.background = `
                linear-gradient(90deg,
                    #2B9359 0%, #005827 ${percent}%,
                    #e5e7eb ${percent}%, #e5e7eb 100%)`;
        };

        updateMobile();
        sliderMobile.addEventListener('input', updateMobile);

        
        sliderMobile.addEventListener('change', () => {
            sessionStorage.setItem('scrollY', window.scrollY);

            const url = new URL(window.location.href);
            url.searchParams.set('tiempo', sliderMobile.value);
            url.searchParams.delete('pagina');
            window.location.href = url;
        });

    }

});
</script>



<script>
document.addEventListener('DOMContentLoaded', () => {
    const scrollY = sessionStorage.getItem('scrollY');

    if (scrollY !== null) {
        window.scrollTo(0, parseInt(scrollY, 10));
        sessionStorage.removeItem('scrollY');
    }
});
</script>


<script>
document.querySelectorAll('a[href*="categoria"], a[href*="tiempo"]').forEach(link => {
    link.addEventListener('click', () => {
        sessionStorage.setItem('scrollY', window.scrollY);
    });
});
</script>