/**
 * Componente "+?" (conoce más) — mimaloo
 * Disclosure progresivo: botón flotante al inicio de un párrafo/bloque,
 * sobrevolando su esquina superior izquierda SIN tapar el texto, con una
 * ondulación suave. Al pasar por encima muestra un tooltip ("Conoce más",
 * multidioma) y al pulsar abre un modal accesible con el detalle.
 * Reutilizable en cualquier afirmación (stack, envíos, ingredientes…).
 *
 * Uso (HTML en un bloque). El contenedor debe llevar la clase .ml-has-info:
 *   <p class="ml-has-info">
 *     Texto de la afirmación…
 *     <button class="ml-info" data-mlinfo="stack" data-mltip="Conoce más"
 *             data-mlclose="Cerrar" aria-haspopup="dialog">+?</button>
 *   </p>
 *   <template id="mlinfo-stack"> ...contenido del modal... </template>
 */

/* Contenedor al que se ancla el botón */
.ml-has-info { position: relative; }

/* Botón flotante, a la IZQUIERDA del bloque, sin pisar el texto */
.ml-info {
	position: absolute;
	top: 0;
	left: 0;
	/* Desplaza el botón totalmente a la izquierda, fuera del texto:
	   su ancho (34px) + un pequeño margen. */
	transform: translate(calc(-100% - 10px), -6px);
	z-index: 5;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: none;
	border-radius: 999px;                  /* pill / redondeado */
	background: var(--wp--preset--color--coral, #F4795B);
	color: #fff;
	font-family: var(--wp--preset--font-family--baloo-2), cursive;
	font-weight: 800;                       /* más grueso */
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 3px 8px rgba(226, 97, 63, 0.35);
	transition: background .15s ease, box-shadow .15s ease;

	/* Ondulación suave y continua (solo vertical, para no pisar el texto) */
	animation: ml-info-bob 2.6s ease-in-out infinite;
}
.ml-info:hover,
.ml-info:focus-visible {
	background: var(--wp--preset--color--coral-dark, #E2613F);
	box-shadow: 0 5px 14px rgba(226, 97, 63, 0.5);
	outline: none;
	animation-play-state: paused;           /* se detiene al interactuar */
}
.ml-info:focus-visible {
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--wp--preset--color--coral-dark, #E2613F);
}

@keyframes ml-info-bob {
	0%, 100% { transform: translate(calc(-100% - 10px), -6px); }
	50%      { transform: translate(calc(-100% - 10px), -16px); }
}

/* En pantallas estrechas el botón no cabe a la izquierda: lo metemos
   en flujo, encima del texto, para no taparlo ni salirse de la pantalla. */
@media (max-width: 720px) {
	.ml-info {
		position: static;
		transform: none;
		margin: 0 0 6px 0;
		animation: none;
	}
}

/* Tooltip (el "conoce más" multidioma lo pone data-mltip) */
.ml-info::after {
	content: attr(data-mltip);
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	padding: 0.4em 0.7em;
	background: var(--wp--preset--color--antracite, #33383F);
	color: #fff;
	font-family: var(--wp--preset--font-family--nunito), sans-serif;
	font-size: 0.78em;
	font-weight: 600;
	white-space: nowrap;
	border-radius: 8px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease;
	z-index: 20;
}
.ml-info:hover::after,
.ml-info:focus-visible::after {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Modal */
.mlinfo-overlay {
	position: fixed;
	inset: 0;
	background: rgba(51, 56, 63, 0.55);   /* antracita translúcido */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 9999;
	opacity: 0;
	transition: opacity .18s ease;
}
.mlinfo-overlay.is-open { opacity: 1; }
.mlinfo-modal {
	background: var(--wp--preset--color--white, #FFFDF9);
	color: var(--wp--preset--color--antracite, #33383F);
	font-family: var(--wp--preset--font-family--nunito), sans-serif;
	max-width: 560px;
	width: 100%;
	max-height: 80vh;
	overflow: auto;
	border-radius: 20px;                    /* redondeado acorde al tema */
	padding: 30px 28px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
	transform: translateY(10px) scale(.98);
	transition: transform .18s ease;
	position: relative;
}
.mlinfo-overlay.is-open .mlinfo-modal { transform: translateY(0) scale(1); }
.mlinfo-modal h3 {
	font-family: var(--wp--preset--font-family--baloo-2), cursive;
	margin-top: 0;
}
.mlinfo-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--peach, #FFDBC8);
	color: var(--wp--preset--color--antracite, #33383F);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}
.mlinfo-close:hover { background: var(--wp--preset--color--sun, #FFC94D); }

@media (prefers-reduced-motion: reduce) {
	.ml-info { animation: none; }
	.ml-info, .ml-info::after, .mlinfo-overlay, .mlinfo-modal { transition: none; }
}